WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Contact Form 7

Контактная форма - неотъемлемый атрибут большинства сайтов. Именно поэтому в каталоге WordPress так много плагинов для контактных форм. Один из самых популярных - это Contact Form 7. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.

Создание и показ контактных форм

Создание форм в админке

После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.

Форма на картинке создана при активации плагина автоматически.

Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.

Формы создаются как произвольный тип записи - wpcf7_contact_form. Т.е. страница редактирования формы - это тип записи.

меню

Лицевая часть сайта

А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):

На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).

Настройка формы (создание сложных форм)

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

В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.

Под заголовком - шорткод. Его используем в записях, для вывода формы.

И ниже - четыре вкладки:

  1. Шаблон формы
  2. Письмо
  3. Уведомления при отправке формы
  4. Дополнительные настройки

Рассмотрим каждую вкладку отдельно.

меню

Шаблон формы

В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.

Вёрстка формы

Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:

<label> Ваше имя (обязательно)
	[text* your-name] </label>

<label> Ваш e-mail (обязательно)
	[email* your-email] </label>

<label> Тема
	[text your-subject] </label>

<label> Сообщение
	[textarea your-message] </label>

[submit "Отправить"]

А при отображении в записи она превратится в такой HTML:

<div role="form" class="wpcf7" id="wpcf7-f5-p6-o1" lang="ru-RU" dir="ltr">
	<div class="screen-reader-response"></div>
	<form action="/contacts/#wpcf7-f5-p6-o1" method="post" class="wpcf7-form" novalidate="novalidate">
		<div style="display: none;">
			<input type="hidden" name="_wpcf7" value="5">
			<input type="hidden" name="_wpcf7_version" value="4.6">
			<input type="hidden" name="_wpcf7_locale" value="ru_RU">
			<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5-p6-o1">
			<input type="hidden" name="_wpnonce" value="6947975280">
		</div>
		<p>
			<label> Ваше имя (обязательно) <br>
				<span class="wpcf7-form-control-wrap your-name">
					<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
				</span>
			 </label>
		</p>
		<p>
			<label> Ваш e-mail (обязательно) <br>
				<span class="wpcf7-form-control-wrap your-email">
					<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false">
				</span>
			</label>
		</p>
		<p>
			<label> Тема <br>
				<span class="wpcf7-form-control-wrap your-subject">
					<input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
				</span>
			</label>
		</p>
		<p>
			<label> Сообщение <br>
				<span class="wpcf7-form-control-wrap your-message">
					<textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea>
				</span>
			</label>
		</p>
		<p>
			<input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit">
			<span class="ajax-loader"></span>
		</p>
		<div class="wpcf7-response-output wpcf7-display-none"></div>
	</form>
</div>
меню

Синтаксис шорткодов

Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".

Тег [text* your-name] в последствии будет преобразован в текстовое поле с html кодом:

<span class="wpcf7-form-control-wrap your-name">
	<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
</span>

Шорткоды можно удобно создавать через конструктор шорткодов.

Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:

  1. удалить и создать с помощью конструктора новый.
  2. изучить синтаксис и исправить шорткод поля вручную.

С конструктором вы и сами разберетесь.

А тут мы разберем синтаксис шорткода.

Для примера рассмотрим тег текстового поля с дополнительными опциями:

[text* client-name id:my-id class:my-class placeholder "Введите имя"]
text(обязательный)
Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать.
*
Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить).
client-name(обязательный)
Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма.
id:my-id
Атрибут id в input со значением my-id. Используется для оформления.
class:my-class
Атрибут class в input со значением my-class. Используется для оформления.
placeholder "Введите имя"
Использовать текст "Введите имя" как placeholder.

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

меню

Типы полей

  • Текстовые поля: text, email, tel, url, textarea
  • Числовые поля: number, range
  • Поля с датой: date
  • Чекбоксы, радио, списки: checkbox, radio, select
  • Поле с загрузкой файла: file
  • CAPTCHA: captchac и captchar
  • Опросы: quiz
  • Поле "Принять": acceptance
  • Кнопка "Отправить": submit
  • Произвольный тип поля

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

Шаблон письма

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

Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: [text fio]. Теперь в шаблоне письма можно использовать тег [fio]. В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).

Заголовки письма:
  • Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.

  • От кого - имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например admin@site.ru).

    Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.

  • Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.

  • Дополнительные заголовки - По умолчанию тут прописано Reply-To: [your-email]. Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы [your-email] - это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: campusboy@mail.ru.

О заголовках письма читайте на Википедии.

Тело письма

Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).

Разберем дефолтное письмо:

От: [your-name] <[your-email]>
Тема: [your-subject]

Сообщение:
[your-message] 

--
Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:

От: Дмитрий <campusboy@mail.ru>
Тема: Вопрос про Contact Form 7

Сообщение:
Привет! У меня возник вопрос по плагину Contact Form 7. Как его настроить?

--
Отправлено с сайта Изучаем плагин Contact Form 7 (http://test-wp.ru)

Существуют ещё специальные теги для шаблона письма, позволяющие сделать ваше письмо более содержательным.

Не обязательные поля в теле письма

Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города [city], но юзер не заполнил поле [city], а значит в письме мы получим Человек с города ... Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.

Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.

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

меню

Уведомления при отправке формы

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

Теги шаблона письма не работают в этих полях.

Дополнительные настройки

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

Об использовании данного функционала я расскажу в отдельной статье.

22 коммента
Полезные 1 Вопросы 3 Все
  • Евгений

    Привет. Измаялся искать решение, может поможете чем.
    Надо при выводе формы как то передавать, на какой ящик слать письмо.
    Т.е. форма будет выводиться do_shortcode('[contact-form-7 id="233618" title="Форма контактов"]'), но в разных постах отправка должна идти на разные ящики.
    Подскажите, можно ли такое реализовать?

    Ответить1.9 года назад #
  • Сергей

    Отличный плагин, всегда использовал! Подскажите какие есть еще аналогичные ему или может еще какие лучше есть плагины. Поищу у вас на сайте, может что найду smile

    Ответить1.7 года назад #
  • Олег

    Здравствуйте. как сделать шрифт крупнее в полях?

    Ответить1.6 года назад #
    • campusboy3377 cайт: www.youtube.com/c/wpplus

      Здравствуйте. Добавить в свой css файл:

      .wpcf7-form-control {
        font-size: 20px;
      }
      Ответить1.6 года назад #
  • Irena

    Подскажите пожалуйста, как уменьшить высоту полей и высоту шрифта? Не работает добавление в шорткод чисел вроде 120/50] 120x30] в конце шорткода. и в стилях font-size почему-то не реагирует. Правила style.css

    Ответить10 мес назад #
  • @ Александр1 cайт: www.alexzdesign.ru

    Никто не сталкивался с тем, что уведомления CF на странице не отображаются?
    Письмо уходит, в инспекторе видно что так, форма обновляется, а на странице никакого оповещения. Версия 4.9 CF7

    into: "#wpcf7-f916-p3078-o1"
    message: "Спасибо! Мы с Вами свяжемся."
    status: "mail_sent"
    Ответить6 мес назад #
    • campusboy3377 cайт: www.youtube.com/c/wpplus

      Возможно через CSS блок с сообщением скрыт?

      Ответить6 мес назад #
      • @ Александр1 cайт: www.alexzdesign.ru

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

        Ответить6 мес назад #
        • campusboy3377 cайт: www.youtube.com/c/wpplus

          Есть такой тег как response, попробуйте воспользоваться им.

          2
          Ответить6 мес назад #
          • @ Александр1 cайт: www.alexzdesign.ru

            Благодарю! Плюсик Вам в карму. Помогло. Чужая вёрстка - те ещё грабли.

            Ответить6 мес назад #
  • Шахбоз

    А можно ли как то несколько инпутов обернуть в один блок?

    Ответить6 мес назад #
    • campusboy3377 cайт: www.youtube.com/c/wpplus

      Ну да. Просто в шаблоне формы берёте и оборачиваете. В чем проблема-то?

      Ответить6 мес назад #
  • Юрий

    Плагин классика, уже давно его использую и работает как часы. Но для форм посложней использую вот этот https://ru.wordpress.org/plugins/ucalc/ так как приходится кроме заявок еще и оплаты через форму принимать

    Ответить3 мес назад #
  • Добрый день. Спасибо за информацию, очень все пригодилось. Но у меня вопрос как адаптировать форму под мобильные устройства?

    Ответить3 мес назад #
    • @ Александр1 cайт: www.alexzdesign.ru

      Через медиазапросы CSS всё это делается.
      Элементам формы можно назначить классы и сделать всё через них.

      1
      Ответить3 мес назад #
  • @ Владимир

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

    Ответить2 мес назад #
    • @ Александр1 cайт: www.alexzdesign.ru

      Мне кажется для такого плагина это слишком жирно.
      Тут получается, что в момент отправки следует через какой-нибудь ajax проверять телефон по базе и выдавать результат пользователю - регистрировать или отказывать.
      Если вы нашли инструкцию по подобной ситуации, то на пальцах расскажите в чём там логика разрешения ситуации?

      Ответить2 мес назад #
      • @ Владимир

        Спасибо за ответ. По инструкции необходимо установить плагин базы данных contact-form-7-to-database-extension (он есть на github) и вставить код в function.php

        /**
         * @param $formName string
         * @param $fieldName string
         * @param $fieldValue string
         * @return bool
         */
        function is_already_submitted($formName, $fieldName, $fieldValue) {
        	require_once(ABSPATH . 'wp-content/plugins/contact-form-7-to-database-extension/CFDBFormIterator.php');
        	$exp = new CFDBFormIterator();
        	$atts = array();
        	$atts['show'] = $fieldName;
        	$atts['filter'] = "$fieldName=$fieldValue";
        	$atts['unbuffered'] = 'true';
        	$exp->export($formName, $atts);
        	$found = false;
        	while ($row = $exp->nextRow()) {
        		$found = true;
        	}
        	return $found;
        }
        
        /**
         * @param $result WPCF7_Validation
         * @param $tag array
         * @return WPCF7_Validation
         */
        function my_validate_email($result, $tag) {
        	$formName = 'email_form'; // Change to name of the form containing this field
        	$fieldName = 'email_123'; // Change to your form's unique field name
        	$errorMessage = 'Email has already been submitted'; // Change to your error message
        	$name = $tag['name'];
        	if ($name == $fieldName) {
        		if (is_already_submitted($formName, $fieldName, $_POST[$name])) {
        			$result->invalidate($tag, $errorMessage);
        		}
        	}
        	return $result;
        }
        
        // use the next line if your field is a **required email** field on your form
        add_filter('wpcf7_validate_email*', 'my_validate_email', 10, 2);
        // use the next line if your field is an **email** field not required on your form
        add_filter('wpcf7_validate_email', 'my_validate_email', 10, 2);
        
        // use the next line if your field is a **required text** field
        add_filter('wpcf7_validate_text*', 'my_validate_email', 10, 2);
        // use the next line if your field is a **text** field field not required on your form 
        add_filter('wpcf7_validate_text', 'my_validate_email', 10, 2);
        

        Я нашел в чем проблема. В адресе плагина, у меня необходимо добавить "-master" и всё заработает.

        Вот так: wp-content/plugins/contact-form-7-to-database-extension-master/CFDBFormIterator.php

        Ответить2 мес назад #
        • @ Владимир

          Может, у вас есть идеи как переделать, чтобы проверялся номер телефона, вместо мэйла?

          Ответить2 мес назад #
Здравствуйте, !     Войти . Зарегистрироваться