Как сделать форму обратной связи на WordPress: плагин Contact Form 7

Здравствуйте, дорогие друзья! Читал сегодня ваши комментарии и в одном из них увидел совет установить форму обратной связи на страницу контактов. Вот и решил написать пост на эту тему.

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

Итак, переходим в раздел «Плагины — Добавить новый» и пишем в поиск название «Contact Form 7». Как обычно, первый плагин в результатах поиска — это тот, который нам нужен. Устанавливаем плагин на блог и активируем его.

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

По умолчанию уже существует одна форма обратной связи, которая появляется сразу после установки плагина Contact Form 7. Мы не будем ее трогать, а сделаем новую с нуля, поэтому сразу жмем кнопку «Добавить новую».

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

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

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

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

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

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

Итак, начинаем сверху. В первую очередь мы вводим название нашей формы обратной связи для удобства ее нахождения (в том случае, если форм будет несколько). Свою я назову «Форма страницы контактов».

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

• текстовое поле;
• e-mail;
• URL;
• номер телефона;
• число (spinbox или slider);
• дата;
• текстовое поле (еще одно);
• выпадающее меню;
• checkboxes;
• radio buttons;
• acceptance;
• вопрос;
• CAPTCHA;
• отправка файла;
• кнопка отправки письма.

Добавим в нашу форму обратной связи, к примеру, поле ввода URL сайта. Для этого нажимаем «Сгенерировать тэг» и выбираем из выпадающего списка пункт «URL». У нас откроется следующее окошко настроек:

Оставим все поля без изменений, скопируем код поля [url url-55] в буфер обмена и вставим его в шаблон формы так, как это показано ниже.

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

Я открываю страницу «Контакты» своего блога и дописываю в нее текст о возможности отправки письма мне на почту с этой страницы.

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

В случае успешной отправки письма мы видим вот такое сообщение:

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

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

Подписывайтесь на обновления блога Good SEO и до новых встреч!