Contact form 7 как сделать красивую форму

Добавил пользователь Дмитрий К.
Обновлено: 10.09.2024

Плагин-конструктор обратных форм связи для WordPress "Contact Form 7" в особой рекламе не нуждается. Валидный, мультиязычный, простой в настройках, постоянно обновляемый в каталоге плагинов WP. Эти и другие качества сделали его любимчиком среди владельцев сайтов на WordPress, по состоянию на начало 2016 года плагин скачали и установили более 35 миллионов человек! На сегодняшний день Contact Form 7 является заслуженно продвинутым плагином контактных форм!

Разумеется, спасает ситуацию бесчисленное множество дополнений различных сторонних разработчиков в виде отдельных плагинов к CF7 (см.ниже). Но если есть возможность обойтись без плагина - всегда ее используйте!

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

Валидация телефонного номера в Contact Form 7

Шаг 1. В конструкторе контактных форм Contact Form 7 создаем текстовое поле

Шаг 2. Скачиваем js скрипт тут jquery.maskedinput.min.js (подключаем в шаблон своего сайта как обычный js файл). Например:

Шаг 3. В файле functions.php своей темы добавляем следующий код:

Передача Get-запросов в форму Contact Form 7

Иногда на сайтах возникает такая необходимость, как передать в контактную форму связи какое-либо динамичное поле. Ну, например: есть сайт стоматологической клиники с огромным перечнем врачей и наша задача - создать форму обратной связи с возможностью записаться на прием к каждому врачу. Естественно, создавать для каждого врача свою форму связи мы не будем. Под фотографией каждого врача будет стоять кнопка "Записаться на прием к врачу" которая ведет на страницу с контактной формой Contact Form 7. В эту форму мы и будем передавать данные Get-запросом (фамилия врача будет передаваться в ссылке и добавляться в форму обратной связи Contact Form 7).

Как передать данные в форму Contact Form 7 Get-запросом? Шагов всего три:

Шаг 1. В конструкторе контактных форм Contact Form 7 создаем поле:

Шаг 2. В functions.php своей темы добавляем следующий код:

Шаг 3. Чтобы передать данные в форму которая находится по адресу /contact.htm, мы должны сформировать ссылку таким образом:

Отправка SMS из Contact Form 7

Шаг 2. Для того чтобы подготовить SMS, нам надо перехватить передаваемые данные из Contact Form 7. Сделать это можно в файле functions.php Вашей темы:

Вызов Contact Form 7 лишь на отдельной странице

Как правило, формы обратной связи для посетителей размещаются на отдельно взятой странице сайта, типа "О нас", "Контакты", "Обратная связь" и т.д. Но если мы откроем исходный код нашего сайта на любой странице, то заметим там вызов файлов плагина Contact Form 7, например:

Получается, что файлы плагина грузятся в браузер пользователя даже тогда, когда вообще не нужны! Как вызвать Contact Form 7 лишь на отдельной (целевой) странице сайта? Нас выручит код, который размещаем в functions.php текущей темы:

Код разрешит активацию плагина Contact Form 7 только на странице наш_сайт.ру/contact

Переадресация после отправки формы Contact Form 7

Вывод Contact Form 7 в шаблоне сайта

Контактную форму CF7 можно вставить в любую запись или страницу сайта используя шорткод из раздела "Код вставки". Он выглядит примерно следующим образом:

А если нужно контактную форму CF7 вставить в нижнюю сайта, непосредственно в файл footer.php вашей текущей темы WordPress? В таком случае, код придется немного модифицировать:

Дополнительный функционал для CF7

Некоторые задачи с CF7 невозможно решить путем встраивания несложного кода в functions.php, поэтому можно обратиться за помощью к сторонним плагинам, которые расширяют и дополняют функционал CF7. Их можно найти на любой вкус и цвет, для самых разнообразных задач (можно искать в каталоге плагинов WordPress по ключу CF7). Возможно, Вам пригодятся:

Contact Form 7 reCAPTCHA Extension - плагин добавляет в Contact Form 7 каптчу
Contact Form 7 Select Box Editor Button - плагин добавляет выпадающее меню с возможностью выбирать адресата
Contact Form DB - плагин записывает отправленные контактные формы в базу данных сайта, ведет статистику
Contact Form 7 Integrations - плагин интегрирует контактные формы сайта с сторонними сервисами, например Google Docs
Contact Form 7 Dynamic Text Extension - специфический плагин, добавляющий новый тип поля — динамичное содержание (есть скрытое и открытое поле)
Contact Form 7 Tiny MCE - плагин добавляет визуальный редактор в контактную форму
Contact Form 7 Skins - плагин для оформления внешнего вида контактных форм CF7.

На этом все! Кому помог, благодарственные комментарии приветствуются!

Вячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали.

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой.

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

В сентябре 2013 года я рассматривал процесс создания формы обратной связи на WordPress с помощью плагина Contact Form. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.

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

Описание плагина

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

Установка плагина Contact Form 7

Настройка Contact Form 7

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:

Добавление новой формы обратной связи

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

Но вы можете выбрать из списка любой доступный язык:

Изменяем название формы

После этого появится текстовое поле, в котором введём название с описанием:

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

Изменяем шаблон формы

Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:

Как добавить новое поле в форму

При нажатии вывалится огромный список возможных дополнительных полей:

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

Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые :-)

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

Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан :-)

Все текстовые поля в нашем конструкторе формы имеют дополнительные поля с размером самого поля и максимальной длиной значения, вот они:

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

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

Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:

Например, я хочу разместить поле с адресом сайта после имени клиента. Мне необходимо будет ввести код по аналогии с другими полями, то есть добавить абзац, перенос строки и вставить шорткод этого нового поля:

Ну и для того, чтобы значение этого поля пришло нам на электронный адрес, вот это значение нужно скопировать:

По аналогии добавляются и другие поля. Всё просто и понятно :-)

Адресат и шаблон письма

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:

Известные проблемы

Не увидели? А я покажу поближе:

Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:

Заключение

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

Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях :-)

Отключаем стандартные contact form 7 стили

Для этого, в файле functions.php добавляем следующий код:

Отключение скриптов

Возвращаемся в functions.php файл и добавляем следующий код:

wp_enqueue_script ( 'contact-form-7' , get_theme_file_uri ( 'NEW_PATH' ) , array ( 'jquery' ) , WPCF7_VERSION , $in_footer ) ;

В коде выше, мы перезаписываем нативный скрипт contact form плагина на наш и подключаем его через функцию wp_enqueue_script . Кстати, если вы начинающий (или нет) разработчик и хотите узнать больше о встроенных функция в WordPress, то возможно вам будет интересна данная статья.

NEW_PATH — путь до нового js файла в теме, который нужно скопировать из wp-content/plugins/contact-form-7/includes/js/scripts.js

Зачем подключать новый скрипт?

Меняем внешний вид

Обычно сайту нужна форма обратной связи для взаимодействия с владельцем сайтов. Одним из наших фаворитов является Contact Form 7. Давайте посмотрим, что она может делать!

Contact Form 7 – бесплатный, простой и гибкий (в WordPress это обычно значит, что есть простая установка для тех, кому нравится простота, и много глубины и сложности для тех, кто любит углубиться) плагин формы обратной связи. По мнению многих, Contact Form 7 — один из лучших плагинов формы контакта для нашей любимой системы управления контентом. Этот плагин был загружен более 1 млн раз.

Вы можете посмотреть подробный обзор этого плагина в нашем видео уроке:

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

Если вы не знаете, что такое плагины и как их устанавливать, посмотрите этот урок. После установки и активации, вы увидите отдельный пункт меню "Contact" в интерфейса администратора.

Код формы

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

Вставка кода формы

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

Базовый синтаксис

Синтаксис тегов включает поля тип, имя и значения. Звездочкой отмечаются обязательные элементы.

Типы тегов

Вот список всех тегов, которые вы можете использовать в ваших формах:

Текстовые поля (text, text*, email, email*, textarea и textarea*).
Чекбоксы, радиобаттоны и меню (checkbox, checkbox*, radio, select и select*).
Загрузка и прикрепление файлов (file и file*).
Капча (captchac и captchar).
Контрольный вопрос (quiz).
Чекбокс согласия (acceptance).
Кнопка отправки (submit).

Создание двух-колоночной формы

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

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

Расширенный синтаксис

Синтаксис тегов может быть шире. Параметр options обозначает поведение и вид. Объявление параметров не обязательно, но вот как вы можете это сделать. Обратите внимание, что в этом примере мы используем свойства id и class . Вы можете использовать CSS и JavaScript, чтобы расширить вашу форму.

Установка шаблона письма

В Contact Form 7 вы можете очень просто редактировать шаблоны писем. Текст, HTML код и данные из формы могут комбинироваться соответствующим образом. Обратите внимание, что данные из формы — в скобках. Ниже приведен пример для тела письма.

Вот список того, что вы еще можете установить через панель администратора:

основные поля заголовка (адресат, отправитель и тема);
тело письма;
дополнительные заголовки;
прикрепленные файлы;
режим HTML.

Добавление капчи

Для использования капчи в ваших формах вам нужно использовать теги формы captchac и captchar .

Сaptchac возвращает вопрос капчи и представляет элемент img / > для изображения капчи.
Captchar возвращает ответ на капчу и представляет элемент input type="text" / > для поля ввода ответа.

Тег captchac должен всегда объединяться с тегом captchar одинаковым именем. Например, вот так:

Ошибки отправки

Failed to send your message. Please try later or contact administrator by other way.

Если сервер не позволяет отправлять почту через sendmail (), вы можете использовать плагин для отправки почты через SMTP. Оба варианта совместимы с WordPress 3.3. Вот плагины, которые могут решить ваши проблемы:

Скачайте и установите выбранный плагин в WordPress. Укажите настройки для вашего SMTP сервера на странице настроек.

Даже лучше, мы можем использовать HTML код в блоках ввода! Попробуйте этот:

Поддержка языков

Contact Form 7 по умолчанию показывает формы на английском, но включает больше 40 языков для перевода, и вы можете создать форму на любом языке. Чтобы использовать интерфейс администратора на своем языке, установите константу WPLANG в вашем файл wp-config.php .

Использование введенных данных на сервере без отправки почты

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

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

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

Динамическое заполнение полей

По умолчанию значения в Contact Form 7 статические. Например, у вас есть параметр GET, который вы хотите использовать для заполнения формы. Тогда решением для вас является Contact Form 7 Dynamic Text Extension . Этот плагин поддерживает новый тип тега, который разрешает динамическую генерацию контента. После установки и активации плагина, у Contact Form 7 будет два новых типа: Dynamic Text Field и Dynamic Hidden Field.

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

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. Если у вас нет много времени и желания создавать новую контактную форму, и вы хотите получить результат быстро, вы можете воспользоваться формой по умолчанию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины для улучшения функциональности 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.

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

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

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

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

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

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

Читайте также: