• Часть 1. Установка и настройка плагина
• Часть 2. Использование плагина в форме вставки контента
• Часть 3. Использование в форме обратной связи - feedback, contact us

В первой части статьи мы говорили об установке плагина ReCaptcha Validator в систему KooBoo, во второй о его использовании в формах добавления содержимого (контента), теперь поговорим об его применении в формах обратной связи, которые веб-мастера часто устанавливают на своих сайтах для контакта со своими пользователями.

Например, можно применять данный механизм для получения каких-либо заказов от потенциального клиента, которые будут отправляться на Ваш электронный адрес.

Здесь я рассмотрю пример, использующий все доступные в плагине поля для формы обратной связи. При конечном использовании Вы имеете возможность сформировать свой набор полей из списка доступных.

On-line демонстрация работы формы обратной связи с плагином ReCaptcha

Для реализации данного примера необходимо создать представление (view) с кодом формы, которая может содержать некоторые из следующих полей (все поля, кроме "Body", необязательные).

Стандартные поля (из встроенной формы Contact Us):

From (не рекомендуется использовать) - адрес отправителя (только если Вы используете анонимный SMTP сервер, в других случаях это поле использовать нельзя, т.к. при отправке письма возникнет ошибка SMTP авторизации). Если Вы хотите, чтобы пользователь ввел свой эл.адрес для контакта, используйте поле "contact_email".

Subject (не рекомендуется использовать) - краткий заголовок обращения (будет использовано как заголовок письма). Многие пользователи не могут нормально сформулировать заголовок своего послания, поэтому не рекомендуется использовать это поле. Если поле не указано, то заголовком письма будет сообщение: "FeedBack from site <название сайта>".

Body (обязательное поле) - основной текст письма. (будет вставлено в тело эл.письма вместе с дополнительными полями).

Примечание: чтобы использовать встроенную форму Contact Us, в окне редактирования представления (view) в блоке "Помощник кода" (Code helper) найдите пункт Формы ("Forms") и в подменю выберите "Contact us". В код представления будет вставлен HTML-блок данной формы с вышеуказанными полями. Для вставки Recaptcha нужно добавить дополнительные параметры, указанные ниже.

Дополнительные поля: (будут вставлены в тело письма)

• contact_email -  эл.адрес для контакта
• contact_name -  ФИО контактного лица
• contact_phone -  телефон/факс для контакта
• contact_address -  почтовый адрес для контакта
• contact_firm - Название организации

Пример представления (view) для отправки формы обратной связи (поля From и Subject закомментированы):

<div class="common-form">
<h5 class="title">
Contact us</h5>
@if (ViewData["ReCaptchaFormResult"] == "Mail was sent")
{
<p style="color: green;">
<strong>Thank you for feedback! Your message was save.</strong></p>
}
<form method="post" action="">
@Html.AntiForgeryToken()
<!-- this contact form will send an email to the email address defined in system/settings/smtp-->
@*<input type="hidden" name="RedirectUrl" value='@Url.FrontUrl().PageUrl("Thankyou")'/>*@
<input type="hidden" name="recaptcha_form_action" value='SENDEMAIL' /><!-- SENDEMAIL or ADDCONTENT -->
<table>
<tbody>
@*<tr>
<th>
<label for="from">
From email:</label>
</th>
<td>
<input type="text" id="from" name="From" data-val-required="From is required" data-val="true"
data-val-regex-pattern = "\b[a-zA-Z0-9._%\-+']+@@[a-zA-Z0-9._\-]+\.[a-zA-Z]{2,6}\b"
data-val-regex = "Not valid e-mail." />
@Html.ValidationMessageForInput("From")
</td>
</tr>
<tr>
<th>
<label for="subject">
Subject:</label>
</th>
<td>
<input type="text" id="subject" name="Subject" />
</td>
</tr>*@
<tr>
<th>
<label for="body">
Body:</label>
</th>
<td>
<textarea id="body" name="Body" cols="20" rows="10" data-val-required="Body is required"
data-val="true"></textarea>
@Html.ValidationMessageForInput("Body")
</td>
</tr>
<tr>
<th>
<label for="contact_name">
Contact name:</label>
</th>
<td>
<input type="text" id="contact_name" name="contact_name" />
</td>
</tr>
<tr>
<th>
<label for="contact_email">
Contact e-mail:</label>
</th>
<td>
<input type="text" id="contact_email" name="contact_email" />
</td>
</tr>
<tr>
<th>
<label for="contact_phone">
Contact phone:</label>
</th>
<td>
<input type="text" id="contact_phone" name="contact_phone" />
</td>
</tr>
<tr>
<th>
<label for="contact_address">
Contact address:</label>
</th>
<td>
<input type="text" id="contact_address" name="contact_address" />
</td>
</tr>
<tr>
<th>
<label for="contact_firm">
Firm name:</label>
</th>
<td>
<input type="text" id="contact_firm" name="contact_firm" />
</td>
</tr>
<tr>
<th>
Code:
</th>
<td>
@if (ViewData["ReCaptchaSuccess"] != null && !(bool)ViewData["ReCaptchaSuccess"])
{
<strong><span style="color: red;">Captcha Validation FAILED!</span></strong>
}
@Html.Raw((string)ViewData["ReCaptchaScript"])
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="submit" name="submit" value="submit" /><br />
</td>
</tr>
</tbody>
</table>
</form>
</div>

Далее нам необходимо добавить плагин Recaptcha в указанное выше представление (view):

На что следует обратить внимание:

- Параметр action у тега формы должен быть пустым, в этом случае при отправке формы управление будет передаваться плагину. Если параметр будет заполнен, то форма обработается, игнорируя плагин.

- Внутрь формы нужно добавить скрытое поле "recaptcha_form_action" со значением "SENDEMAIL" (это команда для плагина, означающая тип действий с формой).

- В форме нужно указать команду @Html.AntiForgeryToken(), т.к. плагин его проверяет в целях защиты (рекомендуется вставлять эту команду при использовании любой формы в системе KooBoo).

- Условие "@if (ViewData["ReCaptchaSuccess"]..." проверяет правильность введенного кода капчи после отправки формы. Вид сообщения внутри условия Вы можете настроить под себя. Это условие можно располагать в любом месте представления (view).

- Команда "@Html.Raw((string)ViewData["ReCaptchaScript"])" выводит на странице непосредственно сам рисунок и скрипт ReCaptcha, который генерируется в плагине в зависимости от указанных в настройках сайта ключей ReCaptcha. Его также можно располагать в любом месте представления (view).

Если Вам необходимо после отправки формы перенаправить пользователя по какому-либо адресу, то в форму можно добавить следующий параметр, указав в значении адрес нужной страницы:

<input type="hidden" name="RedirectUrl" value='@Url.FrontUrl().PageUrl("Thankyou")'/>

Плагин ReCaptcha генерирует следующие параметры, которые доступны в представлении (view):

• ViewData["ReCaptchaScript"] - js-скрипт для отображения рисунка и формы ввода кода recaptcha
• ViewData["ReCaptchaSuccess"] - возвращает true (если код введен верно) или false (если код введен неверно)
• ViewData["ReCaptchaFormResult] - результат выполнения плагина. Содержит текст:
  - "Mail was sent" - почта отправлена
  - "Mail was not sent. Error sendig mail. " + сообщение об ошибке
  - "Mail was not sent. Body is empty." - почта не отправлена, нет текста сообщения

Читайте в следующей статье: Тонкая настройка рисунка recaptcha при использовании плагина

© Элла С. (Автор: Ella Sea)