Онлайн заработок, создание и монетизация сайтов, веб-разработка, 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

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

Теги: , , , , , ,

254 Comments
  1. Tod

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

  2. Дрон

    Сергей, а нужно ли это? вдруг сбой, и человек этого не узнает, будет ждать… ну а по сути, ява код для редиректа вам должен подойти!

  3. Сергей

    Дрон, так речь и идёт о редиректе в случае успешной отправки формы. Если будет сбой, то средствами плагина выйдет сообщение об ошибке… Вопрос, как связать редирект с успешной отправкой формы?

  4. Дрон

    Залезть в код плагина и добавить в IF(true) строку header( ‘Location: /’, true, 307 );

  5. Марина

    делаю сайт. плагин СF7 , но клинит на шаге «Добавить форму» Требует обновления вордпресса. У меня версия 3.0. Там уже столько страниц. Жалко труд свой. Может все слететь.

  6. Tod

    Марина, посмотрите статью про обновление WordPress для начинающих либо в этом блоге ссылку вот здесь http://tods-blog.com.ua/wordpress-update/ — ничего сложного в этом процессе нет.

  7. baybik

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

  8. Tod

    baybik, нет не сталкивался, первый раз такое встречаю, возможно проблема была в несовместимости версий.

  9. Илья

    Добрый день! Скажите, а данный плагин работает с версией 3.3.1 ? Установил нормально, ввел все поля, построил форму, нажимаю сохранить и в блоке «Адресат» содержимое всех полей заменилось на «а». Вообще не понимаю что за хрень такая…Подскажите что-нибудь?

  10. Tod

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

  11. Илья

    Проблема решена…только частично. Все дело в том, что тело сообщения не поддерживает русский алфавит…не знаю почему. Заново ставил по 20 раз, в базе ковырялся, в файлах, функциях и т.д…в общем как решение — в теле должны содержаться только латинские символы.

  12. Denis

    wp-content/plugins/contact-form-7/modules/captcha.php

    $atts .= ‘ size=»40″‘; // default size

    (40 размер поля капчи) на 102 строке меняем допустим на 20

  13. AlexMak

    Спасибо, сделал по инструкции, но на свой вкус. (капча пока не требуется правда)
    http://alexandermakarov.ru/contact_us.html

  14. sanyok

    поставил все без проблем. после нажатии Отправит идет загрузка а результатов не показываеь

  15. Tod

    sanyok, много может быть нюансов — от версии плагина (лучше ставить последние) до отсутствия в футере wp_footer() или как-то так… я бы погуглил возможные ошибки и еще потестировал форму.

  16. Дмитрий

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

  17. Tod

    Дмитрий, сложно сказать в чем может быть проблема, часто из-за отсутствия wp_footer() в футере подобное наблюдается. А так я бы обновил плагин и WP до последних версий, а потом на сайте плагина почитал FAQ где некоторые глюки обсуждаются.

  18. Дмитрий

    Уважаемый Tod , втом и дело что WP и плагин «contact form 7» последней версии, свой блог я создал недавно.
    На официальном сайте разработчика плагина написано, что наблюдается такая проблема из за конфликта других плагинов темы. Я отключал все плагины, устанавливал другие темы и всё тоже самое :( .
    Перерыл можно сказать весь инет ;) и толком некто не знает как эту проблему решить, а она как я понял у многих проявляется.

  19. Tod

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

  20. Дмитрий

    Я так тоже посчитал и буду пробовать Cform2.
    Хочу спросить ваше мнение об этом плагине, если вы его пробовали ?

  21. Tod

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

  22. Kemal

    Подскажите пожалуйста как сделать поле с телефоном? Чтобы как email работало, т.е. вводились только цифры, не писать же regex самому.

  23. Tod

    Kemal, сложно сказать, давно не сталкивался с формой — по идее должны быть какие-то параметры для подобных целей. В Cform2, по моему, такое точно есть, а здесь — не помню.

  24. Andre

    Помогите плиз, поставил контакт форму не уходит письмо на email домена ……@site.ru, а на яндекс и mail почту без проблем. Кто сталкивался с этим?

  25. Виталий

    Дмитрий 15.05.12 at 9:12 pm писал:
    «Всё работает кроме как нажимаешь на кнопку отправить, колёсико крутится но ничего не происходит, но письма отправляются.»
    Проблема эта возникает из-за плагина Really Simple CAPTCHA, который блокирует работу javascript плагина Contact Form 7.
    Об этом говорит и приложение к браузеру Mozilla — Firebug: «Permission denied in …\wp-content\plugins\really-simple-captcha\really-simple-captcha.php on line 190 (Доступ запрещен в линии 190)».
    У меня на сайте стоят WordPress версии 3.2.1 и Плагин Contact Form 7 версии 3.2 без Каптчи и всё работает нормально.
    Проверял совместимость WordPress версии 3.4.1 с Плагином Contact Form 7 на локальном сервере- без Каптчи всё работает нормально.

  26. Andre

    да, но я удалил капчу и все равно не пашет, пишет что отправлено письмо. Но его в почтовом ящике нету!

  27. Виталий

    Andre пишет: «да, но я удалил капчу и все равно не пашет, пишет что отправлено письмо. Но его в почтовом ящике нету!»
    — Проверьте в Админке сайта в разделе Адресат плагина Contact Form 7: Email-адрес, на который должны отправляться письма;
    — Заполнен ли у Вас раздел «Тело сообщения» (справа от раздела Адресат).

  28. Александр

    Использую плагин CFroms 7 (Версия 3.2.1). Заметил одну особенность. При аттачменте файла с названием на нашем сильном и могучем русском языке, после отправки приходит файл с куском этого названия. Скажем, приаттачили файл «Коммерческое предложение.doc», а приходит в аттаче «-предложение.doc», причем проблемы заменяются черточками. Использую, как написал выше, последнюю версию плагина. Если у кого есть соображения, буду рад их услышать.

    P.S. В хроме ещё один прикол есть. При аттаче файла ему присваивается путь C:/fakepath/ )) Про эту фичу уже читал на хабре. Но это легко исправляется, решил оставить только название файла. И господин Takayuki Miyoshi не предусмотрел, что аттачмент в хроме, опере и фоксе выглядят по-разному. Пришлось править файл file.php в директории modules.

  29. Имя

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

  30. Tod

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

  31. Светлана

    Привет!
    Такой вопрос: хочу, чтобы после отправки сообщения форма исчезала и оставалось только «Спасибо за фообщение и все такое». Можно сделать?

  32. Tod

    Светлана, вполне вероятно, что можно, но как именно, увы, не подскажу. Можно попробовать поискать функции переадресации пользователя на другую страницу после отправки сообщения, а на той странице уже будет сообщение «спасибо и все такое» — по крайней мере я так делал в некоторых других CMS. Есть еще классная форма-плагин — Cforms ii (он, насколько я помню, более функциональный).

  33. Андрей

    Светлана, ставте функцыя отвечающую за форму в условие IF а в фигурных скобках то что выводить!!!

  34. Светлана

    Tod, спасибо, посмотрю второй плагин.
    Андрей, я не поняла, что вы имеете ввиду :)

  35. Сергей

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

  36. ADv

    Возможно ли настроить вывод полей не в столбец, а в несколько строк? Полей более 10, и итоговое «полотенце» некрасиво смотрится :(

  37. Tod

    ADv, стиль отображения формы вы можете указать людей — все это делается в админке + через стили css.

  38. Павел

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

  39. Tod

    Павел, можно попробовать задать стили через style.css.

  40. Артур

    Здравствуйте , у меня так сказать 2 вопроса точнее одна проблема и вопрос:
    Начну с проблемы , а заключается она в следующем, если не заполнить обязательные поля и нажать кнопку отправить то у этих полей высвечивается пустая красная рамка без текста , а я полагаю текст о том что поле не заполнено должен быть — как его туда вставить ? форма моя находится на этой странице semetry.pp.ua/?page_id=52
    и вопрос, как изменить цвет и стиль кнопки ? прекрасно понимаю что css надо юзать только бы подробнее..,жду ответов :)

  41. Tod

    Артур, внутри красной рамки есть текст, просто он белого цвета и сливается с фоном. Вам нужно для класса wpcf7-not-valid-tip указать цвет текста, например, красный в стилях. То же самое по поводу кнопок — все делается через стили, к сожалению, расписать детальнее не могу, поищите примеры CSS для кнопок в форме.

  42. Артур

    а вот этот класс wpcf7-not-valid-tip в каком файле искать ? в файлах плагина правильно понимаю ?

  43. Артур

    нашел в файле плагина classes.php вот это:

    $ve = » . esc_html( $ve ) . »;
    return apply_filters( ‘wpcf7_validation_error’, $ve, $name, $this );

    полагаю сюда надо вписывать цвет ?

  44. Артур

    Все разобрался , надо в файле плагина styless.css
    в эту строчку в конце дописать color: black; в моем случае черный :)

    span.wpcf7-not-valid-tip {
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: 100;
    background: #fff;
    border: 1px solid #ff0000;
    font-size: 10pt;
    width: 280px;
    padding: 2px;
    color: black;
    }

  45. Tod

    Артур, да, все стили только в style.css.

  46. Артур

    И со стилем кнопки тоже разобрался , там уже пришлось дописывать код в style.css только у шаблона, Еще наверное последний вопросик : Как изменить текст на кнопки отправки ? там по умолчанию отправить , возможно ли что то свое написать ?

  47. Данил

    Точно-точно! Если стрелки крутятся, но ничего не происходит, а письмо все же приходит, притом даже на русском, то виновата, как ни странно, каптча! Убрал ее, и сразу форма начала работать — и ошибки выдавать и после отправки благодарить.
    Это просто вынос мозга какой-то — плагин капчи, написанный тем же автором специально для своего плагина формы, и НЕ РАБОТАЕТ! %) Жестяная жесть. А на его сайте в ФАКе написано, мол какие-то плагины конфликтуют… его же капча и конфликтует.
    Версии вордпресса и всех плагинов последние на данный момент стоят.

  48. Tod

    Данил, можно пробовать другую форму обратной связи cforms ii.

  49. Lelik

    Всем доброго! В гугле уже 3й день — без результатов! Вопрос таков… установил плагин, создал форму, поле для отправки файла. Отправляет без проблем — выводит все сообщения — работает как надо! Но — в почту приходит письмо только с именем файла, самого файла нет! в папке uploads/wpcf7_uploads — файлов тож нет! Здесь лежит .htaccess с содержимым Deny from all. Помогите разобраться, плиз! Спасибо!

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

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