Contact form 7 как добавить телефон
Один из самых популярных плагинов для создания контактных форм на сайте. Плагин позволяет создавать формы любых видов; очень гибок и удобен в настройке; развивается уже много лет и содержит много наработок.
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.Компания Boosta.
- Создание и показ контактных форм
- Создание форм в админке
- Лицевая часть сайта
- Настройка формы (создание сложных форм)
- Шаблон формы
- Вёрстка формы
- Синтаксис шорткодов
- Типы полей
- Шаблон письма
- Уведомления при отправке формы
- Дополнительные настройки
Создание и показ контактных форм
Создание форм в админке
После установки плагина появится пункт меню "Contact Form 7", через который можно создавать и удалять формы.
Форма на картинке создана при активации плагина автоматически.
Используем форму по умолчанию, для этого создадим страницу "Связаться со мной" и вставим туда шорткод формы.
Формы создаются как произвольный тип записи - wpcf7_contact_form . Т.е. страница редактирования формы - это тип записи.
Лицевая часть сайта
А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):
На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).
Настройка формы (создание сложных форм)
Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.
В верхнем поле - название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.
Под заголовком - шорткод. Его используем в записях, для вывода формы.
И ниже - четыре вкладки:
- Шаблон формы
- Письмо
- Уведомления при отправке формы
- Дополнительные настройки
Рассмотрим каждую вкладку отдельно.
Шаблон формы
В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.
Вёрстка формы
Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:
А при отображении в записи она превратится в такой HTML:
Синтаксис шорткодов
Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем "Вставить тег".
Тег [text* your-name] в последствии будет преобразован в текстовое поле с html кодом:
Шорткоды можно удобно создавать через конструктор шорткодов.
Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:
С конструктором вы и сами разберетесь.
А тут мы разберем синтаксис шорткода.
Для примера рассмотрим тег текстового поля с дополнительными опциями:
text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. Может быть только один. class:my-class Атрибут class в input со значением my-class. Используется для оформления. Если нужно указать несколько классов, то атрибут надо указывать несколько раз, например class:my-class-1 class:my-class-2 . placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.
Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.
Типы полей
Полный список полей смотрите в отдельной статье.
Шаблон письма
Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы - это дает возможность передавать в письме указанные в форме данные.
Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: [text fio] . Теперь в шаблоне письма можно использовать тег [fio] . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).
Заголовки письма:
Кому - электронный ящик, куда будет отправлено письмо. Можно указать сколько угодно ящиков через запятую.
Можно указать любую почту, но если домен почты будет отличаться от домена сайта - форма не пройдет проверку и будет «ругаться» на этот параметр, хотя письма всё равно будут отправляться.
Тема - Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.
Тело письма
Это следующая важная часть данной вкладки. Тут указывается сам текст письма. В тексте используем всё те же теги формы (имена полей из шаблона формы).
Разберем дефолтное письмо:
У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:
Существуют ещё специальные теги для шаблона письма, позволяющие сделать ваше письмо более содержательным.
Не обязательные поля в теле письма
Опция "Использовать HTML-формат письма". Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.
Уведомления при отправке формы
Теги шаблона письма не работают в этих полях.
Дополнительные настройки
Эта вкладка предназначена для продвинутых пользователей и даёт возможность с помощью JS кода расширять возможности формы. К примеру, вешать события для аналитики.
1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.
Установка плагина Contact Form 7 из админки WordPress
2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.
Вывод на сайте
После активации в админке откройте раздел Contact Form 7.
Список форм
В списке уже есть готовая форма. Вы можете создать их сколько нужно. Для каждой автоматически создается уникальный шорткод. Чтобы показать форму на сайте, его нужно вставить в редакторе контента или в шаблоне темы. Для примера выведем на отдельной странице.
Создание новой страницы на сайте WordPress
2. Укажите название (например Контакты).
3. Скопируйте шорткод.
Шорткод формы
4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.
Блок Шорткод
В итоге пользователь увидит:
Как создавать формы
Перейдите Contact Form 7 > Добавить новую.
Создание контактной формы
CF предлагает стартовый шаблон, который можно удалить или изменять. Этот простой пример сделан для того, чтобы было легче разобраться. Чтобы вставить новое поле, нажмите кнопку нужного элемента.
В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:
- элементы HTML (позволяют создать произвольную HTML-структуру),
- шорткоды плагина (добавляют элементы формы).
Если вы пока не определились с полями, оставьте как есть. К ним сможете вернуться позже.
Настройка письма
Тут можно использовать имена полей. Например, есть поле [text* telephone] . Если в письме вписать [telephone] , на его месте поставится номер телефона, который ввел пользователь.
В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.
Настройка уведомлений
Настройка уведомлений при отправке формы
Интеграция reCaptcha
В плагин уже встроена система спам-защиты от Google. Установим последнюю версию - v.3. Чтобы ее добавить, следуйте простой инструкции.
Добавление reCAPTCHA на сайте Google
3. Скопируйте ключи.
4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.
Настройки интеграции в плагине
5. Добавьте скопированные ключи, сохраните изменения.
Для Капчи v.2 нужно вставить тег [recaptcha] . В последней версии нет дополнительных полей.
Установка целей метрики
В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.
1. В Метрике зайдите Настройка > Цели > Добавить цель.
Настройка цели в Яндекс-Метрике
2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.
Настройка цели в Яндекс-Метрике
3. Добавьте в файл functions.php активной Ворпресс-темы код
Замените 999 на ID формы, 555 - на Номер цели, а wptest_form - на идентификатор события в Метрике.
ID формы можно посмотреть, если открыть ее на редактирование.
Редактирование формы
Готовые шаблоны
Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.
Плагин Contact Form 7 Style
Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.
Чтобы задать внешний вид форме:
- выберите форму;
- перейдите на вкладку Contact Form 7 Style Template;
- используя стрелки, выберите дизайн.
Решение проблем и исправление ошибок
Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.
Не отправляются письма
Тут может быть несколько проблем:
- электронные письма не отправляются вообще;
- попадают в СПАМ.
- неправильные настройки сайта;
- ограничения на хостинге.
Чтобы заставить работать почту, есть несколько способов.
1. Стандартные настройки
Откройте вкладку Письмо в своей форме и в опции Кому проверьте, правильно ли указан адрес. Он должен быть рабочим.
2. WP Mail SMTP
Если ваш хостинг ставит жесткие ограничения на отправку писем или запрещает их вообще, тогда нужно стороннее решение. Такое бывает, если использовать почтовые ящики, созданные на хостинге.
Рассмотрим универсальный вариант - бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.
Плагин-конструктор обратных форм связи для WordPress "Contact Form 7" в особой рекламе не нуждается. Валидный, мультиязычный, простой в настройках, постоянно обновляемый в каталоге плагинов WP. Эти и другие качества сделали его любимчиком среди владельцев сайтов на WordPress, по состоянию на начало 2016 года плагин скачали и установили более 35 миллионов человек! На сегодняшний день Contact Form 7 является заслуженно продвинутым плагином контактных форм!
Разумеется, спасает ситуацию бесчисленное множество дополнений различных сторонних разработчиков в виде отдельных плагинов к CF7 (см.ниже). Но если есть возможность обойтись без плагина - всегда ее используйте!
Я опишу несколько ситуаций, в которые попадал во время работы с клиентскими сайтами, а также предоставлю решения возникших проблем с Contact Form 7.
Валидация телефонного номера в Contact Form 7
Как сделать в Contact Form 7 поле для ввода телефона? Это не сложно, мы воспользуемся помощью готового JS скрипта «Masked Input Plugin».
Шаг 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.
На этом все! Кому помог, благодарственные комментарии приветствуются!
(42 голоса, рейтинг: 4,74 из 5)
Вячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали.
Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой.
Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро.
Сегодня я расскажу вам, как можно улучшить форму обратной связи с помощью маски ввода телефона. Рассмотрим, как это реализовать на различных проектах.
Первый вариант – мы подключим маску к контактной форме на чистом html.
Сперва посмотрим о чем идет речь:
В это поле можно вводить только цифры, и строго то количество которое задано у вас в маске.
Итак начнем! В обоих случаях нужно скачать файлы плагина jQuery Masked Input по этой ссылке с официального репозитория. Также даю ссылку на документации по плагину на GitHub.
Маска ввода телефона к форме на html + js
1. Создаем простую форму
2. Проверяем подключение библиотеки JQuery
Мне удобно подключать через CDN Google. Чтобы подключить библиотеку JQuery скопируйте код ниже и вставьте между тегами <head> вашего сайта.
3. Подключаем скрипты плагина
Далее нам нужно сделать вызов кода маски и привязать его к уникальному идентификатору. Мы можем сделать это прописав уникальный class или id к полю input. В нашем случае мы пропишем id phon. Далее просто перед формой нужно вставить вот этот код:
Теперь этот файл тоже нужно подключить между тегами <head>, скопируйте код ниже и вставьте его сразу после кода подключения плагина jquery.maskedinput.min.js. Должно получиться так:
4. Определяем в какой форме и в каком поле будет работать плагин.
Всё, что нам нужно сделать, чтобы идентифицировать поле, это указать class или id в нужном поле input. Пример на картинке. На практике используйте что-то одно.
А для активации скрипта в поле по class необходимо заменить код в maskphone.js на следующий:
С этим все, теперь рассмотрим как сделать тоже самое на одной из самых популярных CMS WordPress и дополнительного плагина к ней Contact Form 7.
У вас уже бывали ситуации, когда вам не хватает стандартных полей Contact form 7 и нужно добавить ещё чтобы расширить функционал вашей формы?
Если да, то эта статья именно для вас.
Из этой статьи вы узнаете про про особенности настройки Contact form 7, научитесь добавлять и настраивать разные типы полей, раскрывающиеся списки, а также элементы checkbox и radio button.
Навигация по статье:
Для чего нужны дополнительные поля в Contact form 7?
Устанавливаем плагин Сontact form 7
Устанавливается он как обычно. Переходим в административную часть нашего сайта, заходим в меню «Плагины» => «Добавить новый». Вводим название в строку поиска, нажимаем «Enter» и теперь нажимаем на кнопку «Установить». А затем активируем плагин.
Создаём и настраиваем новую форму Contact form 7
Для создания новых полей и их настройки создадим новую форму.
В боковом меню находим пункт ContactForm7, и здесь выбираем «Добавить новую». Первое, что у вас спросят, это на каком языке вы хотите создать вашу форму. Если вы оставите по умолчанию, то язык будет русский, если вам нужно его изменить – раскрывающемся списке выбираете то, что вам нужно.
Нажимаем кнопку «Добавить новую», и вводим название формы.
Рассмотрим интерфейс настроек Contact form 7. Здесь мы видим четыре вкладки:
Для того, что бы подробнее об этом узнать, вы можете нажить на ссылку «Дополнительные настройки». У вас откроется страница с описанием. Правда она на английском :)
Добавление и настройка текстового поля в Contact Form 7
Если вы хотите добавить ещё одно текстовое поле, то перед тем как это делать обязательно сохраните форму, иначе могут возникнуть ошибки и ваша форма будет работать некорректно!Добавление и настройка поля e-mail в Contact Form 7
Поле e-mail выглядит абсолютно точно так же, как и поле текст, единственное его отличие заключается в том, что на этапе отправки формы, когда проверяется корректность введённых данных, используются другие правила проверки этого поля, т.е. какие угодно данные мы уже не можем сюда вводить, нужно обязательно чтобы данные были на английском языке, с символом «@» и с нормальным адресом почтовой службы
Для его добавления щёлкаем по кнопке «email» на панели генерации полей.
Здесь настройки абсолютно точно такие же, как и для поля «text». Задаете нужные настройки и жмете «Insert tag».
Добавление и настройка полей URL и tel
Следующее два поля «URL» и «tel» выглядят также, как и предыдущие два. Единственное отличие заключается в правилах при проверке этих полей на корректность введенных данных, т.е. такая же история, как с полем e-mail.
URL – служит для ввода адреса сайте
Tel – используется для ввода номера телефона
Добавление и настройка происходит так же как и у предыдущих полей.
Добавление и настройка поля number
Следующее поле – поле «Number» -это поле отличается от остальных тем, что в него вводятся числовые данные, и эти данные пользователь может изменять путем нажатия на специальные стрелочки, вверх и вниз.
Для его вставки нажимаем на кнопку «Number» на панели генерирования полей.
У него уже немножко другие настройки:
Field type –у нас возможны два варианта: spinbox и slider.
Spinbox – представляет собой поле со стрелочками вверх и вниз.
Slider – выглядит как ползунок и почему то работает некорректно. Возможно в следующих версиях плагина это поправят :)
Здесь можно выставить значение по умолчанию, а также минимальное и максимальное значение поля. Такое поля удобно использовать для выбора количества.
Добавление и настройка поля date
Данное поле предназначено для ввода даты в определенном формате.
Генерируется оно, так же как и остальные, но изначально оно представляет собой просто обычное пустое поле, в которое нужно вводить дату в определённом формате, что не очень удобно для посетителя сайта.
Поэтому я предлагаю расширить возможности данного поля доустановив плагин «ContactForm 7 Datepiker».
Устанавливается он аналогично остальным. После его установки Вам нужно открыть вашу форму для редактирования и нажать на кнопку «Сохранить» чтобы обновились настройки для данного поля. После этого вы можете просто вставлять такие поля с датами, не задавая каких то настроек, а ваши посетители нажав на такое поле, увидят перед собой календарь в котором можно мышкой выбрать нужную дату.
Добавление и настройка Drop-down Menu
При помощи данного поля мы можем создавать и настраивать выпадающие списки в Contact form 7. Для его добавления нажимаем на кнопку с его названием.
Для данного поля доступны следующие настойки:
Добавляем и настраиваем checkboxes
Данное поле предназначено для того чтобы пользователь мог отмечать галочками нужные ему значения.
Генерируется аналогично предыдущим.
Из настроек нужно обратить внимание на пункт «Options» в котором нам нужно ввести значения подписей для элементов checkbox при этом
Генерируются они следующим образом. Нажимаем на кнопку «Check Boxes». И дальше в поле «Options» нам нужно привести значение наших чек-боксов, при этом каждое значение должно стоять с новой строки.
Put a label first, a checkbox last – позволяет разместить сначала текст подписи, а потом уже сам checkbox. Если у вас в форме используется выравнивание по правому краю, то можно воспользоваться этой настройкой. В остальных случаях от неё не много пользы.
Wrap each item with label element – позволяет обернуть каждый checkbox в тег . Это нужно в том случае, если вы хотите чтобы ваши checkbox размещались не в строку а в столбик. Правда для этого помимо этой опции нужно ещё прописать некоторый код в файл стилей вашей темы.
А вот и этот код:
Читайте также: