Форма обратной связи на странице контакты — WordPress плагины Contact Form 7 и Cforms II

плагины WordPress для создания формы обратной связи

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

Первый, более простой, можно сказать не требующий особых настроек — Contact Form 7. Второй — Cforms II один из лучших плагинов для подобных целей. Но, как вы понимаете, требует к себе больше внимания. 

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

Для чего вообще нужна форма обратной связи на блоге?

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

Плагин Contact Form 7

Для установки и активации как обычно идем в «Плагины» → «Добавить новый» и пользуемся поиском. По данной ссылке можно скачать плагин с официального сайта и далее нажать «Загрузить».  Активируем плагин и в меню слева появляется дополнительный пункт «Контакты (CF7)». 

Заходим в эти самые «Контакты (CF7)», где мы увидим код, который  нужно будет вставить на страницу обратной связи на блоге.

настройка WordPress плагина Contact Form 7

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

стандартная контактная форма плагина CF7

Если вас что-то не устраивает, то вы можете легко создать новую контактную форму или дополнить уже имеющуюся. Для этого кликаем на «Контактную форму 1» и справа находим выпадающее меню «Сгенерировать тэг».

настройка WordPress плагина Contact Form 7

Предположим мне необходимо добавить дополнительное поле с номером телефона, я ищу в списке тэгов «Номер телефона» и вижу следующее окно:

дополнительные поля, плагин CF7

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

шаблон письма, плагин Contact Form 7

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

добавляем код плафина CF7 на страницу с контактами

Наша форма обратной связи готова.

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

плагин Contact Form 7 с модулем CAPTCHA

CAPTCHA

Плагин Cforms II

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

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

Скачиваем плагин по ссылке. После активации у нас в меню появляется новый пункт «cforms II». Отсутствие русского языка — для кого-то жирный минус, проблема легко решается русификатором.

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

шаблоны форм плагина Cforms

На примере формы по умолчанию, рассмотрим наши возможности.

форма по умолчанию плагина wordpress cforms

  • Вы можете с легкостью добавлять и удалять поля, а также менять их названия
  • Выбирать тип поля, в зависимости от того будет ли это поле ввода, текстовое  поле, выпадающее меню и т. д.
  • Важно также правильно настроить поля, будет ли поле обязательным, проверка e-mail на валидность, очищение поля после того как человек поставил на него курсор, будет ли оно недоступным для заполнения или предназначено только для чтения

Следующая вкладка — настройка сообщений, текстов и кнопок. Можете оставить как есть или изменить на свое усмотрение. Например, добавить немного юмора.

плагин cforms - настройка сообщений, текстов и кнопок

В настройке получения писем более расширенные настройки, чем в плагине Contact Form 7. Имеются такие интересные пункты как:

  • Спрятать форму после успешной отправки
  • Ограничение количества отправок формы с выводом сообщения

Во вкладке настроек писем администратору вы можете и вовсе отключить доставку писем, а также настроить шаблон писем, которые вы будете получать на e-mail.

Для создания капчи зайдите в «Общие настройки» плагина и поставьте галочку рядом с «включить CAPTCHA для залогиненных пользователей». Здесь расположены и множественные настройки!

Плагин CformsII - ставим CAPTCHA

Дальше идем в «Настройки формы», добавляем новое поле и в качестве типа поля указываем «Защита от спама (картинка)». Не забудьте сохранить изменения!

Плагин CformsII - ставим CAPTCHA

Теперь зайдите во вкладку «Внешний вид» и сможете из пары десятка стилей выбрать подходящий для своего дизайна. Если этого покажется мало, то можете отредактировать имеющийся по своему усмотрению в «Базовом редакторе CSS».

Плагин CformsII - выбор стиля

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

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

добавляем форму контакта при помощи плагина CformsII

На этом я закончу сегодняшнюю заметку, а вам желаю получать побольше отзывов! До скорых встреч на WPnotes.ru!

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям