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

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

WordPress Form Maker

Это один из самых популярных плагинов для создания форм в каталоге WordPress.org, который идет с удобной админкой, встроенным конструктором форм и множеством вариантов настроек. На момент выхода этого обзора у плагина более 1,5 млн скачиваний, 90 тыс. активных установок и средний рейтинг 4,6 звезд.

Описание Демо Скачать

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

Плагин Form Maker можно скачать либо из каталога WordPress , либо с официальной страницы плагина на Web-Dorado.com . Плагин поставляется с подробной документацией и демо версией для админки и самих форм.

Создание формы

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

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

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

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

Однако, если вы хотите создавать свои собственные формы с нуля, просто нажмите на кнопку Add New (Добавить новую), и плагин направит вас на страницу создания формы.

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

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

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

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

Настройка формы

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

Кроме того, плагин позволяет создавать свои собственные темы с нуля.

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

После того, как вы снимите флажок автоматического создания макета, вы сможете отредактировать HTML код, а также изменять положение, добавлять in-line стили оформления и так далее. Нажмите на соответствующие кнопки, чтобы добавить нужное вам поле.

Параметры формы

Здесь предусмотрен широкий спектр параметров формы, которые позволяет настраивать плагин Form Maker. Например, общие параметры формы, параметры электронной почты, способы оплаты, действия после подачи формы, JavaScript, опции MySQL и условные поля.

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

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

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

Form Maker также обеспечивает возможность интеграции с PayPal. В разделе способов оплаты можно регулировать настройки оплаты, как например включение системы PayPal, выбор валюты платежа, налоговой ставки и прочее.

Условные поля - это одна из фишек плагина Form Maker. Эта функция позволяет скрыть или отобразить поля формы в зависимости от конкретных режимов, что вы установили.

Например, можно задать условное поле, чтобы запросить название штата, если пользователь выбрал США, как свою страну. Это будет означать, что поле с названием штата не будет отображаться для других пользователей не из США:

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

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

Плагин позволяет экспортировать материалы в CSV или XML -формат для просмотра данных в Microsoft Exсel.

Form Maker позволяет блокировать IP-адреса , если вам отправляют спам через ваши формы. Для этого нужно просто перейти в раздел Blocked IPs, указать IP-адрес, который вы хотите заблокировать в соответствующее поле и нажать кнопку Добавить IP.

Вы также можете блокировать IP-адреса из раздела отправки плагина. Заблокированные IP могут быть разблокированы в любое время.

Add-ons

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

Вот полный список дополнений Form Maker:

• Import/Export
• Save Progress
• Stripe Integration
• Google PDF Integration
• Mailchimp Integration
• User Registration
• Post Generation
• Conditional Emails
• Dropbox Integration
• Google Drive Integration
• Pushover Integration
• Calculator

Итоги

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

Наличие контактной формы является необходимым атрибутом большинства сайтов. Так, они позволяют осуществлять непосредственное общение с посетителем, особенно если на сайте не представлено иных способов связи. Официальный каталог WordPress насчитывает огромное число разнообразных бесплатных плагинов, среди которых и такие, которые позволяют без каких-либо знаний языков программирования создавать красивые и функциональные формы обратной связи. Рассмотрим наиболее популярные из них.

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

Активировать промокод на 15% для Root

Contact Form 7

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

• отправка данных с помощью технологии AJAX;
• поддержка плагинов ;
• полная поддержка плагина Akismet Anti-Spam ;
• создание как простых, так и сложных форм;
• простая кастомизация как самих форм, так и всего процесса передачи данных и отправки;
• наличие специальных полей для определенной информации: телефонные номера, почтовые адреса, даты.

Ninja Forms

Ninja Forms является универсальным плагином с Drag’n’Drop -интерфейсом для создания контактных форм. В арсенале дополнения большое количество разнообразных функций, включающих AJAX handler , антиспам-модули и возможность импорта/экспорта данных. Плагин подойдет как новичку (благодаря интерфейсу Drag’n’Drop ), так и продвинутому пользователю (возможность HTML -редактирования). Ninja Forms подойдет не только для простых форм, но также и для сложных и многостраничных. Кроме того, есть возможность принимать платежи. Плагин имеет поддержку (с возможностью интеграции) многих сторонних сервисов, включая PayPal , MailChimp , Insightly и др.

Visual Form Builder

Visual Form Builder – еще один плагин с Drag’n’Drop -интерфейсом, позволяющий из одного места создавать и управлять всеми видами форм на вашем сайте. Он был специально создан с целью облегчения процесса создания форм. Так, одним кликом Вы сможете добавлять новые поля, редактировать уже существующие, а также применять анти-спам. Легко изменить порядок полей поможет технология Drag’n’Drop . Также плагин поддерживает экспорт вводимых данных в CSV -файле, настраиваемые сообщения с подтверждением, ввод множества email -адресов.

Formidable Forms

Formidable Forms – очередной плагин для создания контактных форм, который прекрасно Вам подойдет, если необходимы гибкость и возможности кастомизации. Дополнение акцентировано на создании дружественных к пользователям интерфейсов и работе с контактными формами. Работая с плагином, Вы сможете использовать кастомизируемые HTML и хуки, а также визуальный стайлер и перетаскивание. Formidable Forms , благодаря более 30 опций для полей, позволит создать совершенно разные контактные формы. Следует отметить также и возможность интеграции решения с популярными платформами MailChimp , iContact , AWeber и др. CRM . Помимо этого, в плагине есть поддержка целого списка сторонних платежных систем. Кроме того, в системе предусмотрены определители геолокаций, провайдеры тем, маркетинговые инструменты и пр.

Contact Form by BestWebSoft

Плагин Contact Form by BestWebSoft является простым в использовании инструментом для создания контактной формы. Среди преимуществ дополнения можно выделить:

• использование шорткодов для показа формы в любом места Вашего сайта;
• интеграция с плагином Captcha для борьбы со спамом;
• отправка на email копии отосланного сообщения;
• поддержка многоязычности для полей форм.

Contact Form Builder WordPress Plugin by vCita

Плагин Contact Form Builder WordPress Plugin by vCita , благодаря специальной функции Active Engage , позволит создать уникальный вид для Вашей контактной формы. Благодаря этому модулю, контактная форма предварительно загружается на каждую страницу и показывается в ее правом нижнем углу. Появление формы можно инициировать с помощью одного клика. Также остается возможной привычная интеграция формы в записи, страницы или виджеты.

Forms – Form builder and Contact form

Главная особенность бесплатного плагина Forms – Form builder and Contact form – наличие большого количества предустановленных шаблонов форм, что делает его идеально подходящим для начинающих пользователей. Кроме того, решение поставляется с Drag’n’Drop -интерфейсом и кастомайзером полей, что с легкостью позволит создать сложные смешанного типа контактные формы.

Contact Form by WPForms

Contact Form by WPForms является облегченной версией мощного модуля WPForms , обеспечивая создание как простых, так и более сложных контактных форм. Плагин использует привычный Drag’n’Drop -конструктор. По заявлениям разработчиков, плагин расценивается как один из самых быстрых в своей сфере и дружелюбным в плане SEO . Стоит отметить еще одну особенность Contact Form by WPForms – наличие предустановленных шаблонов форм.

Pirate Forms

Pirate Forms – плагин с интуитивно понятным интерфейсом, позволяющий создавать простые контактные формы. Решение, в силу своей простоты, не обладает продвинутым функционалом, таким как создание форм подписки или интеграция услуг оплаты.

Form Maker by WD

Бесплатное решение Form Maker by WD , благодаря 11 предварительно установленных шаблонов и 4 макетов, обеспечит простое создание формы контактов в течение нескольких минут. Плагин имеет полную поддержку Drag’n’Drop , пользовательский редактор CSS , а также поддержку нескольких страниц.

Breezing Forms

В арсенале бесплатного плагина Breezing Forms доступно большое количество разнообразных функций, среди которых можно выделить следующие:

• многостраничные формы;
• создание полей с различными условиями без знания языка JavaScript ;

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

Contact Form Manager

Contact Form Manager – довольно популярный среди WordPress-пользователей плагин контактных форм, позволяющий создавать несколько пользовательских форм и размещать их на Вашем сайте, используя шорткоды. Дополнение включает в себя возможность отправки автоматического ответа. Поддерживает все наиболее распространенные элементы формы, имеет встроенную защиту от спама и вообще включает в себя все необходимое для создания веб-формы.

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

Мне нравится Не нравится

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

stepFORM

stepFORM - WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.

uCalc

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

Contact Form 7

Contact Form 7 - один из самых популярных плагинов для создания форм на WordPress. С помощью этого плагина вы можете очень гибко настраивать содержимое форм и настраивать отправку данных на почту. Формы включают в себя ajax отправку, а также Captcha и Akismet против спама.

WPForms

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

Ninja Forms

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

Form Maker

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

Caldera Form

Caldera Form - это бесплатный и мощный плагин для WordPress, который создает адаптивные формы с помощью простого визуального редактора. Плагин имеет множество бесплатных удобных дополнений как для начинающих, так и для веб-разработчиков. Антиспам, AJAX, электронные письма с уведомлениями и отслеживание записей в базе данных включены по умолчанию.

Visual Form Builder

Visual Form Builder - это плагин, который позволяет вам создавать и управлять всеми видами форм для вашего сайта в одном месте. Создание полнофункциональной контактной формы занимает всего несколько минут, и вам не нужно писать ни капли PHP, CSS или HTML.

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

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

В этой статье вы узнаете:

Плагин обратной связи для WordPress

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

После скачивания распакуйте архив и скопируйте файлы на сервер в папку /wp-content/plugins/ . После активации плагина переходите к его настройкам в панели администратора. Справа в меню появится пункт «Contact». Значит, плагин обратной связи WordPress установлен и запущен. Для установки стандартной формы CF7 на сайт достаточно скопировать код «форма для контакта», который вы увидите в меню Contact. Если вы хотите настроить форму по своему усмотрению, перейдите по ссылке «Добавить новую».

В результате появится несколько полей:

1. Название формы;
2. Форма обратной связи;
3. Почтовые настройки;
4. Дополнительная форма обратной связи;
5. Сервисные сообщения;
6. Дополнительные настройки.

Пункты 2 и 4 позволяют воспользоваться конструктором для разных видов форм. Например, так вы можете создать всплывающую форму обратной связи WordPress. После заполнения всех полей, можно получить готовый код для страницы контактов. Настройка доп. формы (№4) помогает получать не только письма на почту, но и, например, смс-сообщения на указанный телефон.

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

Как вариант, можете еще испробовать плагин Cforms , он более сложен, но и функций у него больше.

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

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

Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.

Вот код, который нужно вставить в созданный вами файл php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$name \n E-mail: $email \n Тема: $subject \n Текст: $body " ; $send = mail ($address , $subject , $ message, "Content-type:text/plain; charset = UTF-8\r \n From:$email " ) ; if ($send == "true" ) { echo "Спасибо, ваше сообщение успешно отправлено!" ; } else { echo "Ошибка, сообщение не отправлено!" ; } } else { echo "Вы заполнили не все поля, необходимо вернуться назад!" ; } ?>

Для своего блога вам нужно будет изменить url в первой строке и в строке address, и по желанию название полей Имя, Тема, Текст. Также по своему усмотрению вы можете изменить текстовые сообщения, которые будет видеть пользователь после отправки, либо если сообщение не отправлено.

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

Для этого можно использовать такой код:

1 2 3 4

<h2 > Форма обратной связи</ h2 > <form name = "Form1" action = "/wp-content/themes/lime/contact.php" method = "post" > Ф.И.О.<input class = "input" name = "email" type = "text" style = "width:31%" / > E-mail<input class = "input" name = "subject" type = "text" style = "width:31%" / > ТемаТекст сообщения: <textarea name = "body" cols = "1" rows = "5" style = "width:98%" / > </ form >

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

Ф.И.О. E-mail ТемаТекст сообщения:

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

Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.

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

Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.wpcf7-form input[ type= "submit" ] { background : #63c6ae ; /* цвет фона кнопки Отправить*/ border : 0 ; width : 120px ; /* ширина кнопки Отправить*/ color : #fff ; /* цвет текста кнопки Отправить*/ height : 30px ; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display : block ; margin-top : 5px ; /* верхний отступ от поля Текст сообщения*/ background : #fff ; border : 1px solid #63c6ae ; /* граница поля Текст сообщения*/ width : 400px ; color : #222 ; padding : 10px 10px ; } .wpcf7-form input[ type= "email" ] , .wpcf7-form input[ type= "text" ] { background : #fff ; border : 1px solid #63c6ae ; /* граница текстовых полей*/ width : 400px ; color : #222 ; height : 30px ; /* высота текстовых полей*/ padding : 0 10px ; /* внутренние границы текстовых полей*/ }

Wpcf7-form input { background: #63c6ae; /* цвет фона кнопки Отправить*/ border: 0; width: 120px; /* ширина кнопки Отправить*/ color: #fff; /* цвет текста кнопки Отправить*/ height:30px; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display: block; margin-top: 5px; /* верхний отступ от поля Текст сообщения*/ background: #fff; border: 1px solid #63c6ae; /* граница поля Текст сообщения*/ width: 400px; color: #222; padding: 10px 10px; } .wpcf7-form input, .wpcf7-form input { background:#fff ; border: 1px solid #63c6ae; /* граница текстовых полей*/ width: 400px; color: #222; height:30px; /* высота текстовых полей*/ padding: 0 10px; /* внутренние границы текстовых полей*/ }

В результате у меня получилось вот так:

Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:

Как видите, в создании обратной связи на WordPress как с плагином, так и без него, нет ничего сложного.

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

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

Итак, для решения поставленной задачи мы будем использовать плагин формы обратной связи, который называется Contact Form 7. Не знаю, почему автор выбрал именно такое название, точнее порядковый номер в названии, возможно, это его счастливое число

Как бы то ни было, плагин Contact Form 7 для WordPress — это один из популярнейших плагинов как среди плагинов для создания формы обратной связи WordPress, так среди любых других. И действительно, более миллиона установок — цифра говорит сама за себя. Оценка плагина достаточно высока — 4,5 звезды, что отметает все сомнения по его использованию. К тому же плагин уже русифицирован, поэтому вам не придется переводить поля формы и сообщения на русский язык.

УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS

Ну что же, давайте пройдем стандартный процесс установки. Кстати, если вы никогда еще не устанавливали плагины, тогда обязательно ознакомьтесь со статьей «WordPress. Установка плагинов», в которой найдете все возможные способы установки плагинов.

В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7″. Первый найденный плагин формы обратной связи — нужный нам вариант.

Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.

Первый пункт Формы содержит список текущих форм на вашем сайте и позволяет управлять ими: редактировать или удалить. Готовая форма представляет из себя ни что иное, как шорткод (короткий код), который можно вставить в запись, страницу или даже виджет. Этот шорткод будет развернут на странице в полноценный код формы. В плагине уже предустановлен пример формы обратной связи, давайте скопируем ее шорткод и вставим его, к примеру, на страницу контактов. После этого перейдем на страницу и увидим на ней уже готовую рабочую форму обратной связи WordPress.

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

НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS

Ну что же, мы использовали уже готовую форму. А как насчет ее изменения? Возможно ли это и легко ли сделать это? Ответ — да — на оба вопроса. К примеру, я хочу убрать из формы поле Тема, как это сделать? Перейдем к редактированию формы в меню плагина Формы и увидим следующую картину.

Для того, чтобы убрать тему, достаточно убрать 2 соответствующие строки, обведенные рамкой на скриншоте. Здесь интересна вторая строка: . Как вы уже догадались, это ни что иное, как шорткод, который и разворачивается в поле формы. В данном случае это поле типа text со значение атрибута name — your-subject.

Если, к примеру, речь идет о текстовой области ниже, то ее шорткод выглядит так: . Здесь textarea — это тег textarea формы, а your-message — имя данного элемента формы. Все просто.

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

Ну а если все же возникнут сложности, тогда вам поможет документация к плагину , где можно найти множество примеров.

Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.

После создания списка с необходимыми вариантами в шаблоне формы появится новое поле.

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

Давайте попробуем заполнить и отправить форму. Форма отправляется, но oops… в полученном письме нет выбранного варианта темы. Как так? Как исправить это недоразумение? Не волнуйтесь, исправляется это просто. Идем в редактирование формы и переключаемся на вкладку Письмо.

В этой вкладке настраивается формат письма, который приходит на email из формы обратной связи. На скриншоте в первой обведенной области мы видим список шорткодов (имен полей формы), которые используются в нашей форме обратной связи. Именно значения этих полей и подставляются в шаблон письма. Мы видим на второй отмеченной области, что для поля Тема осталось имя из прежнего поля. Также в поле Message Body указан прежний шорткод. Давайте заменим их соответствующим тегом из списка выше — . К слову, здесь же можем изменить и email получателя, он записан в поле To. Также можем изменить и прочие настройки ниже, все они подписаны и понятны.

Сохраняем изменения и пробуем отправить повторно письмо. Теперь форма обратной связи работает, как и положено, — на email приходит письмо с выбранной темой.

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

ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ

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

Здесь мы можем настроить сервис reCAPTCHA от Google. Для этого вам нужно будет перейти по указанной ссылке на соответствующий сервис Гугла и далее следовать инструкциям, чтобы получить необходимый ключ и интегрировать каптчу с вашим сайтом.

Для тех же, кто не хочет использовать сервис reCAPTCHA, плагин предлагает защиту от роботов в виде поля вопрос/ответ. Для добавления этого поля в шаблоне формы кликаем по кнопке quiz и заполняем форму точно так же, как мы это делали для выпадающего списка. Вопрос и ответ вводим через вертикальную линию.

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

Как видим, сделать форму обратной связи на WordPress — проще простого. Плагин Contact Form 7 позволяет построить форму практически для любых целей. Это может быть и форма обратной связи, и форма какой-нибудь заявки и т.д. Да, как я и говорил выше, форму можно вставить не только в запись или страницу, но и в виджет сайдбара. Для этого достаточно создать виджет Текст и вставить в него шорткод нужной формы. Ну а новые формы, как вы догадались, можно создавать в меню плагина Добавить новую.

На этом у меня все. Поиграйтесь с плагином Contact Form 7 для WordPress, попробуйте создавать различные формы, поверьте, там есть еще масса возможностей для исследования. Если же у вас возникнут вопросы, тогда я, как всегда, жду их в комментариях. Удачи!