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

Модуль Контактная форма добавляет на сайт готовую форму обратной связи. С ее помощью посетитель может отправить сообщение владельцу или администратору сайта.

Такой модуль удобно использовать на странице Контакты, на страницах услуг, в лендингах и в любых других разделах, где нужно быстро дать пользователю возможность написать вам — без установки отдельного плагина.

Как работает модуль

Форма выводится на странице с помощью шорткода. После отправки модуль сам обрабатывает данные: проверяет, что форма была отправлена корректно, а затем проверяет заполненные поля.

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

Если в форме есть ошибки — например, не заполнено обязательное поле — пользователь сразу увидит сообщение об этом на той же странице.

Как добавить форму на страницу

Чтобы вывести форму, вставьте на нужную страницу шорткод:

Также поддерживается старый вариант шорткода:

Если вы только начинаете работать с WordPress, просто добавьте этот шорткод в текстовый блок, блок
Шорткод или в содержимое страницы — форма появится в этом месте.

Параметры шорткода

У шорткода есть 4 параметра, с помощью которых можно менять поведение формы на конкретной странице:

do_redirect — делать ли переход на другую страницу после успешной отправки;
redirect_url — адрес для перехода после отправки;
fields — какие поля оставить в форме;
use_ajax — отправлять ли форму без перезагрузки страницы.

По умолчанию параметр do_redirect включен, а в качестве
redirect_url используется текущая страница.

Если одна и та же настройка указана и в кастомайзере, и в шорткоде, приоритет всегда у шорткода. Это удобно, когда для всех форм действуют общие настройки, но одну конкретную форму нужно настроить по-другому.

Примеры:

[contact_form do_redirect="false"]

После отправки пользователь останется на той же странице и увидит сообщение об успехе без перехода.

[contact_form redirect_url="/thank-you/"]

После успешной отправки пользователь будет перенаправлен на страницу /thank-you/.

[contact_form fields="name,email,message,consent"]

Форма покажет только перечисленные поля: имя, email, сообщение и галочку согласия.

[contact_form use_ajax="true" do_redirect="false"]

Форма будет отправляться без перезагрузки страницы, а сообщение об успешной отправке появится сразу на месте формы.

Где находятся настройки

Все основные настройки формы находятся в WordPress по пути:
Внешний вид > Настроить > Модули > Контактная форма.

Если вы хотите изменить состав полей, текст сообщений или способ отправки формы, в большинстве случаев начинать нужно именно оттуда.

Поля формы

Настройка Поля формы позволяет выбрать:

какие поля будут показаны;
в каком порядке они будут идти.

Для стандартной формы доступны такие поля: name, email, phone,
subject, message, consent.

Те же поля можно дополнительно ограничить через параметр шорткода fields. Важно понимать: параметр
fields не создает новые поля, а только оставляет нужные из уже доступных.

Например, вы можете:

скрыть поле темы сообщения;
включить поле телефона;
поменять порядок полей.

Обязательные поля в настройках помечаются звездочкой.

Сообщение после успешной отправки

В настройке
Сообщение об успешной отправке можно указать текст, который увидит пользователь после успешной отправки формы.

Например: Спасибо! Мы получили ваше сообщение и скоро свяжемся с вами.

AJAX-отправка

Настройка Использовать AJAX-отправку включает отправку формы без полной перезагрузки страницы.

Это делает работу формы более удобной для пользователя: страница не обновляется, а результат отправки показывается сразу.

Если нужно включить или отключить AJAX только для одной формы, используйте параметр шорткода
use_ajax. Он имеет приоритет над общей настройкой в кастомайзере.

Email отправителя

Настройка
Email отправителя определяет адрес, который будет указан как отправитель в письмах, отправленных через форму.

Если вы не укажете свой адрес, по умолчанию будет использоваться технический email сайта в формате
wordpress@домен-сайта.

Если письма иногда не доходят, стоит проверить эту настройку и общие настройки отправки почты на сайте.

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

Для нее доступны две настройки:

Текст галочки согласия — текст рядом с чекбоксом;
Сообщение об ошибке согласия — текст, который увидит пользователь, если не поставит обязательную галочку.

По умолчанию стандартная галочка согласия обязательна.

Если разработчику нужно сделать ее необязательной или добавить дополнительные галочки, это можно сделать через хук
wpbox/contact_form/available_fields.

Цвета сообщений

В настройках можно отдельно задать цвета для сообщений об успехе и об ошибках формы.

фон успешного сообщения;
цвет текста успешного сообщения;
фон сообщения об ошибке;
цвет текста сообщения об ошибке.

Это помогает аккуратно вписать форму в дизайн сайта.

Какие поля есть в форме по умолчанию

Стандартно модуль поддерживает такие поля:

Имя — имя пользователя;
Email — email пользователя;
Телефон — номер телефона;
Тема — тема сообщения;
Сообщение — текст сообщения;
Галочка согласия — подтверждение согласия.

Поле телефона по умолчанию выключено. Остальные основные поля обычно доступны сразу.

Если разработчик изменит список полей через хук
wpbox/contact_form/available_fields, этот список тоже изменится — в том числе и для параметра
fields в шорткоде.

Хуки для разработчика

Если стандартных настроек недостаточно, модуль можно расширять через хуки WordPress.

Хуки модуля контактной формы:

wpbox/contact_form/available_fields — изменить список доступных полей;
wpbox/contact_form/fields — изменить итоговый набор полей перед выводом формы;
wpbox/contact_form/before_fields — вывести разметку перед полями формы;
wpbox/contact_form/after_fields — вывести разметку после полей формы;
wpbox/contact_form/button_text — изменить текст кнопки отправки;
wpbox/contact_form/message_sent — изменить сообщение об успешной отправке;
wpbox/contact_form/subject — изменить тему письма по умолчанию;
wpbox/contact_form/errors — добавить собственные проверки и ошибки перед отправкой;
wpbox/contact_form/submission_data — изменить данные отправки формы;
wpbox/contact_form/submit — подключить свой обработчик отправки после успешной проверки;
wpbox/contact_form/submitted — выполнить действие после стандартной обработки;
wpbox/contact_form/body — изменить текст письма;
wpbox/contact_form/email_to — изменить email получателя;
wpbox/contact_form/email_from — изменить email отправителя.

С помощью этих хуков можно, например, подключить captcha, отправку в CRM, webhook, дополнительную валидацию или полностью изменить стандартную логику отправки.

Примеры

Ниже — несколько типовых примеров для разработчика. Они пригодятся, если нужно немного расширить форму без правок самого модуля.

Добавить свое поле

Этот пример добавляет поле
Company. После этого его можно будет использовать и в форме, и в настройке
Поля формы в кастомайзере.

add_filter( 'wpbox/contact_form/available_fields', function( $fields ) {
    $fields['company'] = [
        'name'            => 'contact-company',
        'type'            => 'text',
        'label'           => __( 'Company', 'wpbox' ),
        'placeholder'     => __( 'Your company', 'wpbox' ),
        'required'        => false,
        'default_enabled' => false,
        'autocomplete'    => 'organization',
    ];

    return $fields;
} );

Переименовать стандартное поле

В этом примере поле Subject переименовывается в
Topic. Изменение сразу отразится и в форме, и в настройках кастомайзера.

add_filter( 'wpbox/contact_form/available_fields', function( $fields ) {
    if ( isset( $fields['subject'] ) ) {
        $fields['subject']['label']       = __( 'Topic', 'wpbox' );
        $fields['subject']['placeholder'] = __( 'Message topic', 'wpbox' );
    }

    return $fields;
} );

Если одной галочки согласия недостаточно, можно добавить вторую — со своим текстом и своей проверкой.

add_filter( 'wpbox/contact_form/available_fields', function( $fields ) {
    $fields['privacy_notice'] = [
        'name'            => 'contact-privacy-notice',
        'type'            => 'checkbox',
        'label'           => __( 'I have read the privacy notice.', 'wpbox' ),
        'choice_label'    => __( 'Privacy Notice', 'wpbox' ),
        'required'        => true,
        'required_error'  => __( 'You must confirm that you have read the privacy notice.', 'wpbox' ),
        'default_enabled' => false,
        'value'           => '1',
        'checked_value'   => '1',
    ];

    return $fields;
} );

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

CSS-переменные

Если нужно тонко настроить внешний вид сообщений формы, это можно сделать через CSS-переменные:

--wpbox-contact-form-gap: 1rem;
--wpbox-contact-form-message-padding: 1rem 1.25rem;
--wpbox-contact-form-message-radius: var(--wpbox-block-border-radius);
--wpbox-contact-form-success-bg: var(--wpbox-light-bg);
--wpbox-contact-form-success-color: var(--wpbox-text-color);
--wpbox-contact-form-error-bg: var(--wpbox-light-bg);
--wpbox-contact-form-error-color: #b42318;
--wpbox-contact-form-error-border-color: rgba(180, 35, 24, .18);

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

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