Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » WordPress » Wordpress Плагины » Форма обратной связи на Wordpress – плагин contact form 7 (+ captcha)

Форма обратной связи на WordPress – плагин contact form 7

Wordpress – плагин contact form 7Форма обратной связи может пригодиться любому сайту (простому или, тем более, корпоративному), а также является неплохим дополнением для блогов на WordPress. Это дополнительная возможность быстро связаться с автором проекта, если под рукой нет ни аськи, ни почтовика. Вот и у меня возникла данная задача, пошел просматривать существующие плагины. Сразу нашел некий cformsII, который позволяет, судя по отзывам,  создать самую могущественную и функциональную форму обратной связи, которая только существует:) Посмотрел обзоры и документацию — действительно там все выглядит очень масштабно. Но, поскольку, мне требуется лишь простая форма для оправки сообщения на почту с базовыми полями типа «Имя», «Мыло», «Сообщение», то я решил продолжить поиски.

Выбор остановил на плагине Contact Form 7, что почти в 20 раз более популярен всех подобных разработок. Значит — люди доверяют и частенько используют. Забегая наперед, скажу, что нисколечко не ошибся — модуль весьма приятный и быстрый в настройке. Установить форму обратной связи и разобраться с деталями у меня заняло минут 10-20. Плагин позволяет управлять несколькими формами на сайте, поддерживает технологию Ajax, CAPTCHA, а также антиспам плагин Akismet. Минимальные требования — WordPress 2.5, работает также и с последней 2.7.1. Благодаря добрым людям Contact Form 7 переведен на множество языков, в том числе и русский и украинский.

Установка плагина достаточно простая — копируете файлы модуля в знакомую уже директорию /wp-content/plugins/, после чего активируете его в меню системы. Далее в админке в «Инструментах» появится раздел Contact Form 7. Это нечто вроде конструктора форм:

Wordpress – плагин contact form

Где их можно добавлять, удалять и т.п. Выделенный текст — это идентификатор формы, который вы должны будете вставить на любую из страниц блога (например, под названием «Контакты»). Не уверен, но, скорее всего данную конструкцию совершенно спокойно можно добавлять в посты или шаблон. Это, если вам понадобятся какие-то дополнительные модификации формы обратной связи — допустим, добавить ее в сайдбар или реализовать отсылку пожеланий на почту к определенному посту.

Чуть ниже на этой странице располагается блок под названием Form, где вы указываете структуру вашей формы обратной связи. В процессе работы используется специальный синтаксис для плагина. В принципе, уловить его можно и без лишних подсказок, но автор плагина Contact Form 7 пошел еще дальше и добавил механизм создания новых полей.

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

Сначала выбираем нужное нам поле для формы (левая колонка) — текстовое большое или однострочное, выпадающее меню, поле для email и т.п. После чего с помощью Ajax подгрузится ряд настроек, которые потребуется заполнить, и в самом конце плагин сгенерирует нужный код для добавления в форму справа. То есть разбираться в синтаксисе построения формы даже не нужно.

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

В самом низу страницу есть блок Messages, где хранятся типовые сообщения, выводимые при тех или иных действиях пользователей — неправильное заполнение полей, ошибка в e-mail и т.п. Чтобы отобразить списков нужно нажать ссылку Show возле заголовка.

Напоследок хочу порекомендовать установить на вашу форму механизм защиты от спамеров — CAPTCHA. В самом модуле такого функционала нет, поэтому потребуется скачать дополнительный плагин — Really Simple CAPTCHA. Для установки заливаете модуль в директорию со своими плагинами. Далее активируете в админке. После этого возвращаетесь в конструктор формы и с помощью мастера генерируете элемент типа CAPTCHA. Картинку с кодом даже можно настроить. Не забудьте в конце сохранить все настройки формы, и она обновится на сайте.

Располагаем радиокнопки / чекбоксы в столбик

Для того чтобы создать блок радиокнопкок / чекбоксов добавляем через форму новый элемент:

радиокнопки / чекбоксы

При этом в настройках определяем для него класс, например, mycheck. Добавляем код в форму и сохраняем ее. Далее в файле стилей style.css добавляем код:

.mycheck .wpcf7-list-item {
 display: block;
}

Если возникли какие-то вопросы — можете глянуть мини FAQ на сайте автора плагина либо задавайте в комментариях.

Update (29.08.10): В одном из блогов нашлась интересная статья про дополнительное поле для плагина Contact Form 7 чтобы можно было вставлять дату. Если у вас имеется подобная задача, то статья должна пригодиться.

P.S. Создание сайта в Краснодаре — полный цикл: от разработки до продвижения.

23.04.09

Категории: Wordpress Плагины.

Теги: , , , , , ,

254 Comments
  1. Tod

    Lelik, возможно, что-то с правами пользователя, то есть как я понимаю файл грузится сначала на хостинг а потом отправляется (или выполняются оба действия). Я бы попробовал установить для директории файлов права на запись 666 + поэкспериментировать с другими папками плагина.

  2. Александр

    файлы на почту не высылаются!

  3. Tod

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

  4. Viktor

    У меня проблема с темой Swerve. После отправки заполненой анкеты нет сообщения об успешной отправки, колёсико крутитья «вечно», хотя сообщение с заполненой анкетой благополучно приходит на почтовый ящик. Если я убираю из формы поля с загрузкой файлов, то всё работает без зазоринки.
    В чём может быть проблема?

  5. Tod

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

  6. Антонина

    Привет! Отличный плагин, пользуюсь почти два года для разных целей. Возникла необходимость разместить форму по центру страницы. Использовала тег — но без изменений: форма выравнивается по левому краю страницы. В коде я пока не спец, поэтому надеюсь на ваши подробный ответ. Заранее благодарю!

  7. Антонина

    исправила опечатку, все встало по центру: )))

  8. Аргунов Артём

    Добрый день!
    Подскажите, пожалуйста, как в Contactform7 генерируются радиокнопки? Видимо, вопрос на столько прост, что ни в одной из нескольких десятков статей о плагине, что я за эти сутки пересмотрел, он не освещается, а я вот не могу вникнуть…
    Что необходимо вводить в поля «id» и @class»? И в последнее поле, как я понял, вводить названия кнопок — каждое с отдельной строки?
    Пособите, пожалуйста! Очень нужно.

  9. Tod

    Артём, во-первых, все элементы можно генерировать в форме справа (это я так на всякий случай, если вы не заметили). Во-вторых, id и class нужны для того если вы хотите указать полю определенное «название», с помощью которого через CSS задается какой-то стиль (исключительно для оформления). В последнем поле вводятся значения кнопок — каждая с новой строки. Вообще дабы лучше разобраться можете все тестировать — создайте форму, посмотрите как все отображается и какие параметры за что отвечают.

  10. Александр

    Глюков с этими плагинами куча….и главное что их тестировать нужно..а то может получиться как у меня….вроде работает…но потом посетители пишут уже на прямой емейл что сообщение не отправляется…Начал тестить..и да не работает)))) удалил, поставил заново..работает..но возле кнопки отправить стрелки загрузки не исчезают….начал Гуглить эту тему….нашел что может с другими плагинами конфликт…или вообще с самой темой..и что получается если хочешь этот плагин то нужно от другого чего то отказываться))) Нафиг такой плагин….Нашел другой))) все работает!

  11. Tod

    Александр, да, плагин местами может подглючивать, но не факт, что его вина) темы ведь тоже корявые создают. Плюс contact form 7 в его простоте — 5минут и форма на сайте. Но иногда использую другой модуль — cformsII, там настроек побольше.

  12. Юлия

    А кто что думает о плагине keypic? кто пользовался? интересно узнать ваши мнения

  13. Tod

    Юлия, лично я keypic не пользовался, акисмет пока что полностью устраивает.

  14. Roman

    Подскажи пожалуйста по подробней как изменить рамку, цвет, шрифт и т.д. Заранее благодарен)

  15. Tod

    Roman, все делается через CSS стили в файле style.css — вам нужно узнать названия стилей (посмотреть html код страницы с формой) и тогда уже менять стили.

  16. Alex

    Доброго времени суток, вопрос следующий

    Сменил / перевез сайт, на другой домен и хостинг, СF7 перестал слать письма, выдает красную ошибку. Предполагаю что где-то фигурирует предыдущий домен, подскажите где посмотреть и изменить, или если ошибаюсь то в чем может быть проблема? Спасибо!

  17. Tod

    Alex, я бы глянул настройки, но вообще-то вроде там никаких указания домена не было. Глюк точно не у хостинга с отправкой почты? Можно еще зайти в БД через phpmyadmin и запустить поиск по базе данных дабы найти упоминание в таблицах старого домена.

  18. Alisa

    Здравствуйте!
    Прочитала статью и пролистала все комментарии. Дважды был задан вопрос: «Как сделать так, чтобы радиокнопки/чекбоксы выводились столбиком, по одному?» — ответы так и не даны. В первом случае автор вопроса разобрался сам, а с другими не поделился, автор поста тоже не добавил эту инфо. =( Во втором вообще ничего.

    Я понимаю, что для большинства присутствующих, наверное, это слишком простой вопрос — но простой вопрос — тоже вопрос! Тем более, что по идее на простой вопрос и ответить значит просто?

    Итак, что делать нужно? Лезть в файлы плагина, находить файл styles.css и там править? Но что править? Ведь вопрос конкретный, и, наверняка, нужно там исправить ОДНУ конкретную строчку на ОДНО ОПРЕДЕЛЕННОЕ конкретное значение. Так почему бы не ответить и не помочь заодно всем, у кого такой вопрос еще может возникнуть? Спасибо заранее всем, кто поможет.

  19. Tod

    Alisa, добавил решение в статью, пробуйте)
    P.S. Я даю только «общие» советы и подсказки в каком направлении искать или мыслить, решать каждый вопрос конкретно у меня, к сожалению, нет времени.

  20. Матвей

    Здравствуйте, подскажите где в styles.css изменить цвет шрифта,чтобы текст: «Ваше имя» и «Ваш телефон» был нужного цвета?

  21. Tod

    Матвей, нужно посмотреть html код формы. Для базовой имеется класс wpcf7, можно попробовать указать что-то вроде:

    .wpcf7 {
        color: red;
    }

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

  22. Екатерина

    Добрый день. Установила на сайте плагин CF7. Работает все, кроме отправки вложений. А именно, первый вложенный файл не приходит на почту. То есть, если отправитель прикрепляет два файла и более, то мне на почту приходят второй, третий и т.д. От первого остается только название. А если был всего один файл — то, соответственно, он не приходит. Подскажите, пожалуйста, в чем может быть проблема?

  23. Tod

    Екатерина, возможно, проблема в самом плагине, я бы советовал попробовать альтернативный модуль cforms ii.

  24. Алексасндр

    А у меня не работает по прежнему чекбоксы по одному в каждой строке.

  25. Tod

    Алексасндр, попробуйте подправить стили в файле “style.css” для класса “wpcf7-list-item”. Это вопрос скорее на знание CSS.

  26. Sovtest

    А кто в курсе как передать название документа из которого была отправлена заявка? Просто есть несколько десятков документов и необходимо знать с какой именно странице было отправлено сообщение. Может кто поможет?

  27. Tod

    Sovtest, возможно поможет этот пост — там про передачу дополнительного параметра через форму.

  28. wordpress-lamer

    Здравствуйте! Не могу вывести две разные формы на главной.
    Вставляю такой вот код в header.php:

    <!-- begin callback forms -->
    <a href="#contact_form_pop" rel="nofollow"> </a> 
    <a href="#contact_form_pop" rel="nofollow"> </a>
    <!-- end of callback forms -->

    Вывести пытаюсь на главной сразу две разные формы. Открывается только одна форма, ну оно и понятно, ссылка то одинаковая, но вот на какую ее изменить не понимаю. Где копать?

  29. Tod

    wordpress-lamer, я так понимаю не весь код сохранился. Но вообще советую почитать FAQ по модулю на официальном сайте. Например там добавление кода форма в файл делается так:

    <?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>

    Форма вставляется через шорткоды, не заметил у вас такого.

  30. Эдуард

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

    А вот в базе данных этих файлов я так и не нашол. Где же они хранятся?

  31. Tod

    Эдуард, ну, теоретически они грузятся не в БД, а в какую-то директорию типа uploads. Я точно не знаю.

  32. Эдуард

    В папке uploads нашел папку wpcf7_uploads, но загружаемых файлов для теста я там не нашел. Наверное из-за того что я их на почту отправлял и они там временно сохраняются. Конечно Сиформ2 настраивать как-то проще и удобнее. Теги неиспользуемые в формах интересно удаляются или складируются и засоряют базу?

  33. Tod

    Эдуард, честно говоря, никогда с прикрепленными файлами дело не имел. Возможно для папки wpcf7_uploads нужно было поставить права на запись или еще что-то такое. Статья эта, в принципе, достаточно древняя, сейчас я cforms ii использую.

  34. Эдуард

    Tod, почему стали сиформ использовать? Сиформ тяжелая штука. Папка автоматически получила права 733. С такими правами оно отправляется на почту, но в этой папке не сохраняется. что заставляет задуматься зачем эта папка. Также непонятно как чекбоксы сделать списком, а не строкой

  35. Tod

    Эдуард, по настройке и при первом знакомстве плагин посложнее, но по ощущениям там больше функциональности. Все, в принципе, по ситуации делаю — если нужна 3-5 полей формы для обратной связи, то можно и contact form 7, во всем остальном я бы выбирал «Сиформ».

  36. Ольга

    Доброго. Замечательное описание плагина. Очень помогло в создании формы регистрации. Но не могу отцентровать форму при выводе. Куда копать?

  37. Tod

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

  38. Елена

    Здравствуйте, у меня возникла проблема с плагином Contact Form 7, я его установила, настроила, вроде все сделала правильно, и даже тестовое сообщение отправила, сообщение пришло, но в верху, в заголовке сообщения вместо темы сообщения тег [your-subject]. Что нужно написать в коде, чтобы было появлялось именно тема сообщения, а не тег?

  39. Tod

    Елена, вряд ли я могу что-то посоветовать. Если вы настроили все точно также, как показано в примерах в этом посте и в описании плагина на сайте wordpress, то вместо your-subject должна подставляться тема. В созданной вами форме для сайта ведь существует блок [text your-subject]? Если существует, то значение этой строки должно приходить на почту. Если его нет, то теоретически присылается просто текст your-subject.
    Могу лишь посоветовать обновить WP и плагины до последних версий либо использовать модуль cforms ii.

  40. Андрей

    Народ Буду очень благодарен если поможете FAQ в оригинали читать буду долго.
    Проблема как и у «ламера» вставляю на одну страницу 2-е формы. одна не работает.
    [contact-form-7 id=»290″ title=»Отправьте нам сообщение»]
    [contact-form-7 id=»295″ title=»Обратный звонок»]

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

  41. Tod

    Андрей, подсказать не смогу, так как сам читал про этот глюк только поверхностно, тем более что форма простая обычно ставилась на страницу контакты без других. Советую посмотреть плагин cforms ii там вроде проблема решена.

  42. Ян

    Выручайте ребята не могу зайти в админ панель под WordPress
    Давно пришло обновление на плагин contactForm-7 но всё никак не доходили руки
    В один прекрасный день дошли Блин за это хочется их оторвать :(
    при обновлении всё повисло я подождал минут 10 и перегрузил комп Но увы в админ панель больше войти не смог . Ошибка 400
    и пишет такую странную байду но вот явно не для чайника .
    Warning: require_once(/home/u619733162/public_html/wp-content/plugins/contact-form-7/admin/admin.php) [function.require-once]: failed to open stream: No such file or directory in /home/u619733162/public_html/wp-content/plugins/contact-form-7/settings.php on line 15

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/u619733162/public_html/wp-content/plugins/contact-form-7/admin/admin.php’ (include_path=’.:/opt/php-5.3/pear’) in /home/u619733162/public_html/wp-content/plugins/contact-form-7/settings.php on line 15
    Кто сталкивался с такой бедой подскажите что нужно сделать

  43. Tod

    Ян, если глюк появляется после установки плагина, то скорее все проблема как раз в нем. Вам нужно удалить модуль с ФТП и попробовать зайти снова.

  44. Ян

    Тоесть просто удалить папку с плагином ?
    Блин у меня там 20 записей пришли от клиентов а я прочитать не могу
    Будет не красиво если не отвечу Может знаете как их прочитать без входа на админ панель ?

  45. Ян

    увы удалил папку КонтактФорма-7 но сайт вообще отказался открываться Так с ней хотя бы работает вот только я не могу войти в админку :(

  46. Ян

    Спасибо большое всё получилось Удалил старый плагин и записал новый через фтп
    Теперь заходит в админку :)

  47. Looler

    Добрый день, может подскажете чем лечить:
    На сайте в Футере вставлена форма обратной связи (Contact Form 7), все работает отлично, но стоит мне добавить туда «каптчу» (Really Simple CAPTCHA), как страница начинает неадекватно грузится, т.е. вся страница (кроме шапки), видимо ждет пока загрузится «каптча» и только потом грузится страница, и это при том, что вся форма обратной связи находится вообще в самом конце страницы. Задержка там где то в одну секунду (может меньше), но все же, прям не красиво бросается в глаза загрузка всей страницы.
    Это может быть проблема «локалхоста» и на хостинге такого не будут или же все таки есть такая проблема?

  48. Tod

    Looler, сложно сказать почему так происходит. Версии плагина, каптчи и ВП совместимы? Может быть из-за локалхоста, залейте на ФТП и посмотрите что будет. Если что, есть еще форма cforms ii.

  49. Looler

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

  50. Стас

    Добрый день, подскажите пожалуйста — столкнулся с такой проблемой.

    Выставил в боковой виджет «текст» контактную форму.

    и все вроде ничего, да вот только поле «сообщение» таких же размеров как и все остальное, хотя заявлено именно как textarea. на размеры заявленные при создании, поле не реагирует. на плагин contact form 7 style эта форма не реагирует. Задача — задать height «по умолчанию» для одного этого поля.

    мне кажется, что форма не подчиняется никаким настройкам, кроме темы WP graphen.

    Куда лезть и что делать?

    Заранее спасибо!

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

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