Contact Form 7: настраиваем для WordPress форму обратной связи
Форма обратной связи – обязательный элемент для каждого сайта, который хочет оставаться на связи со своими клиентами и пользователями, но при этом ограничить количество вредоносных сообщений и спама. Если вы еще не реализовали страницу связи, тогда самое время этим заняться. В WordPress существует специальный плагин – Contact Form 7. Он зарекомендовал себя как самый распространенный, простой и одновременно действующий плагин для создания формы связи, а количество его установок превысило 5 миллионов.
Преимущества Contact Form 7 – простота в установке и возможность настроить форму обратной связи за несколько минут. Сейчас мы расскажем как это сделать.
1. Установка плагина Contact Form 7
Чтобы установить плагин, зайдите в админ панель вашего сайта и перейдите на вкладку Плагины, а затем Добавить новый. В строке поиска справа вверху напишите Contact Form 7 и найдите его. После нажмите Установить, а затем Активировать.
На левом боковом меню теперь появился сам плагин – Contact. В нем происходит его настройка.
Чтобы приступить, нажмите Add New, чтобы создать новую форму обратной связи.
Вы попадаете в настройку самого плагина. В поле Form комбинируется внешний вид письма и доступные функции, нужные поля для ввода, обозначается названия полей и кнопок. Стандартно в шаблоне указано обычная форма с полем отправителя, куда вносится имя пользователя, текст письма, тема и кнопка отправить. Вы можете самостоятельно визуализировать письмо и внести изменения в текстовые блоки. Чтобы добавить нужные элементы – дату, телефон, текстовую область, опрос, возможность прикреплять файл и так далее – нажмите на одну из активных кнопок.
В Contact Form 7 есть 4 окна, каждое из которых отвечает за:
- Form – создание внешнего вида формы обратной связи с помощью доступных инструментов;
- Mail – настройка почты, куда будут приходить письма, заголовка письма, структуры от кого;
- Messages – настройка уведомлений, которые будут отправляться пользователю, при различных ситуациях (письмо доставлено, ошибка в отправке, загружаемый файл слишком большой и так далее);
- Additional Settings – окно для дополнительной настройки контактной формы через кодирование.
2. Окно Form (Шаблон формы)
Настройте форму обратной связи:
Заметьте, что элементы кода со звездочкой (*) обязательны для заполнения.
3. Окно Mail (Письмо)
Настройте само письмо:
4. Окно Messages (Настройка уведомлений)
Настройте выводимые уведомления:
После сохранения всех настроек вам будет выведен шорткод, который нужно вставить на страницу, в запись или виджет, где нужно отображение формы:
Стандартное отображение формы будет примерно таким:
Форма обратной связи WordPress – необходимость, если в планах есть поддержка связи со своими пользователями. Следуя этим инструкциям, вы с легкостью создадите правильную форму и настроите плагин Contact Form 7.
При необходимости вы можете легко, быстро и бесплатно перенести свой сайт к нам. Процедура переноса вполне понятна и максимально ориентирована на клиентов. Для этого просто заполните заявку.
WordPress хостинг с расширенной поддержкой
Максимальная скорость. Ежедневный бекап. SSL бесплатно
Как добавить контактную форму в WordPress
Чтобы посетители вашего сайта могли с вами связаться, можно добавить на сайт свой номер телефона или адрес электронной почты. Пользователю придётся совершить несколько действий: набрать ваш номер или адрес, позвонить и оформить сообщение. Однако этот процесс можно упростить — добавить на сайт контактную форму обратной связи.
Обычно контактная форма состоит из нескольких полей, которые нужно заполнить. Например: «Имя», «Адрес электронной почты», «Текст сообщения». Через контактную форму пользователям будет удобнее с вами связаться: они заполнят необходимые поля и отправят форму в один клик, не нужно звонить или отправлять сообщение на email. Кроме того, посетители смогут подписаться на рассылку вашего сайта, оставить отзыв, заказать товар или услугу.
Для добавления контактных форм на сайт WordPress нужны плагины. Плагинов для добавления контактных форм для WordPress существует огромное множество, но мы расскажем о самом популярном — плагин Contact Form 7. Его установили уже более трёх миллионов пользователей, и он регулярно обновляется. После установки вы сможете добавлять на сайт формы обратной связи. Если вы хотите добавить на сайт на WordPress форму заказа, плагин Contact Form 7 также отлично подойдёт.
Шаг 1. Установите плагин Contact Form 7
Войдите в панель управления WordPress.
Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:
После установки нажмите Активировать:
Готово, вы установили и активировали плагин.
Шаг 2. Создайте форму обратной связи
Перейдите на появившуюся после установки вкладку Contact Form 7 — Добавить новую. На вкладке «Шаблон формы» откроется редактор формы с уже готовым стандартным шаблоном:
Введите имя новой формы в поле «Введите заголовок».
Если вы не хотите вносить изменения в шаблон, нажмите Сохранить и переходите к настройкам письма — шагу 4. Если же вы хотите отредактировать её, то переходите на следующий шаг 3.
Шаг 3. Настройте шаблон формы
В стандартном шаблоне в форму добавлены поля «Ваше имя», «Ваш e-mail», «Тема», «Сообщение» и кнопка Отправить.
Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.
Синтаксис тега формы
Пример тега формы: [text text-name “Enter your name”] . Он состоит из четырёх частей:
- Тип (в примере — text) — определяет тип элемента. Если поставить звёздочку после типа, то поле будет обязательным к заполнению: [text* ].
- Имя (text-name) — название поля ввода.
- Значение («Enter your name») — необязательно для добавления. Используется для значений по умолчанию, которые находятся в поле (подсказка, что вводить в поле пользователю).
Теги формы вы можете выбрать из списка и добавить их в контактную форму:
Рассмотрим поля, которые можно добавить:
- текст — текстовое поле для ввода текста только в одну строку, Например: имя, тема сообщения.
- email – адрес электронной почты.
- URL — адрес сайта или страницы.
- телефон — числовое поле для ввода номера телефона.
- номер — числовое поле для ввода (например, количества заказываемого товара).
- дата — дата в формате дд.мм.гггг.
- текстовая область — поле для ввода текста в несколько строк. Например, отзыв или сообщение от посетителя.
- в раскрывающемся меню — выпадающее меню, здесь можно добавить несколько пунктов меню для выбора. Пользователь может выбрать только один пункт.
- чекбоксы – чекбоксы, в которых можно выбрать один пункт, несколько или ни одного.
- радио кнопка – она похожа на чекбокс — предоставляются варианты для выбора. Пользователь обязательно должен выбрать один вариант из предложенных.
- принятие – чекбокс. Пока пользователь не поставит галочку (например, о том, что он согласен с правилами обработки персональных данных), кнопка отправки сообщения будет неактивна.
- опрос — CAPTCHA, чтобы убедиться, что форму отправил человек, а не робот. Вы можете задать здесь контрольный вопрос, на который нужно ответить перед отправкой формы. Только когда будет введён правильный ответ, кнопка отправки активируется.
- файл — создание кнопки для выбора файла, который можно прикрепить к письму.
- отправить — кнопка, при нажатии на которую отправляется форма.
Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:
Синтаксис тега почты
Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name] . Используется при настройке шаблона письма (шаг 4).
Шаг 4. Настройте шаблон письма
Если посетитель вашего сайта заполнит форму и отправит её, то на ваш электронный адрес придёт сообщение с этой формы.
Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:
- Кому — введите здесь свой адрес электронной почты, на который будут отправляться все отправленные формы.
- От кого — введите адрес электронной почты, который принадлежит тому же домену, что и ваш сайт.
- Тема — тема сообщения, которую вводит пользователь.
- Additional headers — по желанию добавьте дополнительные заголовки. Например: Reply-To: [your-email] — тогда письмо будет отправляться вам и дублироваться отправителю.
- Тело письма — то, как будет выглядеть отправленное письмо, которое придёт на ваш почтовый ящик. Прикреплённые файлы — если в шаблоне формы вы добавили кнопку для прикрепления файлов, добавьте здесь почтовые теги типа [file] , чтобы получить эти файлы.
Шаг 5. Настройте уведомления при отправке формы
На вкладке «Уведомления при отправке формы» вы можете настроить уведомления, которые видит посетитель в различных ситуациях.
Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение. Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».
В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.
Сохраните отредактированную форму.
Готово, вы настроили и сохранили форму.
Шаг 6. Добавьте форму на сайт
Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:
Добавьте шорткод на страницу сайта или запись в редакторе:
Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:
Готово, вы добавили контактную форму WordPress Contact Form 7 на сайт. Теперь посетители сайта смогут воспользоваться ей, а данные со всех заполненных форм придут на ваш email.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь ��
Как настроить цель в Метрике для события отправки формы Contact Form 7
Актуальная пошаговая инструкция как настроить цели для события отправки формы плагина Contact Form 7 на WordPress.
Привет, друзья. Попросил один из читателей разъяснить этот момент. Дело в том, что он настроил цель на нажатие кнопки, но это не эффективный способ, ведь будет много ложных срабатываний из-за того, что форма не всегда проходит валидацию. В результате достижение цели фиксируется, пользователь действительно кликнул на кнопку, но так как форма не отправлена, то этот отчет получается слишком грязным и не информативным. Поэтому предлагаю способ, как фиксировать цель только после отправки, а не при нажатии кнопки.
Доступные для отслеживания события Contact Form 7
- wpcf7mailsent — самое важное событие, ради которого и затевалась эта статья. Срабатывает, когда письмо успешно отправлено.
- wpcf7invalid — срабатывает, когда форма не прошла валидацию.
- wpcf7spam — срабатывает, когда письмо не отправлено по причини того, что вызвало подозрение в распространении спама.
- wpcf7mailfailed — срабатывает, если сервер не смог отправить письмо. Такое часто случается на хостингах в пробном периоде или с подключённым тестовым (техническим) доменом, так как отключена функция отправки писем для борьбы со спамом.
- wpcf7submit — срабатывает при нажатии кнопке «отправить». Результат не важен.
- wpcf7beforesubmit — срабатывает перед отправкой и дает возможность провести какие-то действия с отправляемыми данными.
Давайте на примере заветного wpcf7mailsent разберемся как работать с этими событиями, а заодно настроим цель.
Настройка и отправка цели в Яндекс.Метрику
Первым делом давайте настроим саму цель в метрике. Надеюсь, у вас уже подключен счетчик и объяснять как его подключить к сайту — не нужно. Если нужно, напишите в комментариях я сделаю отдельную статью. Итак, отталкиваемся от того, чту у вас есть доступ в метрику. Зайдите в свой аккаунт, перейдите в раздел «цели» и нажмите кнопку «Добавить цель».
Далее нужно придумать название цели, выбрать цель «JavaScript-событие«, придумать идентификатор цели, скопировать кода и нажать кнопку «Добавить цель». Скопированный код сохраните в где-нибудь. Скоро он нам пригодится.
Итак, цель создана. Теперь давайте привяжем ее срабатывание на отправку формы нашего сайта.
Работать будем в файле js, который подключен к проекту. Если такого нет, то нужно либо создать и подключить, либо разместить код в файле footer.php.
Напоминаю, что если располагаете код в footer.php, то размещать его нужно между тегами перед закрывающим тегом body. Я же буду размещать код в js-файле.
Для начала давайте рассмотрим ситуацию, когда у вас есть формы и вы просто хотите отслеживать их отправку. Например, если у вас всего одна форма или все одинаковые.
document.addEventListener( 'wpcf7mailsent', function( event ) < ym(XXXXXX, 'reachGoal', 'YYYYYY'); >, false );
- XXXXXX — это код счетчика Яндекс.Метрики.
- YYYYYY — идинтификатор цели созданный ранее.
В моем случае получается так:
document.addEventListener( 'wpcf7mailsent', function( event ) < ym(27804351, 'reachGoal', 'ZAKAZ'); >, false );
ym(27804351, ‘reachGoal’, ‘ZAKAZ’); — это как раз тот код, который мы копировали при создании цели на 3 шаге.
Теперь давайте разберем случай, когда у вас несколько форм. Например, у меня это форма обратного звонка и форма заказа тура. Для заказа тура мы уже создали цель, а для отслеживания обратного звонка, по аналогии, создадим новую.
Теперь нам необходимо вызывать нужную цель только при отправке конкретной формы. Добиться этого можно, узнав её id. Посмотреть его можно через инспектор кода или в админке WordPress. В меню перейдите в раздел «Contact form 7», там буду формы с шоткодами, в которых есть id конкретной формы:
Разработчики позаботились о том, чтобы ответ формы был максимально информативен и если вывести event в консоль, то можно «вытащить» много полезной информации (в том числе и id формы на котором сработало событие wpcf7mailsent или любое другое).
Получается у нас есть возможность отследить у какой конкретно формы сработало событие отправки формы и инициировать конкретную цель. Давайте сёдлам это.
document.addEventListener( 'wpcf7mailsent', function( event ) < if(event.detail.contactFormId=="126")< ym(27804351, 'reachGoal', 'ZVONOK'); >if(event.detail.contactFormId=="135") < ym(27804351, 'reachGoal', 'ZAKAZ'); >>, false );
Если размещаете код в footer.php перед закрывающим тегом «