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

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

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

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

Валидация (см. Валидаторы FormIt) в этом примере снимает теги с сообщения, проверяет email и требует заполнения всех полей через &validate.

Форма также использует reCAPTCHA v3 через хук recaptcha (FormIt 5.2.1+). В системных настройках задайте:

• formit.recaptcha_site_key
• formit.recaptcha_secret_key
• при необходимости formit.recaptcha_min_score (по умолчанию 0.5)
• formit.frontend_js = js/web/formit.js (нужен для запроса токена)

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

[[!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 из поля формы. Большинство хостингов отклоняют письма с адресом отправителя с чужого домена.

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

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

<form action="[[~[[*id]]]]" method="post" class="form">
    [[!+fi.validation_error_message]]
    [[!+fi.successMessage]]
    <div class="error">[[!+fi.error_message]]</div>

    <input type="hidden" name="nospam" value="" />

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

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

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

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

    <div class="form-field">
        <label for="numbers">Числа:</label>
        <select name="numbers" id="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>
        [[!+fi.error.numbers]]
    </div>

    <div class="form-field">
        <label>Цвета:</label>
        <input type="hidden" name="colors[]" value="" />
        <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>
        [[!+fi.error.colors]]
    </div>

    <div class="form-field">
        [[+formit.recaptcha_html]]
        [[!+fi.error.recaptcha]]
    </div>

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

MyEmailChunk (Tpl чанк)¶

Это чанк письма FormIt.

<br />[[+name]] ([[+email]]) написал(а): <br />

[[+text]]

Форма уходит, а письма нет¶

FormIt шлёт почту через системные настройки MODX. Если форма «срабатывает» (редирект, success), а письма в ящике нет, сначала проверяйте SMTP и доставку, а не только хуки FormIt.

1. Проверьте сам FormIt¶

1. Смотрите ошибки на странице: [[!+fi.error_message]], [[!+fi.validation_error_message]] и ошибки полей вроде [[!+fi.error.email]].
2. Держите порядок &hooks= осмысленным: проверки (например recaptcha) до email, redirect в конце. Если email падает, следующие хуки могут не отработать так, как вы ждёте.
3. Укажите в &emailTo= адрес, который вы реально читаете.
4. Оставьте &emailFrom= как [[++emailsender]] (или другой адрес вашего домена). Не ставьте email посетителя в From.
5. Убедитесь, что чанк emailTpl существует и рендерится. Неверное имя чанка ломает email-хук без явной ошибки для посетителя.

2. Отделите FormIt от SMTP через QuickEmail¶

Установите QuickEmail (Bob Ray) через Управление пакетами. На временном ресурсе поставьте:

[[!QuickEmail? &debug=`1`]]

Откройте ресурс на сайте. QuickEmail отправит тестовое письмо тем же стеком MODX, что и FormIt, и выведет подробный лог.

• Если QuickEmail не шлёт письмо, сначала поправьте Система → Системные настройки → область Mail.
• Если QuickEmail работает, а FormIt нет, снова проверьте &emailTo, &emailTpl, хуки и папку «Спам».

Уберите вызов QuickEmail после проверки. Публичная страница с &debug= может светить параметры почты.

Полная настройка SMTP, доставляемость и примеры провайдеров: Sending mail (EN). Ключи настроек те же в русской панели.

3. Типичные SMTP-настройки (MODX 3)¶

Включите mail_use_smtp и обычно mail_smtp_auth. Задайте хост, порт, логин, пароль и шифрование (mail_smtp_secure: tls или ssl, либо пустое значение плюс mail_smtp_autotls, если так удобнее провайдеру).

Значение emailsender должно быть адресом, который провайдер разрешает (верифицированный домен для Mailgun/SES или ящик, под которым вы логинитесь в SMTP).

Тема на форуме, которая привела к этому разделу: Can’t get FormIt to send form.

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

1. Sending mail
2. QuickEmail
3. FormIt.Hooks.recaptcha
4. FormItAutoResponder
5. FormIt.Validators