Хостинг от Макхост

Contact form 7 — форма обратной связи для wordpress

Автор: Евгений Несмелов
настройка contact form 7 для wordpress, плагин contact form 7 wordpress, contact form 7, обратная связь на wordpress

С помощью плагина Сontact form 7 быстро создается форма обратной связи на wordpress сайте. Форма обратная связь очень частое явление, она присутствует на многих коммерческих сайтах. Плагин contact form 7 совершенно бесплатный и на русском языке, что делает работу с ним удобной и быстрой. Он не новый, но пользуется своей популярностью и сейчас.

к оглавлению ↑

Обратная связь на WordPress

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

Заплатили за такую форму, вы сейчас упадете, 40 000 рублей. Именно такую сумму озвучили и, что самое интересное, с ними согласились и все оплатили. Речь не идет про супер форму, в которой присутствует много всплывающих окон, варианты выбора из списка и другие навороты. Все простенько и скромненько. Москва есть Москва).

Кстати, вот такую форму на рисунке со всеми фишками с нуля, мне заплатили 15 000 рублей. В ней присутствует три варианта отправки формы, заполненные поля с выбором и другие мелкие прибамбасы. Данная форма сделана с нуля, аналогов конечно много, но именно такая присутствует только на одном сайте.

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

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

к оглавлению ↑

Contact form 7: Настройка

Не будем усложнять задачу, с помощью плагина contact form 7 можно быстро и без труда добавить на сайт wordpress простую форму обратной связи. Она не будет сильно подгружать сервер, работает без сбоев и проблем. Заходим в Плагины — Добавить новый и пишем в поиске его название. После того, как вы его скачали и установили, слева в админке появится новая строчка contact form 7.

  1. Заходим в админку сайта, Плагины.
  2. Пишем в поиске contact form 7.
  3. Устанавливаем и настраиваем.

Заходим в нее и добавляем новую форму. Перед созданием самой формы, вам предложить выбрать язык, русский язык присутствует, его и выбираем. Первая вкладка «Шаблон формы». В ней происходит добавление новый полей в форму. Сверху присутствую разные кнопки для вставки новых полей. Нажимаем, выбираем и добавляем к себе на форму по очереди поля, которые вам нужны.

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

Плагин обратной связи wordpress

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

Все поля не обязательные для заполнения. Если нужно сделать некоторые поля обязательным для заполнения contact form 7, просто пишите (обязательно) в необходимый пункт и все будет работать. Пример показан на рисунке ниже.

Contact form 7 wordpress настройка

Чтоб не переписывать данные из картинки, показываю пример всего кода для вставки. Скопируйте в свою форму и сохраните настройки. На второй вкладке «Письмо» можно ( нужно) указать почтовый ящик, куда будут приходить все запросы.

Плагин вордпресс для обратной связи

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

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

Contact form 7 placeholder

Сontact form 7 style

 

 

 

 

 

 

 

 

 

 

 

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

Единственное, в чем у вас может возникнуть проблема, это дополнительный файл со стилями. Не все можно изменить через Внешний вид — Редактор — style.css. Некоторые стили, такие как изменение длинны ячейки, размер окна для текста и т.д., находятся в другом файле. Расположен он в папке плагина.

wp-content/plugins/contact-form-7/modules

Вот в этой папке есть два файла (textarea.php) и (text.php). В них и находятся стили для формы, которые можно изменять и добавлять новые свои. Например, если нужно изменить длину ячейки, в файле (textarea.php) есть строчка: $atts['cols'] = $tag->get_cols_option ( '27' ); Цифра 27 как раз и отвечает за длину ячейки.

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

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
16 комментариев

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

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

16 комментариев

по хронологии
по рейтингу сначала новые по хронологии

Даааа, 40000 руб. за форму обратной связи это супер)))) Вот как надо делать деньги. Но главное, чтобы клиент был доволен))) 😀

Это точно. В нашей глубинке за целый сайт 40 000 платить не будут, не то что за один элемент 🙂

Автор

Еще бы, клиент конечно остался довольным.

Поставил сие чудо расширение, и получаю теперь спам. Вот вам и Joomly Contactus. Ладно если бы бесплатную версию использовал, а то заплатил же.

Автор

Обычно спам не приходит из Contact form 7. Его ставьте.

Константин

Спасибо. Всё очень доходчиво. Сделал. Всё получилось. Остался один вопрос. Как изменить размер шрифта, который вводится в поля формы. Шрифт очень мелкий. Найти самостоятельно не сумел. Надеюсь на помощь.

Автор

Нужно найти нужное свойство в файле стилей данного плагина Contact form 7. Зайдите через FTP в папку плагина, там находятся все нужные файлы для исправления.

Константин

Евгений, спасибо за ответ. Очень надеялся на конкретную помощь. Такой совет даже я мог бы дать. В том-то и дело, что я просмотре ВСЕ! файлы плагина. Не только CSS (а их там только два), но и все .php. Не нашёл.

Автор

Наверное после последних обновлений плагин немного изменили. Изменение в файлах плагина ни к чему не привели. Если посмотреть на скрин, видно div wpcf7-f86-o1. Открываем plugins/contact-form-7/includes/css файл style.css и в нем я создал новый div.
#wpcf7-f86-o1{
font:bold 17px Tahoma;
}
После этого заголовки полей у меня изменились. Таким образом можно уже делать все остальное.

Константин

Евгений, огромное спасибо. Всё получилось. Супер!

Автор

Не за что. Если что всегда готов помочь.

Константин

Евгений, здравствуйте.
Опять нужна Ваша квалифицированная помощь.
Установил contact form 7 на страницу в шаблоне WP. Подсоединяю в настройке reCapcha (зарегистрировал, коды вставил). Но в форме капча не видна. Хотя работает и сообщение не дает отправить. Попробовал найти куда можно вставить другую капчу (CheckBot. она у меня стоит на комментариях), но так и не нашел куда вставить код:

Константин

Неправильный скрин, пожалуйста, удалите. Спасибо.

Константин
Константин

Случайно не тот скрин был отправлен. Правильный -этот

Автор

А саму капчу занес в разметку формы?