Плагин Contact Form 7 разбираемся и настраиваем для WordPress форму обратной связи.

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

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

Contact-Form-7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приступает.

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

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

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

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

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

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

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

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

поле "Вопрос"

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

Оцените статью:

Очень плохоПлохоНормальноХорошоОтлично (16 Рейтинг: 4,19 из 5)
Loading...Loading...

Если Вам понравилась статья, поделитесь с друзьями в соц. сетях:

Вам также может понравиться...

Не хотите пропустить новую статью? Тогда подписывайтесь...

Комментариев: 61

  1. Наталья:

    У меня с ним проблема — он создаёт доп. Запросы.
    Не могли бы вы помочь мне в этом разобраться?

  2. Bolek:

    Что значит доп. запросы? Приходят спамовые письма на почту?

  3. Наталья:

    При проверке журнала работы веб-сервера нами обнаружены множественные запросы от плагина contact-form-7, а также к несуществующим ресурсам:

    valetta-mebel39.ru//yastatic.net/share/share.js
    valetta-mebel39.ru/wp-content/themes/layout_new/css/images/rrr.png
    valetta-mebel39.ru/wp-content/themes/layout_new/css/images/vk.png
    valetta-mebel39.ru/wp-content/themes/layout_new/css/images/section_scissors_v.png

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

  4. Анатолий:

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

  5. Bolek:

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

  6. Елена:

    Здравствуйте!
    У меня эта форма выглядит совершенно по другому!
    Например, вместо поля «вопрос» есть поле «капча» и когда я кликаю, меня выносит на сайт разработчика, где на забугорном языке просят зарегиться, выполнить какие- то действия… все очень сложно:( Нет ли других, более легких путей защиты от ботов и спама?

  7. Елена:

    И еще вопрос: как сделать, чтобы форма не отправлялась, пока все поля не будут заполнены?

  8. Bolek:

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

  9. Bolek:

    Можно сделать все поля обязательными к заполнению. Для этого необходимо в каждом поле вставалять звездочку (*)
    Пример:

    [text* text-66 placeholder "Введите Ваше имя"]

    text* — поле обязательное к заполнению.
    И так для всех полей.

  10. Елена:

    Ой, спасибо! Добавила звездочку и все как надо! Но другая проблема:(( мне на почту приходят пустые письма, вот такие:
    От: лена
    Тема: [your-subject]

    Сообщение:
    [your-message]


    Это сообщение отправлено с сайта Абхазия частный отдых 2016 цены Гагра море без посредников
    ——-
    те тело письма пустое, все эти заполненные поля куда- то улетучились:(( что я не так делаю? куда кликнуть?

  11. Bolek:

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

    Все поля должны совпадать по названиям. Если у Вас в шаблоне формы есть поле [your-subject], то в шаблон письма тоже необходимо добавлять такое же название [your-subject]

  12. Mir-On:

    Спасибо за статью!

    Ребят, попробуйте сервис от pozvonim
    Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодиться мой комментарий

  13. Bolek:

    Спасибо попробуем, отпишемся.

  14. Стас:

    Здравствуйте. пытаюсь сделать поле для воода номера (в форме регистрации) чтобы в это поле вводились ТОЛЬКО цифры по формату (например 123-456-78-90). Чтобы при попытке ввода букв он выдавал ошибочку. как это сделать? 

  15. Bolek:

    Здравствуйте. Это нужно в коде плагина ковырять + посмотрите в настройках возможно там можно сделать ограничение. 

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

  16. Ольга:

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

  17. Bolek:

    Создайте страницу с формой + кнопку модно батоном или тем же дивом сделать и повесить на нее ссылку с переходом на страницу формы.

  18. Людмила:

    Здравствуйте, спасибо за статью, очень доступное объяснение. Но я свою проблему не решила — у меня при отправлении обратной связи почему-то только под 1 формой из 5-ти пишется текст “Сообщение было успешно отправлено. Спасибо.”,а во всех остальных случаях пишется «Извините, но запрошенную вами страницу найти не удалось. Попробуйте найти её с помощью поиска.», хотя на почту при этом сообщения приходят. Помогите разобраться, пожалуйста.Благодарю

  19. Санжар:

    Здравствуйте, у меня следующая проблема
    создал форму обратной связи с помощью Contact Form 7, и сделал его во всплывающем окне через плагин easy modal. Проблема возникает при прикреплении файла в контактную форму, то есть я гружу картинку, пишет что загрузилось успешно, отправляю форму, приходит на почту, НО картинка не приходит, приходит только его имя «20160207_100912.jpg» вот такое.
    Что можно сделать, чтобы приходила и сама картинка?

  20. Владислав:

    Создав форму, указав все по описанному в статье, я отправляю сообщение тестовое, появляется сообщение что отправлено успешно, однако никуда письмо не попадает, нет ни отбивки отправителю, ни получателю…
    Где копать и что делать?

  21. Bolek:

    Разбирайтесь на хостинге. Отпишите в поддержку, там вам подскажут, что делать.

  22. Тимур:

    Здравствуйте. Мне нужно переписать на другом языке надпись: «Выберите файл. Файл не выбран». Установка плагина для переключения языков не помогает. С остальным текстом проблем нет.

  23. Bolek:

    В коде смотрите. В папке plugins лежат все файлы контакт форм 7. Там нужно искать, так сложно сказать

  24. Ирина:

    Здравствуйте. Спасибо за информативную статью. У меня возникла такая проблема: при заполнении поля «From» получаю такую синтаксическую ошибку http://prntscr.com/btlvk8
    Сайт на локалке и как найти папочку, в которую сохраняются «отправлены» письма не знаю (Поэтому не могу проверить влияет ли эта ошибка на один об этом отправки. Возможно, знаете в чем тут дело?
    Заранее благодарю.

  25. Василий:

    Доброй ночи, стоит задача интегрировать Contact Form 7 и Bitrix 24, Как просто создать кастомный вариант формы для отправки писем, уже знаю. Могу даже его отправить. Он отправляет все в Битрикс без проблем, но вот как сделать так, чтобы contact form7 это делала и при этом не теряла свой изначальный функционал, в этом пока вопрос. Тут есть вариант интеграции с битриксом самописной формы: webdesign-master.ru/blog/tools/21.html
    Поможете? ПЛИЗЗЗЗ)))) Заранее спасибо) Если что, то можете посмотреть не CF7, а другой плагин, например Layer Popup (он нам тоже подходит для целей) Заранее спасибо.

  26. Станислав:

    Добрый день! Подскажите, пожалуйста, как изменить value «Выберите файл» на «Оберіть файл», когда я хочу прикрепить файл.
    Спасибо

  27. Кирилл:

    Bolek, возможно ли в Contact Form 7 поле email сделать необязательным, а лучше вообще обойтись без него?

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

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

    «Данная контактная форма содержит одну ошибку.»

  28. Bolek:

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

  29. Bolek:

    Раньше, точно можно было сделать если убрать поле или убрать возле поля «*». Если сейчас не возможно, то нужно лезть в код самого плагина и там смотреть код. Возможно в алгоритме стоит автоматом заданое, что емейл обьязателен.

  30. Bolek:

    Эххх если бы знали, то помогли без проблем. Битрикс штука не проста и нужен человек который в его внутренностях хорошо разбираеться. Сам дело особо с битриксом не имел, поэтому помогти не можем((

  31. Кирилл:

    Решил сменой на Ninja Form. Классный плагин, можно обойтись без Contact form 7, вероятно не взаимодействует с Akismet, но там свои методы борьбы со спамом.
    Спасибо за ответ.

  32. Наталья:

    Здравствуйте! Такой вопрос, подскажите пож-та, как сделать так, чтоб после нажатия на кнопку Отправить, не выдавалось сообщение Спасибо и т.д., а сразу же открывалась определенная страница. Т.е нажимаем Отправить, в доп.окне или всплывающем появляется Страница ?? Спасибо

  33. Bolek:

    Здравствуйте Наталия. В Contact Form 7 такой возможности нету, необходимо самому доделывать данный функционал.

  34. Игорь:

    по прошествию полугода нормльного использования… письмо с заполненной формой стало приходить с ошибкой — вместо заполненых полей код плейсхолдера

    Фамилия, имя, отчество* [text* your-name]

    Дата рождения* [date* date-934]

    Дополнительный телефон [tel tel-853]

    Мобильный телефон [tel tel-853]

    В чем может быть проблема ? проверил — форм прописана корректно, в соответствии с требованиями

  35. Bolek:

    Скачать точно не могу:
    1. Возможно проблемы на стороне хостинга. С хостерами поговорите возможно они, что-то подскажут.
    2. Когда-то была такая проблема, исправил просто переустановкой плагина.

  36. Сергей:

    Где можно увидеть текст письма в админ панели? Зашел человек на сайт отправил отзыв. Так помимо письма на email -адрес .отображается ли текст в админпанели?

  37. Bolek:

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

  38. Елена:

    Добрый день!
    Возможно, я не совсем по теме… у меня джумла сайт, стоит аналогичная форма года три уже без проблем все было, а теперь уже с месяц примерно спам из нее повалил как из рога изобилия:( роботы регятся поминутно, а отключить не могу, через нее заказы идут, не знаю прям что делать, с вэбмастером связь давно утеряна кто сайт верстал

  39. Bolek:

    Здравствуйте Елена. У Joomla немного другой плагин, да и это вообще другая cms. Так сказать трудно в чем проблема, но в любом случае нужно обращаться к программисту, что бы посмотрел и убрал данную проблему.

  40. Евгений:

    Добрый день! Подскажите при прикреплении файла с латинским названием все работает а если прикрепить файл на кириллице то файл приходит на почту но не открывается

  41. Bolek:

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

  42. Елена:

    Добрый вечер, подскажите пожалуйста, можно ли в текстовом поле регулировать высоту (т.е. количество строк)? Например, сейчас у меня выводится всегда 10 строк, можно ли сократить до 5-ти?

  43. Bolek:

    А когда человек вводит больше 10 строк появляется полоса прокрутки?

  44. Алик:

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

  45. Bolek:

    Здесь мы подключали еще всплывающее окно в которое запиливали код данного плагина.

  46. Salsero:

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

  47. Salsero:

    Ответ уже не требуется. Проблема была в названии файлов, они должны быть только латиницей. Кирилицу не распознает плагин. Может кто-то подскажет кастомное решение как переименовать файл на латиницу при загрузке через CF7?

  48. Bolek:

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

  49. Дмитрий:

    Добрый день! В браузере Firefox поле дата пустое и не появляется календарь. А при вводе даты в поле в формате: дд.мм.гггг пишет «Формат даты некорректен.» Подскажите как исправить если это возможно?

  50. Bolek:

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

  51. Дарья:

    Здравствуйте. Подскажите, пожалуйста, а есть ли возможность в качестве отправителя использовать поле телефона? Почту мы не запрашиваем на сайте, а без неё у нас не работают заявки в Битрикс24. Может есть какой-то вариант подмены, чтобы отправителем был номер телtфона, тогда и crm,s dbltkf ‘nb pfzdrb&

  52. Bolek:

    Не совсем понятен вопроса и в конце забыли раскладку поменять. Более шире можете описать проблему?

  53. Дмитрий:

    Bolek С данной проблемой не сталкивались. Можете скрин сделать или сайт скинуть, что бы можно более подробно с проблемой ознакомится.
    Вот даю ссылку по форме http://rosintours.ru/podpiska/

  54. Дарья:

    Извиняюсь)
    Работаем в CRM-системе Битрикс24. У нас привязана к нему почта, на которую приходят письма и в битриксе автоматически из этих данных формируются лиды. Дальше продолжаем с ними там работать. На сайте есть несколько форм: одни собирают e-mail, другие номера телефонов. Сейчас, в лидов превращаются только письма с почтами, а на основе телефонов лид не формируется.
    Дело в том, что в настройках плагина, при сборе почты «отправителем» письма на наш почтовый ящик — становится именно эта почта. Так Битрикс принимает за нового отправителя и автоматически формирует лид. А вот с формами, которые собирают телефоны такого не происходит.
    И вот мне интересно, можно ли настроить как-то так, чтобы информация в поле «отправителя» письма использовалась из поля телефонного номера?
    Самой разобраться не получилось пока что, к сожалению

  55. Salsero:

    Дарья, так как поле e-mail является основным для битрикса, вам необходимо в настройке письма внести постоянный e-mail, например telephon@домен сайта тогда лиды будут создаваться с телефонами, но все изначально будут привязаны к одному e-mail адресу.

  56. алексей:

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

  57. Bolek:

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

  58. Bolek:

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

  59. Дарья:

    Спасибо большое!

  60. Виктория:

    Здравствуйте! Нужна подсказка. Есть сайт 20prosto.ru/ Со звонками проблема следующего характера, отправляешь один звонок а приходит 3 так же и с кнопкой рассичтать расчет. Не главная форма а именно плагин контакт форм, приходит все хорошо — телефон имя, но по 3 раза.. Где искать ошибку?

  61. Bolek:

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

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

Уважаемые пользователи!


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


С уважением, Администрация сайта.


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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Связаться с нами

Если у Вас возникли какие либо вопросы, предложения и пожелания для развития нашего ресурса, связаться с нами Вы можете по e-mail: loleknbolek.com@gmail.com, или заполните форму что находиться ниже.

Пишите мы будем рады Вам ответить!