Contact form 7- как установить, настроить и использовать

Автор: | 22.11.2020

Contact form 7 — это, без сомнения, один из самых популярных плагинов для создания и управления формами в WordPress. Он помог более чем 5 миллионам владельцев сайтов WordPress оставаться на связи со своими посетителями.

Одной из особенностей, которая выделяет Contact form 7 среди всех других подобных плагинов для WordPress, является его замечательная простота. С его помощью вы можете легко настроить поля формы, настроить шаблоны форм и сделать многое другое.

В этой статье мы покажем вам, как настроить контактные формы в WordPress с помощью плагина Contact Form 7.

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

Шаги, чтобы установить Contact form 7 на WordPress

Шаг 1: Установка и активация

Во — первых, установите плагин. Для этого перейдите в раздел Плагины >> Добавить новый.

Contact form 7

Затем выполните поиск Contact form 7 с помощью функции поиска. Когда вы найдете плагин, установите его, нажав кнопку Установить.

Contact form 7

После установки сразу же активируйте плагин, нажав кнопку Активировать, которая появится после завершения установки.

Теперь готовы перейти к следующему шагу-созданию и настройке своей формы.

Шаг 2: Создание первой формы

Чтобы создать свою самую первую форму, на панели управления WordPress перейдите в раздел Contact >> Contact forms.

Contact form 7

Существует контактная форма по умолчанию, которая называется Contact form 1. Если у вас нет много времени и желания создавать новую контактную форму, и вы хотите получить результат быстро, вы можете воспользоваться формой по умолчанию.

Это работает, только это может выглядеть не так, как вы хотите.

Contact form 7

Чтобы использовать форму, просто скопируйте сгенерированный шорткод и вставьте его на нужную страницу/запись.

Читайте также: Шорткоды WooCommerce на примерах

Но чтобы создать свою собственную пользовательскую форму, перейдите в раздел Contact >> add new (добавить новую).

Contact form 7

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

Чтобы создать форму, начните с ввода названия формы в поле Name (Название).

Если вкладка Form еще не активна, нажмите на нее. Именно здесь вы найдете все поля для contact form 7. Это поля, которые вам понадобятся для создания функциональной формы.

Contact form 7

Вставка тегов

По умолчанию Contact Form 7 будет содержать основные обязательные поля, уже вставленные в вашу форму. Они включают в себя текстовое поле Имя, поле электронной почты, поле окна сообщения и кнопку отправки.

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

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

Contact form 7

При этом откроется всплывающее окно, в котором вы можете настроить свое поле.

Contact form 7

Если вы хотите сделать новое добавление обязательным полем, установите флажок Required.

В поле Name (имя) задайте имя для вновь созданного поля формы. Это имя будет использоваться для идентификации поля.

В поле default value (значение по умолчанию) можно задать значение, которое должно быть в поле формы. Это значение отображается в поле по умолчанию, но пользователь может очистить его и записать новое значение.

Если вы являетесь продвинутым пользователем и хотите добавить стиль в поле с помощью CSS-кодов, задайте атрибут ID или атрибут Class. Это может быть что угодно. Затем сделайте ссылку на поле в вашей таблице стилей, используя атрибут ID или Class.

После этого нажмите кнопку Insert tag (Вставить тег).

Contact form 7

Далее, как и другие поля, мы обернем вокруг этого поля label.

Contact form 7

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

Вы также можете изменить сообщение с призывом к действию в кнопке Отправить. Например, вы можете изменить его с “отправить” на “связаться с нами”.

Шаг 3: Настройка Формы

Теперь, когда вы создали форму, следующий шаг-заставить ее функционировать. Для начала перейдите на вкладку Mail (Почта). Здесь вы устанавливаете, как и куда отправляются сообщения из вашей контактной формы.

Contact form 7

В поле To (Кому) введите адрес электронной почты, на который будут отправляться все сообщения, поступающие из формы.

Поле From (От) — это место, где вы получаете подробную информацию о человеке, который отправляет сообщение с Вашего сайта WordPress, через вашу контактную форму. Например, чтобы поместить в это поле адрес электронной почты отправителя, введите [your-email]. Имейте в виду, что этот код будет работать только в том случае, если он является тем, что вы использовали для тега электронной почты на вкладке  Form (форма).

Чтобы получить тему письма, вставьте тег subject – “[your-subject]” – в поле Subject.

Вы можете оставить дополнительные заголовки и разделы тела сообщения такими, какие они есть. Или вы можете добавить текст и другие теги по мере необходимости.

Далее идет раздел Message (сообщения).

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

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

Contact form 7

Значения по умолчанию будут достаточными. Но вы всегда можете изменить их на то, что вы хотите.

Когда ваша форма построена и настроена, пришло время перейти к следующему шагу.

Шаг 4: Вставить форму

Чтобы получить доступ к только что созданной форме, перейдите в раздел Contact >> Contact Forms. Затем скопируйте сгенерированный шорткод для вашей контактной формы.

Contact form 7

Теперь найдите страницу, на которой должна появиться форма, и откройте ее для редактирования.  Затем вставьте шорткод туда, где должна появиться форма.

Contact form 7 шорткод

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

Contact form 7

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

Плагины для улучшения функциональности Contact form 7

Contact form 7 может сделать гораздо больше, чем просто собирать сообщения и сведения об отправителе. Однако для этого вам нужно будет установить несколько плагинов.

Ниже приведены некоторые из них.

Really Simple CAPTCHA

Really Simple CAPTCHA

CAPTCHA — это инновационное решение, разработанное для того, чтобы держать спамеров и спам-ботов в узде. Без них ваш почтовый ящик был бы переполнен тонной спама.

Разработанный тем же автором, что и Contact form 7, этот плагин очень прост в использовании, отсюда и его название.

Invisible reCAPTCHA for WordPress

Invisible reCAPTCHA for WordPress

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

Чтобы использовать этот плагин, вам сначала нужно добавить свой сайт в свой аккаунт Google reCAPTCHA.

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

Material Design for CF7

Material Design for CF7

Дизайн формы является важным фактором, который следует учитывать при создании контактных форм. Это связано с тем, что хорошо разработанная форма будет иметь лучший пользовательский опыт, а следовательно, и лучшее взаимодействие (особенно если вы хотите собрать информацию о клиентах).

Именно здесь в игру вступают такие конструкторы форм, как Material Design for CF7. Поэтому начните с установки и активации плагина, после чего вы сможете приступить к созданию и стилизации своей формы.

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

Самое приятное, что он бесплатный и работает со всеми темами WordPress.

Другие важные опции CF7

В этом разделе мы рассмотрим несколько общих инструкций и настроек, которые вы часто используете в Contact Form 7.

Как изменить адрес электронной почты в WordPress

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

Для начала откройте форму, которую вы хотите отредактировать, перейдя в раздел Contact >> Contact forms. Наведите курсор мыши на целевую форму и нажмите кнопку Изменить.

Contact form 7

Затем перейдите на вкладку Mail (почта) и в поле To (Кому) введите новый адрес электронной почты, который вы хотите использовать.

Contact form 7

Сохраните изменения, и все готово.

Как связать Contact Form 7 с MailChimp

Mailchimp — это популярный маркетинговый инструмент, который может быть интегрирован с Contact Form 7. Если у вас есть учетная запись Mailchimp и вы хотите интегрировать ее с CF7, сначала установите и активируйте плагин Contact Form 7 Mailchimp.

Contact Form 7 Mailchimp.

После установки и активации плагина перейдите в свою учетную запись Mailchimp и скопируйте ключ API.

Затем вернитесь в админ-зону WordPress. Перейдите в Contact >> Contact forms и выберите форму. Нажмите на вкладку ChimpMatic Lite и вставьте свой ключ API.

Contact Form 7 Mailchimp.

Наконец, нажмите на синюю кнопку подключения, и все готово.

Вывод

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

Contact form 7 — это плагин, на который вы можете рассчитывать. Это не только эффективно, но и бесплатно.

Но если вы скептически относитесь к использованию формы CF7, есть и другие альтернативы, которые вы можете попробовать. Примерами являются WP forms, Gravity forms, Ninja forms, и Formidable Forms.

Конфликты плагинов WordPress
Конфликты плагинов WordPress

Конфликт плагинов WordPress может вывести из строя весь ваш сайт Read more

Плагины Для Создания Форума на WordPress
Плагины Для Создания Форума на WordPress

Поддерживать интерес и активность читателей на вашем сайте - довольно Read more

Lazy load — отложенная (ленивая) загрузка изображений и видео на wordpress
отложенная (ленивая) загрузка

Вы хотите улучшить скорость загрузки страницы вашего сайта WordPress? Увеличение Read more

Лучшие Плагины WordPress AMP
Лучшие Плагины WordPress AMP

Посетители вашего сайта получают доступ к его содержимому не только Read more

4 Самых Эффективных Плагина Для Удаления Вредоносных Программ WordPress
4 Самых Эффективных Плагина Для Удаления Вредоносных Программ WordPress

Ваш WordPress взломан или заражен вредоносными программами? Если да, то Read more

Плагин Carbon fields. Часть 4.2 –Типы полей. Complex.
Плагин Carbon fields. Часть 4.2 –Типы полей. Complex.

Сложные поля в Carbon fields, действуют как контейнеры, в которые Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

девять + 20 =