Как настроить обратную связь на wordpress. Лучшие WordPress-плагины для создания контактных форм. Зачем вам нужна контактная форма WordPress

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

Форма обратной связи WordPress плагином Contact Form 7

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

• Адрес почты
• По желанию телефон
• Текст сообщения
• Капча

Добавить капчу reCaptcha

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

CF7 в поиске

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

Ссылка на рекапчу

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

Привязка captcha к сайту

Копируем данные для капчи, оба ключа.

Ключи доступа

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Интеграция

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Сохранение настроек

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

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Стираем стандартные надписи

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

Поле текст

Появиться всплывающее окно, настраиваем по потребностям.

Генератор тегов

Тип определяет обязательно ли посетителю заполнять поле, я поставил да

Имя не меняем это уникальный идентификатор

Значение по умолчанию, ввел фразу, которую увижу внутри

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

Не советую пользоваться полем Akismet

Для добавления стилей вводим class или id, сделал pole-imya

Вставляем тег в общее поле

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

Генератор почты

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

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Кнопки телефон и текстовая область

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод помещаем под остальными элементами.

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

Кнопка отправить

В результате получился такой код.

Финальный код CF7

Настройка отправки письма

Изменение параметров письма

Теги полей созданные ранее

Адрес почты куда будут приходить письма

От кого и тема, заполняйте по желанию

Дополнительные заголовки, полностью очищаем

Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.

Внизу нажимаем Сохранить

Сохранение

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

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Шорткод

Идем в любую запись и вставляем.

Помещаем shortecode в страницу

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

Финальный вариант

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы , читайте по ссылке.

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Оборачиваем в div

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Flex-form{display:flex;} @media only screen and (max-width: 655px){.flex-form{display:block;}}

Прописываем стили

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

Всплывающая форма обратной связи

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

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Поиск элемента в elementor

Элементор обработал запрос

Используем настройку темы

В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root . Перехожу в создание страницы, далее смотрим на снимок.

Надстройка в ROOT

• Прописываем текст [ contactform ] (без пробелов внутри скобок)
• Жмем предпросмотр

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

ROOT работа встроенной функции

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Используем виджет текст

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

Форма в виджете

Обратная связь без плагина

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

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться .

/*код обратной связи*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() { ob_start(); ?>

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

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

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

1 2 3 4

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

Форма обратной связи Ф.И.О. 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 при помощи плагинов, а так же без них с отправкой на почту.

Но еще затронем немного теории, если кому-то не интересно, то сразу можно перейти к установке формы на WordPress:

Теория: Зачем нужна форма обратной связи?

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

Но зачем мне устанавливать какую-то форму, если можно просто написать свой email-адрес? — Такой вопрос возникает у новичков, которые еще не успели набрать популярность.

Минусы email-адреса в контактах:

Приходит много спама от ботов;

Редко пишут посетители;

Нет пользы от страницы.

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

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

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

Форма обратной связи WordPress при помощи плагина

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

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

1.

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

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

2. — всплывающая форма обратной связи

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

3. Contact Form 7 — худший из лучших

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

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

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

Онлайн генератор формы обратной связи

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

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

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

А вот уже за 5$ можно получать 1000 писем, встроена система антиспама, добавлено дисковое пространство, формирование отчетов и с легкость можно подключить сервис рассылок.

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

Видеоуроков не нашел, а вот хорошая инструкцию по установке — есть!

Php форма обратной связи без плагинов

Что потребуется для создания собственной формы обратной связи? Всего лишь выполнить 4 простых действия:

Создать php файл;

На странице контактов (в формате html) написать несколько строк;

Подключить гугл библиотеку (если форма не работает);

Если она не красивая — добавить стили.

Мне не хотелось подробно описывать все на сайте, поэтому я снял видео и сделал архив с нужными файлами на Яндекс диске. Архив файлов можно скачать — .

Видео инструкция по созданию формы обратной связи без плагинов

У кого-то не работает форма? Тогда вам необходимо в файл header.php вставить: (подключение гугл библиотеки). Надеюсь, что инструкция предельно понятная и простая для каждого. Так же в архиве вы найдете файл со стилями. Просто копируете все строчки и вставляете в файл style.css в конце.

Внимание : бесплатный хостинг не поддерживает функцию отправки писем. А так же использование тестового режима.

Вместо выводов

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

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

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

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

Лучшие плагины WordPress для построения форм 2018

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

Price: Free

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

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

Ключевая особенность:

• Простота настройки.
• Настраиваемые сообщения по умолчанию.
• Легко определенные настройки почты.

WPForms

Price: Free

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

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

Дополнения, такие как интеграция с MailChimp, AWeber и PayPal, доступны в планах с более высоким уровнем WPForms.

Ключевая особенность:

• Мгновенные уведомления.
• Оптимизированная система управления вводом.
• Умная условная логика.

Ninja Forms

Price: Free

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

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

Ключевая особенность:

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

Form Maker

Price: Free

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

Кроме того, существует множество функций премиум-класса (таких как интеграция с PayPal) и множество платных дополнений, которые позволяют вам адаптировать этот плагин в соответствии с вашими потребностями, такими как интеграция MailChimp и Dropbox и условная рассылка.

Ключевая особенность:

• 41 настраиваемая тема.
• Управление представлением формы.
• Многостраничные формы.

Fast Secure Contact Form

Для плагина с бесплатной контактной формой Fast Secure Contact Form довольно надежный. Вы можете легко создавать и редактировать формы в интерфейсе drag-and-drop, а также добавлять или удалять столько полей, сколько хотите.

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

Ключевая особенность:

• Легко настраиваемое редактирование формы.
• Возможность отправлять письма с подтверждением.
• Вы можете перенаправить посетителей практически на любой URL.

Price: Free

С помощью нескольких вариантов макета и 18 типов полей Visual Form Builder позволяет вам быстро и легко создавать профессионально выглядящие формы. Этот плагин может быть настроен таким образом, чтобы заявки на формы отправлялись на несколько электронных писем, а также возможность отправлять индивидуальные почтовые квитанции каждому пользователю.

Кроме того, вы можете размещать несколько форм на одной странице или странице и дублировать формы одним щелчком мыши. Visual Form Builder автоматически сохраняет записи в форме в базе данных WordPress и позволяет вам управлять данными непосредственно на панели инструментов WordPress.

Ключевая особенность:

• Интерфейс перетаскивания.
• Возможность экспорта записей в файл CSV.
• Несколько вариантов размещения полей.

Form Builder

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

С премиальной версией вы получаете 37 тем, основанных на разных цветовых схемах, возможность добавления раздела материалов и возможность экспорта представленных данных в формат CSV или XML.

Ключевая особенность:

• Параметры электронной почты для администраторов и пользователей.
• Интеграция с Google Maps .
• Разнообразие вариантов перенаправления.

Formidable

Price: Free

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

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

Существует также ряд платных дополнений, таких как интеграция с MailChimp и AWeber.

Ключевая особенность:

• Интерфейс перетаскивания.
• Почти неограниченные уведомления по электронной почте.
• Импорт и экспорт форм с использованием формата XML.

Pirate Forms

Price: Free

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

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

Ключевая особенность:

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

Ultimate Form Builder

Price: Free

Ultimate Form Builder — это плагин WordPress Form Premium для создания неограниченных гибких форм контактов. В этом плагине есть 10 красиво оформленных шаблонов форм. Это простой в использовании плагин, с помощью которого можно создавать простые и сложные формы контактов, не касаясь одного кода.

Ultimate Form Builder поддерживает как одношаговую, так и многошаговую поддержку в соответствии с вашими потребностями. С помощью этого плагина можно легко создавать различные типы контактных форм, таких как «Связаться с нами», «Выбор», «Призыв к действию», «Опрос», «Котировка», «Запрос» и т. Д. Он имеет поддержку условной логики, которая включает в себя отображение show hide logic, логику электронной почты и логику перенаправления. Бесплатная версия плагина доступна в каталоге плагинов WordPress.

Everest Forms

Price: Free

Everest Forms — это легкий и расширяемый инструмент для форматирования и форматирования, который легко и быстро создает любой тип формы. Этот плагин предлагает поддержку нескольких столбцов, Google re-captcha для защиты от спама, поддержку нескольких получателей электронной почты, массив полей форм, успешную отправку электронной почты и многое другое. Не только это, с помощью формы Everest вы можете выбирать из нескольких шаблонов дизайна форм и просматривать записи в форме непосредственно с панели управления. Плагин также имеет намного больше функций с большой полезностью, но особенностью, которая выделяется прежде всего, является ее легкий интерфейс перетаскивания, который делает процесс создания форм кусочком торта.

weForms

Price: Free

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

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

Ключевая особенность:

• 18+, чтобы увеличить функциональность.
• Shortcodes, поместите форму в любом месте.
• Отзывчивый дизайн , может использоваться на любых портативных устройствах.
• Перетащите , используйте его с предварительным просмотром в реальном времени.
• Легкий интерфейс , мощный и простой пользовательский интерфейс.
Easy Contact Form

Плагин GrandWP Forms обладает широким диапазоном гибкости. Вы можете сделать формы точно такими, как вы хотите, чтобы они появлялись на Front-End без найма разработчика. Это 100% отзывчивый и высокопроизводительный плагин. Используйте плагин Form builder для создания различных форм для отправки пользователям или просто предоставления подробной дополнительной информации о продукте / услугах или о веб-сайте в целом.

Конструктор форм GrandWP чрезвычайно прост в использовании. Плагин Forms имеет интуитивно понятный и простой интерфейс, который позволяет создавать удивительные формы за несколько кликов. Он имеет современный и гибкий дизайн, который сделает ваш сайт профессиональным. Плагин Forms позволяет настраивать все уровни каждого отдельного поля, которые вы создаете, чтобы он выглядел точно так, как вы хотите. После создания проекта форм GrandWP вы можете изменять / настраивать его, когда захотите, и, тем не менее, хотите. В плагине форм-блогов также есть опция «перетаскивания», которая позволяет изменять порядок полей одним щелчком мыши.

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи , или как еще говорят в народе «контактной формы» .

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

Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂

Создание контактной формы в WordPress

В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ!!!

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

1. Установите и активируйте плагин Contact Form 7 . Как устанавливать плагины вы можете .

2. После активации перейдите в Contact Form 7 -> Формы .

3. В открывшемся окне копируем строчку с кодом вставки.

4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить» .

Вот такой результат добавления контактной формы по получим:

Готово! Вы установили рабочую форму обратной связи на свой сайт!

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

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

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

• Имя (Обязательное поле для заполнения)
• Фамилия
• Телефон (Обязательное поле для заполнения)
• Поле с выбором удобного времени для звонка

После того как мы определились с полями, переходим к созданию формы:

1. Переходим в Contact Form 7 -> Добавить новую.

2. В открывшемся окне нажимаем кнопку «Добавить новую» . Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским .

3. После нажатия кнопки вы перейдете на страницу, на которой находится редактор формы .

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

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

4. После того, как мы поверхностно ознакомились с структурой редактора, переходим к созданию нашей новой формы. Для этого нам нужно УДАЛИТЬ из шаблона формы все строчки кроме кнопки «Отправить», а в шаблоне письма удалить все полностью. После удаления у вас должно получится так:

5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия , Телефон (обязательное), Удобное время звонка .

Начинаем с создания поля для ввода имени , которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле .

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

6. После того, как мы добавили поле для ввода имени, нажимаем «Сгенерировать тег» -> Текстовое поле и по аналогии создаем поле Фамилия и Телефон , копируя и вставляя код в шаблон формы и шаблон письма. Отличие только в том, что для поля Фамилия ставить галочку для обязательного заполнения не нужно.

После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:

7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню» .

В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.

В итоге у вас должно получиться вот так:

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

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

ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля .

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

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

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

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

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

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе "контактной формы". Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7. Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным:) Создание контактной формы в WordPress В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин…

ОбзорПроголосуйте за урок

100

Оценка

Итог: Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!