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 с помощью функции поиска. Когда вы найдете плагин, установите его, нажав кнопку Установить.
После установки сразу же активируйте плагин, нажав кнопку Активировать, которая появится после завершения установки.
Теперь готовы перейти к следующему шагу-созданию и настройке своей формы.
Шаг 2: Создание первой формы
Чтобы создать свою самую первую форму, на панели управления WordPress перейдите в раздел Contact >> Contact forms.
Существует контактная форма по умолчанию, которая называется Contact form 1. Если у вас нет много времени и желания создавать новую контактную форму, и вы хотите получить результат быстро, вы можете воспользоваться формой по умолчанию.
Это работает, только это может выглядеть не так, как вы хотите.
Чтобы использовать форму, просто скопируйте сгенерированный шорткод и вставьте его на нужную страницу/запись.
Читайте также: Шорткоды WooCommerce на примерах
Но чтобы создать свою собственную пользовательскую форму, перейдите в раздел Contact >> add new (добавить новую).
Здесь можно создавать формы, синхронизировать почту, форматировать текст сообщения и настраивать формы в разделе Дополнительные параметры.
Чтобы создать форму, начните с ввода названия формы в поле Name (Название).
Если вкладка Form еще не активна, нажмите на нее. Именно здесь вы найдете все поля для contact form 7. Это поля, которые вам понадобятся для создания функциональной формы.
Вставка тегов
По умолчанию Contact Form 7 будет содержать основные обязательные поля, уже вставленные в вашу форму. Они включают в себя текстовое поле Имя, поле электронной почты, поле окна сообщения и кнопку отправки.
Но допустим, что этих полей по умолчанию недостаточно, и вы хотели бы добавить к ним еще больше. Например, вы можете получить телефонные номера тех, кто хочет связаться с вами.
Чтобы добавить поле телефонного номера, поместите курсор туда, где оно должно появиться, и нажмите кнопку tel.
При этом откроется всплывающее окно, в котором вы можете настроить свое поле.
Если вы хотите сделать новое добавление обязательным полем, установите флажок Required.
В поле Name (имя) задайте имя для вновь созданного поля формы. Это имя будет использоваться для идентификации поля.
В поле default value (значение по умолчанию) можно задать значение, которое должно быть в поле формы. Это значение отображается в поле по умолчанию, но пользователь может очистить его и записать новое значение.
Если вы являетесь продвинутым пользователем и хотите добавить стиль в поле с помощью CSS-кодов, задайте атрибут ID или атрибут Class. Это может быть что угодно. Затем сделайте ссылку на поле в вашей таблице стилей, используя атрибут ID или Class.
После этого нажмите кнопку Insert tag (Вставить тег).
Далее, как и другие поля, мы обернем вокруг этого поля label.
Чтобы добавить другие пользовательские поля, такие как выпадающее меню, дата, радио и т. д., просто выполните те же действия.
Вы также можете изменить сообщение с призывом к действию в кнопке Отправить. Например, вы можете изменить его с “отправить” на “связаться с нами”.
Шаг 3: Настройка Формы
Теперь, когда вы создали форму, следующий шаг-заставить ее функционировать. Для начала перейдите на вкладку Mail (Почта). Здесь вы устанавливаете, как и куда отправляются сообщения из вашей контактной формы.
В поле To (Кому) введите адрес электронной почты, на который будут отправляться все сообщения, поступающие из формы.
Поле From (От) — это место, где вы получаете подробную информацию о человеке, который отправляет сообщение с Вашего сайта WordPress, через вашу контактную форму. Например, чтобы поместить в это поле адрес электронной почты отправителя, введите [your-email]. Имейте в виду, что этот код будет работать только в том случае, если он является тем, что вы использовали для тега электронной почты на вкладке Form (форма).
Чтобы получить тему письма, вставьте тег subject – “[your-subject]” – в поле Subject.
Вы можете оставить дополнительные заголовки и разделы тела сообщения такими, какие они есть. Или вы можете добавить текст и другие теги по мере необходимости.
Далее идет раздел Message (сообщения).
Для лучшего взаимодействия с пользователем вам нужно, чтобы ваша форма отображала сообщение, когда пользователь завершает действие. Например, вы можете поблагодарить их, когда они успешно отправят форму.
Кроме того, вы можете также захотеть, чтобы сообщения об ошибках появлялись, когда они совершают ошибки. Именно в разделе сообщений вы можете установить все это.
Значения по умолчанию будут достаточными. Но вы всегда можете изменить их на то, что вы хотите.
Когда ваша форма построена и настроена, пришло время перейти к следующему шагу.
Шаг 4: Вставить форму
Чтобы получить доступ к только что созданной форме, перейдите в раздел Contact >> Contact Forms. Затем скопируйте сгенерированный шорткод для вашей контактной формы.
Теперь найдите страницу, на которой должна появиться форма, и откройте ее для редактирования. Затем вставьте шорткод туда, где должна появиться форма.
Чтобы посмотреть, как будет отображаться форма, нажмите кнопку предварительный просмотр изменений.
Если все выглядит нормально, продолжайте и нажмите кнопку Обновить, чтобы опубликовать свою контактную форму. Кроме того, не забудьте выполнить тесты на форме, чтобы убедиться, что она работает и отправляет оповещения по электронной почте по мере необходимости.
Плагины для улучшения функциональности Contact form 7
Contact form 7 может сделать гораздо больше, чем просто собирать сообщения и сведения об отправителе. Однако для этого вам нужно будет установить несколько плагинов.
Ниже приведены некоторые из них.
Really Simple CAPTCHA
CAPTCHA — это инновационное решение, разработанное для того, чтобы держать спамеров и спам-ботов в узде. Без них ваш почтовый ящик был бы переполнен тонной спама.
Разработанный тем же автором, что и Contact form 7, этот плагин очень прост в использовании, отсюда и его название.
Invisible reCAPTCHA for WordPress
Невидимая рекапча обеспечивает дополнительный уровень защиты от спам-сообщений. Этот плагин требует дополнительной работы по настройке, но также обеспечивает лучшую защиту от спама.
Чтобы использовать этот плагин, вам сначала нужно добавить свой сайт в свой аккаунт Google reCAPTCHA.
После регистрации вашего сайта для вас будет сгенерирован ключ. Все, что вам нужно сделать, это скопировать сгенерированные ключи и вставить их в настройки плагина.
Material Design for CF7
Дизайн формы является важным фактором, который следует учитывать при создании контактных форм. Это связано с тем, что хорошо разработанная форма будет иметь лучший пользовательский опыт, а следовательно, и лучшее взаимодействие (особенно если вы хотите собрать информацию о клиентах).
Именно здесь в игру вступают такие конструкторы форм, как Material Design for CF7. Поэтому начните с установки и активации плагина, после чего вы сможете приступить к созданию и стилизации своей формы.
Вы можете использовать его для стилизации полей ввода, переключателей, выпадающих меню и многого другого.
Самое приятное, что он бесплатный и работает со всеми темами WordPress.
Другие важные опции CF7
В этом разделе мы рассмотрим несколько общих инструкций и настроек, которые вы часто используете в Contact Form 7.
Как изменить адрес электронной почты в WordPress
Возможно, вы ввели неправильный адрес электронной почты во время первоначального процесса создания формы и поэтому хотели бы его изменить.
Для начала откройте форму, которую вы хотите отредактировать, перейдя в раздел Contact >> Contact forms. Наведите курсор мыши на целевую форму и нажмите кнопку Изменить.
Затем перейдите на вкладку Mail (почта) и в поле To (Кому) введите новый адрес электронной почты, который вы хотите использовать.
Сохраните изменения, и все готово.
Как связать Contact Form 7 с MailChimp
Mailchimp — это популярный маркетинговый инструмент, который может быть интегрирован с Contact Form 7. Если у вас есть учетная запись Mailchimp и вы хотите интегрировать ее с CF7, сначала установите и активируйте плагин Contact Form 7 Mailchimp.
После установки и активации плагина перейдите в свою учетную запись Mailchimp и скопируйте ключ API.
Затем вернитесь в админ-зону WordPress. Перейдите в Contact >> Contact forms и выберите форму. Нажмите на вкладку ChimpMatic Lite и вставьте свой ключ API.
Наконец, нажмите на синюю кнопку подключения, и все готово.
Вывод
Как владелец сайта, вы должны уметь прислушиваться к просьбам своих клиентов и посетителей. Самый простой способ добиться этого — создать контактные формы на вашем сайте.
Contact form 7 — это плагин, на который вы можете рассчитывать. Это не только эффективно, но и бесплатно.
Но если вы скептически относитесь к использованию формы CF7, есть и другие альтернативы, которые вы можете попробовать. Примерами являются WP forms, Gravity forms, Ninja forms, и Formidable Forms.