• Дополнительно

Формы для Вордпресс — быстро, просто, эффективно! WordPress. Форма обратной связи Простая форма обратной связи wordpress

< div class = "col-md-4" > [ submit class : btn - flat class : col - xs - 12 "Заказать" ] < / div > < / div >

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

Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂

Часть работ мы сделали, теперь переходим к следующему этапу.

Настройка почтового адреса для приема заявок

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

Нам необходимо нажать на большую вкладку «Письмо». Она будет второй после Шаблона формы.

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

Теперь по полям:

• To (Куда будет отправляться заявка, в моем случае, это мой адрес почты, можно указывать несколько адресов, куда присылать заявки)
• From (Поле Откуда, т.е будет подставляться значение, что заявка идет с моего студийного сайта)
• Тема (Служит для определения, с какой формы приходит заявка, в нашем случае это заявка с формы продвижения сайта).
• Additional Headers (Дополнительные заголовки, их не трогаем, они нужны для корректности отправки формы)
• Message Body (Тело сообщения, здесь вы указываете, От кого пришло письмо и с какого адреса, например: «От: Ивана» «Адрес почты: vasya @ mail . ru »)
• File Attachments (Приложения к файлу, не трогаю)

Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.

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

• При успешной отправки сообщения: «Ваше сообщение было отправлено успешно. Спасибо.»
• При некорректной отправке сообщения с формы: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
• Ошибка заполнения: «Ошибки заполнения. Пожалуйста, проверьте все поля и отправьте снова.»
• Отправленные данные определены как спам: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
• Некоторые условия должны быть приняты: «Пожалуйста, примите условия для продолжения.»
• Некоторые поля должны быть заполнены: «Пожалуйста, заполните обязательное поле.»
• Превышена длина символов в поле: «Указано слишком много данных.»
• Недостаточная длина символов в поле: «Указано слишком мало данных.»
• Неверный формат даты: «Формат даты некорректен.»
• Ранняя дата в минимальном пределе: «Указана слишком ранняя дата.»
• Поздняя дата в максимальном пределе: «Указана слишком поздняя дата.»
• Неудачная загрузка файла: «Не удалось загрузить файл.»
• Неразрешенный тип файлов: «Этот тип файла не разрешен.»
• Загрузка слишком большого файла: «Этот файл слишком большой.»
• Загрузка файла не удалась из-за ошибки PHP: «Отправка файла не удалась. Возникла ошибка.»
• Числовой формат, введенный отправителем, неверен: «Числовой формат некорректен.»
• Число меньше минимального предела: «Это число слишком мало.»
• Число больше максимального предела: «Это число слишком велико.»
• Отправитель не ввел корректный ответ на вопрос: «Вы ввели некорректный ответ.»
• Адрес e-mail, введенный отправителем, неверен: «Некорректный e-mail.»
• URL, введенный отправителем, неверен: «Некорректный URL.»
• Номер телефона, введенный отправителем, неверен: «Некорректный номер телефона.»

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

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

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

Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:

Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:

Супер! Теперь давайте попробуем отправить форму ничего в нее не заполнив. И вот, что мы увидим.

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

Нажимаем отправить и вот, что пишет наша форма:

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

Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.

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

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

Делаем всплывающую адаптивную контактную форму обратной связи на WordPress

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

На следующем шаге я расскажу, какие изменения нужно внести, чтобы наша форма стала всплывающей и адаптивной. Подобную реализацию я сделал на главной странице своего студийного сайта. Для этого перейдем в шаблон index.php, который находится в разделе «Внешний Вид — Редактор». Мы будем работать только с кодом, вручную.

Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:

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

Заказать

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Заказать< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > & times ; < / span > < span class = "sr-only" > Close < / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Оставитьзаявку< / h4 > < / div >

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

Если ваш сайт на 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.

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

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

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

Где найти готовые шаблоны или заготовки

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

Форма для возможности обратной связи представляется одной из важных частей wordpress сайта. Без нее упускается возможность всегда быть на связи с посетителями и клиентами. Помимо этого без этой примочки возрастает вероятность потери потенциальных покупателей.

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

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

1. Contact form 7
2. Fast Secure Contact From.
3. Contact Form by Contact ME
4. FormCraft
5. Visual Form Builder
6. NForms
7. Gravity Forms
8. Ninja Forms
9. Ninja Kick

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

Contact form 7

Cf7 сегодня это самый востребованный плагин для вордпресс.

Преимуществами у него являются:

1. AJAX-отправка сообщений.
2. Встроенная капча.
3. Специальный спам-фильтр.
4. Позволяет загружать файлы.

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

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

Fast Secure Contact From

Fast Secure Contact From это нестандартная разработка, имеющая высокую популярность. В основном он используется владельцами блогов для создания и добавления контактной формы на сайты.

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

Положительными сторонами плагина являются:

1. Не дает регистрировать профиль простым пользователям.
2. Предоставляет возможность формирования графика, онлайн-встреч.
3. Поддерживает несколько адресов электронной почты.

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

Contact Form by Contact ME

Contact Form by Contact ME – это доступный конструктор, имеющий в своем арсенале стандартный набор основных функций. Он работает только после прохождения регистрации на сайте. Эта процедура проста и бесплатна. Разработчики считают, что он лучше других раскрученных плагинов, даже CF7.

Этот конструктор имеет множество нужных функций:

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

Отталкивает владельцев веб-ресурсов по большей степени от использования такой разработки, только наличие регистрации на сайте Contact me.

FormCraft

Плагин FormCraft изначально создавался и поддерживался только как премиум приложение. Не так давно его создатели сделали и бесплатную версию – FromBuilder, доступную каждому интернет-пользователю.

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

Visual Form Builder

Еще один конструктор Visual Form Builder – разработка, которая позволяет создавать и осуществлять контроль над всеми формами из одного места. При помощи всего одного клика вы сможете управлять полями, антиспамом и реорганизовывать ранее созданные формы. Звучит заманчиво, правда?

Плюсами этого плагина являются:

• Возможность смены порядка элементов обычным перетаскиванием.
• Способность экспортировать данные в файл CSV.
• Отправка контролируемых сообщений с подтверждением.
• Возможность указания множества url адресов.

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

nForms

nForms напоминает достаточно простой шаблон, с Ajax отправкой. Созданная форма будет отображаться с помощью специального шорткода или виджета. Это довольно интересный вариант, но подходит не для любого сайта (нужно сопоставлять результат с вашим макетом). Это приложение предоставляет вам больше, чем просто контактная форма. Заинтересовались? Тогда проведите эксперимент, быть может, такая форма станет своеобразной фишкой вашего сайта.

Gravity Forms

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

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

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

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

Mapped Contact Form Pro WordPress

Дополнение Mapped Contact применяет немного измененный процесс для отображения формы на сайте. Это отличное решение для крупной компании или сети фирм, потому что может обозначать филиалы на карте гугл. Получается, что это довольно полезный плагин, вы согласны?

Важным преимуществом является возможность указания расположения каждого места, рассматриваемого на сайте. Достаточно всего лишь поместить шорткод(short code) в любую запись или любое место на странице. Сделать это несложно, поэтому с такой процедурой справится любой заинтересованный человек.

Ninja Forms

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

Положительными сторонами такой разработки можно назвать:

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

Отрицательными сторонами будут:

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

Ninja Kick

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

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

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

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

Теперь давайте посмотрим, как именно создаются эти формы на примере приложения CF7:

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

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

Вот и разобрались с тем, как сделать форму через приложение Contact Form 7. Несложно, правда?

Имею желание еще сказать пару слов, о защите вашего почтового ящика от наплыва спамеров: «Чтобы к вам на электронку не приходил спам, нелишним будет добавить в форму обратной связи капчу. Она устанавливается с помощью функции «генерации тега». А для ее функционирования потребуется дополнение Really Simple CAPTCHA. Закончив настраивать дополнение, вы сможете забыть о проблеме со спамом.

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

И в завершение, можно сказать, что форма готова, остается лишь редактировать сообщения по мере необходимости.

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

В заключение статьи давайте подведем итоги:

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

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

Ну все, пока-пока.

С уважением, Елена Изотова.