Contact Form 7 — контактная форма на стероидах

12.02.2014

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

Особенность Contact Form 7  — он отлично подойдет как новичку, которому просто нужна контактная форма, так и матерому профи, который любит поковыряться в настройках и сделать все «под себя».

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

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

wpcf_1_all

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

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

wpcf_2_forma

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

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

wpcf_3_newfield

Contact Form 7 поддерживает 16 типов тэгов, которые сделают форму любой сложности. Это и обычные текстовые поля, и специальные поля под телефон и E-mail с валидацией, и чекбоксы, и куча других полей. Каждое поле поддерживает настройку, давайте рассмотрим подробнее.

wpcf_8_editfield

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

  • Чекбокс «Обязательное поле» — делает поле обязательным для заполнения.
  • Поля id и class дают возможность назначить полю собственный класс или идентификатор. Иногда бывает необходимо, для назначения полю отдельных стилей.
  • Поля size и maxlength устанавливают размер и максимальную длину содержимого в поле. Я ни разу не использовал и не могу придумать ни одного сценария использования. Если у вас есть идеи — поделитесь в комментариях
  • Настройка имени автора от плагина Akismet, я тоже никогда не использовал. Используется для борьбы со спамом.
  • Значение по умолчанию я использую почти всегда. Мне не нравится отдельно подписывать поля в форме, поэтому я использую это значение как заполнитель/placeholder

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

wpcf_4_adresat

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

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

wpcf_5_pismo

В поле «Шаблон письма» настраивается внешний вид отправляемого владельцу письма с данными контактной формы. Я не буду пояснять, как с ним работать, по скриншоту все видно.

wpcf_6_adresat

Буквально пару слов об опции «Адресат-2″: она дает возможность отправлять контактную форму на еще один адрес email. Настройки аналогичны блоку с адресатом. Штука довольно удобная, но далеко не всем понадобится.

wpcf_7_message

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

Плагины для Contact Form 7

plugin

Contact Form 7 Integrations

Очень мощный плагин для интеграции контактных форм сайта и сторонних сервисов вроде MailChimp и Google Docs. У плагина довольно специфическая функциональность, но с развитием CRM систем в крупных компаниях, его полезность растет.

Ссылка на официальный репозиторий

Contact Form DB

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

Ссылка на официальный репозиторий

Contact Form 7 Select Box Editor Button

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

Ссылка на официальный репозиторий

Contact Form 7 reCAPTCHA Extension

Как понятно из названия — плагин добавляет в Contact Form 7 возможность вставки reCAPTCHA. Оригинальный плагин уже поддерживает вставку капчи, но общепризнанный лидер этого рынка все же именно reCAPTCHA, поэтому не будет лишней возможность ее установки.

Ссылка на официальный репозиторий

plugin-contact

Contact Form 7 Modules

Плагин позволяет вставлять в контактные формы скрытые поля (hidden fields). Далеко не всем это необходимо, но познакомиться с ними я все же советую. Кроме того, эти поля могут содержать данные о записи или странице, с которой отправлена форма, умеют передавать url страницы и автора записи.

Но и это еще не все… У меня часто бывало такое, что добавляя новое поле в форму, я банально забывал добавить это поле в шаблон письма. Сами понимаете, что узнавал я об этом только когда приходили первые письма без данных из этого поля Этот плагин добавляет модуль [all-fields], добавляя который, вы можете забыть про добавление полей в шаблон письма. Все заполненные поля будут отправлены автоматически.

Ссылка на официальный репозиторий

Contact Form 7 Dynamic Text Extension

Удивительный плагин, добавляющий в Contact Form 7 два новых типа полей — поле с динамическим содаержанием и скрытое поле с динамическим содержанием. Скажу проще, значение в поле формируется шорткодом, со всеми вытекающими безграничными возможностями. Несколько информационных шорткодов уже встроено в плагин, так что протестировать работу плагина можно, не углубляясь в дебри настройки. Но все же это плагин из серии «не для всех», имейте это ввиду.

Ссылка на официальный репозиторий

plugin-phone

Contact Form 7 Phone Module

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

Ссылка на официальный репозиторий

На сегодня все, надеюсь у вас не осталось вопросов «Как добавить контактную форму на сайт» или подобных ему. Если же все плохо, у вас ничего не получается, все сломалось и ничего не работает — смело пишите в комментариях, все починим.

Удачного дня

, ,

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

  1. Psyonid

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

    Ответить
  2. Андрей Зенков

    Для своего блога не использую, но многим клиентам вставлял именно этот плагин. работает отлично, никаких нареканий, торможений и т.п.

    Ответить
  3. Константин

    А опыт работы с плагином Contact-Form-7: 3rd Party Integration есть?

    Ответить
  4. Alex

    Мне нужно сделать возможность для пользователя добавлять поля. Например ему нужно вписать не 1 человека, а 10. не хочется делать «простыню» из 10 одинаковых полей. Хочется чтобы была кнопка «добавить пользователя» которая либо добавляет поле, либо показывает ранее скрытое. Можно этого добиться с данным плагином?

    Ответить
  5. pycc-site

    Спасибо за статью. Но все равно не получается настроить форму для своего сайта

    Ответить
  6. mike

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

    Ответить
  7. Азат

    Добрый день! Форма отправляет письмо. После отправки страница должна перезагружаться, но вместо этого выдаёт ошибку ERR_EMPTY_RESPONSE. Это хром выдаёт. В общем нельзя отобразить страницу, якобы. Гуглил ничего не нашёл. Переустановил плагин — бесполезно. Техподдержка хостинга говорит, что блокируется watch.js от Яндекс. это вебвизор, который подключен к сайту. Без него то же самое абсолютно, да и как-то чтоб из-за скрипта Яндекса тут сайт падал — какой-то бред. в чём может быть проблема?

    Ответить
    • GerinG

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

      Ответить
  8. Максим

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

    Ответить
    • Иван

      Я столкнулся с таким-же поведением. Максим, удалось ли решить проблему?

      Ответить
  9. Alex

    День добрый. Никто не сталкивался, можно ли к меткам меню (select) прикрутить class или id (нужно для выбора ФИО сотрудника из списка и его фото. Как раз для фото и нужно). Спасибо заранее!

    Ответить
  10. Остап

    Здравствуйте!Столкнулся с такой проблемой: было на сайте около 6-7 готовых форм расположенных на разных страницах сайта, сегодня зашел и обнаружил что плагин удалился(!!!) сам! На страницах шорткоды стоят, а самого плагина нет! Откатился аж на неделю назад, только потом появился снова! Но дело в том что в том бекапе нет половины важных форм которые уже были! Хотел сделать бекап тех которые есть, а нет такой возможности. Установил последний бэкап сайта на котором уже нет плагина, хотел установить заново и вот что мне выдает:
    Каталог назначения уже существует. /home/nat0703/g/wp-content/plugins/contact-form-7/
    Установка плагина не удалась
    Кто знает в чем проблема, подскажите пожалуйста!

    Ответить
  11. Дмитрий

    Спасибо за статейку — нашёл в комментах то что искал )))
    Вот ответ на частый вопрос «не отправляется письмо». Связался с техпотдержкой своего хостинга — сказали чтоб перешёл с php5.2 на php5.3… Сделал, всё ОК.
    Удачи

    Ответить
  12. Андрей

    Добрый вечер! Может подскажете проблему. Все отправляется и доходит кроме файлов. От файлов только названия приходят. В папке wpcf7_uploads тоже нет. Ставил 777. Все равно даже в папку не попадают.
    Может сталкивались с такой проблемой. Заранее благодарю!
    С уважением, Андрей

    Ответить
  13. Алексей

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

    Ответить
    • Андрей

      Вся проблема в вашем шаблоне, а конкретнее в style.css
      Там прописаны жесткие рамки для всех текстовых полей, поэтому размер и не изменяется

      Ответить
  14. Дмитрий

    Может кто на этом сайте поможет:
    Интересует возможность реализации добавления товаров в корзину посредством заполнения Ajax формы покупки,как на этом сайте: veschichka.com/help/how-to-order/ . Можно и не Ajax, а с помощью Contact Form 7, главное-чтоб работало.
    Конкретнее: добавление товара в корзину происходит путем заполнения специальной формы, в которой указываешь цену товара с сайта taobao, ссылку на него и обратные данные (Все это легко делается с помощью Contact Form 7). После заполнения формы товар появляется в корзине!!! При чем цена та, которую указали вы в этой самой форме.
    Как мне раелизовать такую же возможность!?
    Нужно,чтоб данные с этой формы шли в корзину, в которой будет производиться суммирование цен заказа и впоследствии, отправляться в виде письма на почту заказчику для оплаты.А еще лучше, если в этой самой корзине будет прикручена форма оплаты.
    Надеюсь, на данном блоге обитают довольно опытные и отзывчивые люди. Буду очень благодарен за ответ. Слежу за комментариями…

    Ответить
  15. Алексей

    Добрый день столкнулся с такой проблемой. С одного сайта отправляет а с друго нет. Все перерыл в чем проблема не найду может кто подскажет?

    Ответить
  16. jaks

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

    Ответить
  17. Михаил

    Здравствуйте. Подскажите пожалуйста, в чем дело. Не работает contact form 7. После заполнения формы, очень долго думает и в итоге выдает ошибку 504. То есть сама форма настроена правильно, но до почты не доходят письма, то же самое касается входа и регистрации в личном кабинете (плагин wp-recall).
    Подскажите пожалуйста, что делать?

    Ответить
    • GerinG

      Добрый день. Настройки почтового сервера на хостинге нужно смотреть, обратитесь в техподдержку

      Ответить
  18. Сергей

    Здравствуйте! На сайте инсталлирован плагин всплывающих окон «dreamgrow-scroll-triggered-box». А также плагин Contact Form 7. Идея такова, что хочу выводить в всплывающем окне форму обратной связи CF7. Но при нажатии кнопки «отправить» не происходит визуальная информация посетителю, т.е. нет сообщения, что не правильно заполнены поля, или сообщение успешно отправлено. Но при этом сообщения приходят мне на почту, т.е. функция отправки на e-mail работает. Что посоветуете в данном случае?

    Ответить
  19. Юрий

    Здравствуйте. Хорошая форма, только обнаружилась вот такая проблемка. Объединил ее работу с fancybox, чтобы форма выскакивала всплывающим окошком по клику. Добавил код этой кнопочки в футер — все работает, но если добавляю где-то в самой странице — то вызывается не форма, а ее шорт-код. Т.е. где-то поздно подключается сам плагин, хотелось бы знать, как его вызвать пораньше. Ну или в чем может быть проблема? http://i.gyazo.com/d2412e15863e1c9e2585bb86b9ef9540.png

    Ответить
      • Илья

        блин код не встал в коммент
        в общем в гугл поиск: «оборачиваем шорткод в php»

        Ответить
  20. Олжас

    Ребята, нужна помощь!
    Создал форму обратной связи с помощью CF7 все отлично, кроме двух маленьких сложностей, с которыми я столкнулся. Первое — у выпадающего меню вид отличается от других полей. Все поля выглядят одинаково и под стиль шаблона ВП, а выпадающее меню стандартного виндовского вида. Как мне изменить вид данного меню? В CSS я не столь силен, но и в style.css я ничего не нашел. Второе — как можно поменять размер поля Textareа, чтобы он был по высоте и ширине подходящим? Большое спасибо за ответы.

    Ответить
    • GerinG

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

      Ответить
  21. Василий

    Приветствую!
    Плагин работает все отлично, кроме одного:
    Когда нажимаешь «Отправить» крутятся две стрелочки, и не пишет текст, что отправлено.
    При этом оно отправляет на почту, и посетители, когда отправляют тыкают по 5-10 раз и мне на почту приходит по 5-10 сообщений.
    Возможно ли как-то вылечить это?
    Спасибо за внимание.

    Ответить
  22. Алексей

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

    Ответить
    • GerinG

      Добрый, нужно в стилях прописывать свойства, в шаблоне. Проблема часто встречается

      Ответить
  23. Дамир

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

    Ответить
    • GerinG

      Есть такие и плагины, и шаблоны, я встречал. Причем, куча вариантов и бесплатных, и платных. Короче, на любой вкус и кошелек

      Ответить
  24. Игорь

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

    Ответить
    • GerinG

      Проверьте не только адресата, но и остальные поля, это раз. Второе — надо бы проверить, есть ли возможность отправки писем вообще, на некоторых хостингах запрещена отправка стандартными средствами WP и нужно выкручиваться

      Ответить
  25. CROSS

    Здравствуйте! Подскажите плагин типа конструктора форм заказа. С условиями , возможностью вставки картинок

    Ответить
  26. Андрей

    Здравствуйте! Помогите, пожалуйста, разобраться. Постоянно после ввода данных в форму выдается вот это сообщение: «Ошибка при отправке сообщения. Попытайтесь позже или обратитесь к администратору сайта.» и так на нескольких сайтах. Я удалял все плагины (думал, что несовместимость), менял темы, а эта надпись так и выходит.

    Ответить
    • GerinG

      Проверьте, заполнено ли поле, кому отправлять. Часто из-за этого ошибка такая вылетает. Если не поможет — я бы проверил возможность отправки почты с сайта вообще.

      Ответить
  27. Евгений

    Как увеличить число адресатов в форме хотя бы до трех?

    Ответить
  28. Zawer

    Настроил форму на сайте, но не знаю как прописать в css доп. настройки.

    Ответить
  29. Марат

    А возможно ли реализация на Contact Form 7, множественный выбор и отправка их на почту? Множественный выбор сделал, но он не желает никак отправлять все файлы.

    Ответить
  30. Вячеслав

    Думаю, параметры размеров html-атрибутов очень будут полезны при верстке хтмл-емаилов, ну это если использовать плагин в качестве конструктора) почему бы и нет)

    Ответить
  31. Елена

    Здравствуйте! Помогите, пожалуйста, разобраться. Последнее время (недели 2-3 как заметила) форма contactform 7 перестала работать. Вернее, все формы, что были созданы ранее – работают, а новую форму- не создать. При создании (или копировании) форма вроде сохраняется, но когда в неё заходишь – там пусто. При попытке редактировать старую форму – никаких изменений не происходит, ничего не сохраняется. С чем может быть связана проблема? WordPress и сам плагин – последних версий. Проблема обнаружилась после обновления WP, но не сразу, а спустя 2-3 недели.

    Ответить
    • GerinG

      Здравствуйте. Не сталкивался с такой проблемой, честно говоря. Попробуйте сделать копию сайта на локальном сервере и проверьте работу там. Плюс — рекомендовал бы проверить сайт специализированным антивирусом — AI-Bolit, мало ли что

      Ответить
  32. Евгений

    Отличный плагин, в интернет-магазинах (которые работаю по форме заказа, бе олпаты) — вообще незаменимая вещь

    Ответить
  33. Михаил

    Вот все в нем замечательно. Только на одном из 4 х сайтов, которых я устанавливал, кнопка «отправить» приняла стиль шаблона, а в остальных нет.
    Уважаемый, Виктор. Что нужно сделать, чтобы «Contact Form 7» был в стиле шаблона?

    Ответить
        • GerinG

          Конечно. Обратите внимание в статье на скриншот с настройкой текстового поля при добавлении на форму. Там есть поле class(необязательно), вот туда надо вставить название класса, который в вашем шаблоне выводит кнопку нужного вида.

          Ответить
  34. Tit

    Вообще это лучший плагин для wordpress. Я использую для моего сайта. Для оптимизирования скорости сайт,можно добавить код на файл custom_functions.php чтобы загрузить файл js/css плагины на несколько страниц.

    Ответить