Главная › Новости

Настройка плагина Contact Form 7 для Wordpress.

Опубликовано: 02.09.2018

Настройка Contact form 7. Добавление полей

Привет всем. Как, то у меня через чур много энергии и я решил сегодня написать еще одну статейку, которая будет посвящена одному из плагинов WordPress. Довольно таки интересный и функциональный плагин, со своими обязанностями справляется на все 100% и лучше я пока не нашел, что бы оформить обратную связь.

Не хочу долго Вас томить, я думаю Вы и так уже поняли про, что пойдет речь в статье. И так, сегодня будем разбираться и настраивать плагин Contact Form 7 для WordPress , а именно создавать форму обратной связи.

Долго сидел и думал, какие есть минусы в плагина и в голову так ничего и не пришло, а вот плюсов у данного творения очень много.

Настройка Contact Form 7. Часть-1

Плюсы плагина Contact Form 7.

Понятность и простота настройки. Человек, который первый раз сталкивается с данным плагином без проблем сможет разобраться. Создание большого количества разных форм и интеграция их на сайт. Форма вставляется с помощью шорткода на страницу и в любое место сайта. Это очень удобно. Поддержка русского и других языков. Поддержка Ajax запросов. Защита от спама с помощью текстового вопроса или капчи. Для капчи необходимо дополнительно будет установить плагин Really Simple CAPTCHA. Настройка внешнего вида формы с помощью css стилей. Интеграция с сервисом Akismet, для защиты от спама.

У нас на сайте Вы можете увидеть и поюзать такую форму если нажмете на пункт меню “Связаться с нами”, выпадет окно, где можно увидеть наглядный пример.

Дайте начинать!

Для начала нам необходимо скачать данный плагин. Можно с нашего сервера вот ссылка — > Скачать Contact Form 7   или же с официального сайта вот ссылка — > Скачать с официального сайта .

После, того как скачали необходимо его установить на WordPress . Как устанавливать, я не буду описывать, думаю Вы должны этот процесс знать от А до Я. Скачали, установили, теперь непосредственно переходим в сам плагин , что бы разобраться и настроить его.

Настройка плагина Contact Form 7 и создание формы обратной связи.

Теперь когда вы скачали и установили всё как нужно, переходим в административную панель WordPress и находим пункт Contact Form 7 , кликаем по нему и мы попадаем на страницу добавления новой формы.

Плагин Contact Form для WordPress

Создание формы.

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

Добавить форму

Форма создана, теперь будем ее настраивать, под ваши нужды и для начала даем ей название. В моем случае я назову “ Тест форма ”, вы называйте как хотите и после этого нажимайте «Cохранить». Теперь вы можете увидеть, шорткод который необходимо будет вставлять в код сайта, где будет выводится данная форма.

шорткод формы

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

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

Поле «Сгенерировать тег»

Слева можно увидеть поля которые уже добавлены в форму.

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

Приступает.

Делаем текстовое поле для имени. В выпадающем списке “Сгенерировать тег” выбираем “ Текстовое поле ”. Ставим галочку обязательное поле, даем ему название в моем случае “NAME” и присваиваем id, что бы можно было поле оформить с помощью css стилей. У меня получилось id=”name”. Внизу можно увидеть текст “ Скопируйте этот код и вставьте его в шаблон формы слева ”. Берем этот код и копируем в шаблон формы, как на картинке:

оформление текстового поля

Для почты (e-mail)  аналогично делаем, для телефона выбираем из списка “Сгенерировать тег”, поле “ Номер телефона ” и тоже по аналогии делаем.

Для настройки сообщения выбираем “ Текстовое поле ” и делаем тоже по аналогии со всем выше описанным.

Текстовое поле для сообщения

Теперь добавляем поле « Вопроc «. Для этого в выпадающем списке выбираем пункт “ Вопрос ”, задаем ему название. В поле Вопрос|Ответ, можно задавать разные вопросы и ответы, под полем приведен пример логического вопроса, можно задавать текстовый, например “3 по счету месяц года?| Март” и т.д. Код вставляем как и раньше.

поле «Вопрос»

И последнее что нам необходимо, это кнопка “ Отправить ”, можно оставить ту, которая  в шаблоне или в списке “Сгенерировать тег” выбираем “Кнопка отправки”. Шаблон готов, нажимаем кнопку “ Сохранить ”.

Давайте проверим, что у нас получилось, копируем шорткод и вставляем его на страницу или в любую часть кода куда необходимо. Я вставлю на тестовую страницу.

Вот что у меня получилось:

Форма обратной связи

У Вас должно быть, что-то похожее.

Настройка адресата формы  и сообщений

 

Опускаемся немного ниже шаблона формы и видим настройки адресата.

Поле адресат. Вводим почту с которой будут приходить письма посетителям которые заполнят форму. Поле отправитель. Вместо [your-name] <[your-email]>, подставляем свои шорткоды (названия которые давали полям). Посмотреть их можно выше. В моем случае будет [NAME ] <[your-email]>. Поле тема. Я всегда пишу Форма обратной связи и указываю сайт. Поле шаблон письма. Здесь можно выводить, то что душа пожелает. Для нашего примера делаю поле От: [NAME] <[your-email]> и данные Телефон: [tel-231], Сообщение [your-message]. В конце пишем: “Это сообщение отправлено с сайта LoleknBolek.com ( http://loleknbolek.com )”. Остальные поля пустые.

Настройка адресата

В конце не забываем сохранятся.

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

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

У меня всё работает отлично, после нажатия кнопки “Отправить”, вижу сообщение “ Сообщение было успешно отправлено. Спасибо .” Можете тестировать и смотреть какие ошибки форма будет выдавать если не правильно ввести данные.

Что касается css стилей, их можно добавить в главный css файл style.css. С помощью firebag, можете посмотреть id и классы полей и присвоить им соответствующие стили.

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