Пример простой контактной формы связи

Здесь мы приведем простой пример контактной страницы.

Мы предполагаем, что вы уже установили Компонент Formit через Управление пакетами и ознакомились с разделом Formit Как использовать.

В этом примере контактная форма будет проверять входные данные, отправлять электронное письмо и, наконец, перенаправлять на ресурс с идентификатором 123.

Процесс валидации (смотрите, как он работает здесь, если описать кратко, в нем - каждый хук выполняет какую-то логику, в случае успеха - передает обработку следующему хуку) в этом примере делает следующее: кроме прочего удаляет теги из сообщения, подтверждает валидность электронной почты и убеждается, что ни одно из полей не пустое. Все это указывается в параметре &validate.

И, наконец, нам нужна поддержка reCaptcha. Мы уже настроили наши открытый и закрытый ключи для reCaptcha с помощью следующих системных настроек:

• formit.recaptcha_public_key
• formit.recaptcha_private_key

Тег сниппета¶

Вы можете вызвать этот Сниппет где угодно: внутри Шаблона, Чанка, тела содержимого страницы или даже программно через runSnippet.

Есть только одно условие - Formit должен быть запущен на странице, куда будут отправлены данные из контактной формы ниже (см. значение поля «action»).

[[!FormIt?
   &hooks=`recaptcha,email,redirect`
   &emailTpl=`MyEmailChunk`
   &emailTo=`[email protected]`
   &emailFrom=`[[++emailsender]]`
   &redirectTo=`123`
   &validate=`nospam:blank,
      name:required,
      email:email:required,
      subject:required,
      text:required:stripTags,
      numbers:required,
      colors:required`
]]

Убедитесь, что параметр emailFrom установлен в [[++emailsender]], иначе будет использоваться значение поля email из формы. Это вызывает проблемы, так как большинство хостингов больше не отправляют письма с адресом отправителя from от неизвестных доменов.

Контактная форма¶

Этот HTML-код должен вызываться на странице сайта, где вы хотите увидеть контактную форму. Значение атрибута action указывает на страницу, на которой расположен вызов Сниппета, в нашем случае мы вызываем его на той же странице, поэтому мы используем ~tag, чтобы создать ссылку на текущую страницу.

<h2>Контактная форма</h2>

[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]

<form action="[[~[[*id]]]]" method="post" class="form">
    <input type="hidden" name="nospam" value="" />

    <label for="name">
        Имя:
        <span class="error">[[!+fi.error.name]]</span>
    </label>
    <input type="text" name="name" id="name" value="[[!+fi.name]]" />

    <label for="email">
        Email:
        <span class="error">[[!+fi.error.email]]</span>
    </label>
    <input type="text" name="email" id="email" value="[[!+fi.email]]" />

    <label for="subject">
        Тема:
        <span class="error">[[!+fi.error.subject]]</span>
    </label>
    <input type="text" name="subject" id="subject" value="[[!+fi.subject]]" />

    <label for="text">
        Сообщение:
        <span class="error">[[!+fi.error.text]]</span>
    </label>
    <textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]">[[!+fi.text]]</textarea>

    <label>
        Числа:[[+fi.error.numbers]]
        <select name="numbers" value="[[!+fi.numbers]]">
            <option value="">Выберите вариант...</option>
            <option value="one" [[!+fi.numbers:FormItIsSelected=`one`]]>Один</option>
            <option value="two" [[!+fi.numbers:FormItIsSelected=`two`]]>Два</option>
            <option value="three" [[!+fi.numbers:FormItIsSelected=`three`]]>Три</option>
        </select>
    </label>

    <label>
        Цвета:[[!+fi.error.colors]]
        <input type="hidden" name="colors[]" value="" />
    </label>
    <ul>
      <li>
        <label><input type="checkbox" name="colors[]" value="red" [[!+fi.colors:FormItIsChecked=`red`]] /> Красный</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="blue" [[!+fi.colors:FormItIsChecked=`blue`]] /> Синий</label>
      </li>
      <li>
        <label><input type="checkbox" name="colors[]" value="green" [[!+fi.colors:FormItIsChecked=`green`]] /> Зеленый</label>
      </li>
    </ul>

    <br class="clear" />
    [[!+formit.recaptcha_html]]
    [[!+fi.error.recaptcha]]

    <br class="clear" />

    <div class="form-buttons">
        <input type="submit" value="Отправить" />
    </div>
</form>

MyEmailChunk (Tpl чанк)¶

Ниже приведен чанк для письма электронной почты &emailTpl, который мы отправляем на адрес, указанный в параметре &emailTo Formit, после получения и проверки данных формы.

Это Чанк нашей формы.

<br />[[+name]] ([[+email]]) Wrote: <br />

[[+text]]

Смотрите также¶

1. AjaxForm Отправка любой формы через Ajax
2. FormItAutoResponder
3. Что такое Google Recaptcha
4. ReCaptchaV2 Google Recaptcha(V2 и V3 поддерживаются) компонент для MODX