Плагин обратной связи для wordpress на русском. Форма обратной связи WordPress с помощью плагина и без него

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

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

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

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

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

Для начала вам нужно установить Contact Form 7 себе на сервер. Как это сделать мы подробно рассказывали в статье.

Настройка Contact Form 7

Итак, после установки в административной панели у вас появится новое меню под названием «Contact Form 7».

Нажмем «Добавить новую». В открывшемся окне нам представляется возможность выбора используемого языка интерфейса. По умолчанию стоит «Русский».

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

Теперь давайте перейдем к следующему полю под названием «Шаблон формы».

В нем мы видим два окна, в первом (1) мы формируем внешний вид нашей формы, во втором (2) находится генератор тегов, при помощи которых можно вставить дополнительные поля.

По умолчанию в первом окне содержится пять полей: «Ваше имя», «Ваш e-mail», «Темы», непосредственно «Сообщение» и кнопка «Отправить».

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

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

Кстати, чуть не забыл в некоторых полях вы видите символ звездочка «*». Он означает, что данный пункт обязателен для заполнения.

Добавление нового поля в форму

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

В шаблоне формы справа нажимаем «Сгенерировать тег» и выбираем «Номер телефона».

В появившемся меню нам представляется возможность настроить данное добавление более полно.

Если вы решите, что данный пункт требует обязательного заполнения и в нем нужно проводить проверку (чтобы введённое значение было корректным), то поставьте галочку перед «Обязательное поле».

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

Также вы можете изменить размер и максимальную длину текстового поля.

Еще вы можете показать подсказку по заполнению посетителем данного поля путем активации чек бокса «Использовать как заполнитель?» и задания «Значения по умолчанию».

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

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

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

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

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

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

Нам остается перейти во вкладку «Страница» в административной панели WordPress, найти (или создать) «Обратная связь» и нажать «Изменить».

В открывшемся окне вставляем код обратной связи и нажимаем «Обновить».

Вот и все, форма обратной связи создана.

Установка капчи

Да, и не забудьте установить капчу, дабы избежать захламления своего ящика. Она устанавливается также при помощи генерации тега, только для ее работы потребуется установить плагин Really Simple CAPTCHA.

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

Видео «Как сделать форму обратной связи WordPress. Плагин Contact Form 7»

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

Также напоминаю, что на нашем youtube-канале мы выкладываем видео из личной жизни. Подписывайтесь и будем дружить 🙂

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

Напишу вам конкретный пример, который показывает, как важна обратная связь в какой-бы то ни было ситуации. Вот, например, сегодня мне пришло СМС уведомление от моего сотового оператора Beeline, что номер заблокирован. Проверив баланс, я был удивлён, ведь там было достаточно средств для звонков. Думая, что это очередной развод, я решил позвонить в службу поддержки. Телефон их колл-центра мне не удалось вспомнить (т.к. не обращался к ним лет пять уже), и было принято решение поискать информацию у них на сайте.

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

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

С уважением, Калмыков Антон

Я думаю не существует такого сайта где не требовалось бы настроить контакт с посетителями. Обычно на сайтах есть такие страницы как: «О нас», «Свяжитесь с нами», «Обратная связь», «Служба поддержки» и т.д. Наличие такого оборота обращения к посетителям вашего ресурса благоприятно сказывается на вашем имидже. К тем кто предоставляет о себе информацию первым, а потом только начинает с вами диалог, доверия гораздо больше чем к компаниям «Из неоткуда» и «Непонятно куда». Поэтому форма обратной связи WordPress так важна, и обязана присутствовать на сайте.

форма обратной связи WordPress, методы создания.

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

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

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

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

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

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

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

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

Зайти в его интерфейс можно с . После того как вы зайдете в данное меню, вам откроется такое диалоговое окно:

Для внесения стандартной формы обратной связи на WordPress вам нужно лишь скопировать код и вставить в нужное место страницы. Если вас не устраивает данная форма вы всегда можете её подредактировать под себя нажав «изменить» под названием формы, в нашем случае это «Контактная форма 1».

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

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

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

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

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

Надеюсь наши вам полезны, оставайтесь с нами и вы узнаете еще очень многое.

Форма обратной связи – один из важнейших элементов на сайте или блоге на WordPress

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

Что необходимо для создания обратной связи на WordPress?

Обратная связь может быть создана различными способами. Лучшее решение – с помощью плагина. Самыми востребованными являются:

  • Contact Form 7;
  • Usernoise;
  • SimpleModal Contact Form;
  • Custom Contact Forms;
  • Slick Contact Forms.

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

Contact Form 7 – быстрая контактная связь и простота настроек

Плагин CF 7 дает возможность легко и просто создавать и настраивать обратную связь. Он очень легкий, совершенно не грузит сайт, а также считается самым простым в настройке. Многие выбирают именно его, . Contact Form полностью русифицирован, что весьма удобно, и имеет интуитивно понятные настройки, разобраться с которыми очень легко. При этом, он полностью бесплатный и гибкий. Есть как простая установка – для всех, кому нравится простота, так и много глубины и сложности – для всех, кто любит углубиться. Поддерживает самые различные формы в окне, отправку через AJAX, интеграцию с Akismet, загрузку файлов, а также оснащен защитой от спама с помощью капчи и текстового вопроса. Многие признали его одним из лучших плагинов для системы управления контентом. CF 7 позволяет самые разнообразные сложные формы. В списке сразу же отображаются шорткоды, необходимые для вставки на страницу.

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

Usernoise имеет весьма широкий функционал, позволяя сделать красивую и простую в понимании всплывающую форму в окне. Но есть некоторый минус – полная часть его возможностей представлена в платной версии. Однако многим достаточно функций, которые представлены в бесплатном варианте. По умолчанию Usernoise для WordPress уже настроен как нужно, все что нужно – просто его включить. Дальнейшие настройки, по желанию владельца сайта, осуществляются тоже незатруднительно. Можно изменять расположение кнопки, изменить ее цвет и фон текста, добавить иконку к кнопке, поменять шрифт и поменять стандартные надписи. Все это легко настраивается из админки. С его помощью кнопка станет уникальной. Плагин полностью русифицирован, что максимально облегчает работу с ним. Идеально подходит для блогов. Usernoise поддерживается практически всеми знаменитыми браузерами – Opera, Firefox, Safari, IE7 (от 7 версии). Главным преимуществом данного плагина является его высокая производительность, он не оказывает влияния на скорость загрузки.

SimpleModal Contact Form – быстрая всплывающая форма в модальном окне

SimpleModal Contact Form (SMCF) представляет собой обратную связь, которая интегрирована в модальное всплывающее окно. Работает на WordPress при помощи jQuery. Плагин русскоязычный, благодаря Николаю Мясникову и другим «народным умельцам», принимающим участие в его русификации. Перевод на русский язык выполнен максимально грамотно, учитываются все малейшие детали. Всплывающее окно, которое выводит SMCF внешне напоминает окно плагина Lightbox. Это очень удобная вещь для всех, кто хочет дать возможность пользователям написать письмо, просто во всплывающем окне где угодно – в конце поста, на отдельной странице либо в Сайдбаре. Все работает очень быстро и удобно. Установка осуществляется самым традиционным способом. Также обратная форма проверяет правильность заполнения полей ввода. В опциях есть возможность сделать автоматическую подстановку заголовка страницы в теме письма, что является довольно весомым достоинством, когда он используется для заказа к описанию товаров. Тема письма позволит сразу увидеть какой товар заказан.

Custom Contact Forms – обратные формы любой сложности

Плагин Custom Contact Forms (CCF) очень популярен на сегодня. С его помощью можно сделать формы любой сложности на WordPress. Но, стоит отметить, что CCF не имеет русской локализации. Хотя это не играет особой роли, поскольку разобраться в нем проще простого, даже тем, кто не знает английский язык. Созданные формы вставляются в любые страницы, материалы и отдельные записи. Для создания простой формы не нужно копаться в настройках, все, что потребуется – вписать код в любую статью, а дальше уже все делается автоматически. Есть также специальный виджет, который можно вставить в боковую панель, либо же в любые иные места на сайте, отведенные под виджеты. Никаких особых знаний CSS для настройки при этом не требуется, а настраивается практически любой аспект: цвета, размеры, границы, отступы. Управление стилями осуществляется прямо в , там же, где настраиваются все поля ввода значений. Работает на современных технологиях Ajax и jQuery.

Slick Contact Forms – простое добавление нескольких обратных связей

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

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

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

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

Представляю вашему вниманию ТОП 5 WordPress плагинов для создания обратной связи.

1. WPForms

WPForms — это молодой WordPress плагин по созданию форм обратной связи.

Плюсы

Используется визуальный редактор Drag&Drop, который делает этот плагин еще более «user-friendly» (удобный для использования).

Лайт версия не ограничивает установку плагина на безграничное кол-во доменов.

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

Минусы

Хотя лайт версия и бесплатная, вам все равно нужно обновить плагин до Pro версии, чтобы открыть новый функционал, который был описал в «Плюсы» выше.

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

Gravity Forms — это премиум плагин, который предоставляет огромное кол-во функционала (какое вы только можете пожелать).

Плюсы

Мощный плагин, с неограниченным количеством функционала.

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

Минусы

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

Ninja forms — это идеальное решение для создания бесплатных форм в WordPress. Может так же использоваться для формирования высоко интерактивных форм.

Плюсы

Плагин доступен бесплатно с официального сайта WordPress. Установку можно на неограниченное кол-во сайтов.

К дополнению к бесплатной версии есть премиальная, которая имеет еще больше функций (такие как: SMS уведомления, Freshbooks, Campaign Monitor и Salesforce).

Отличная поддержка со стороны сообщества, подробная документация, а так же поддержка по почте.

Минусы

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

Pirate — это бесплатный WordPress плагин написанный командой Themeisle. Легко настраивается и удобный для создания простых форм.

Плюсы

Абсолютно бесплатный для скачивания и последующих обновлений.

У этой плагине есть все многие функции, например такие как: CAPTCHA для проверка от ботов и SMTP, чтобы убрать вероятность попадания письма в папку «Спам».

Минусы

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

Недостаток дополнений (других плагинов), которые совместно работают.

Факт! У этого плагина больше всего загрузок из всех плагинов связанных с построением форм.

Плюсы

Основной плюс — это бесплатность и возможность установить на неограниченное количество сайтов.

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

Является отличным дополнение для создания простой формы обратной связи для блога.

Минусы

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

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

Всплывающие формы

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

Официальная документация сайта WordPress, пишет, что «Shortcode» — это набор функций для создания специальных элементов на странице используемых в содержимом записей или страниц.

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

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

Вывод

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

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

Качество всегда продавалось, поэтому ожидать от бесплатных плагинов обширного функционал я бы не стал. Пользуйтесь тем, что пока можете себе позволить. Как только у вас появится возможность — обновляйте плагин до «Pro» версии или купите другой плагин (возможно какой-то понравился больше).

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

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

Зачем вам нужна контактная форма WordPress?

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

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

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

  • – спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
  • Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
  • Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.

Ниже приведен пример контактной формы, которую мы будем создавать в этом пособии.

Начнем-с, господа.

Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress

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

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

  1. Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
  2. WPForms Lite полностью бесплатен.
  3. Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию Pro.

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

Шаг 2: Установка плагина контактной формы WordPress

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

В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).

После установки плагина убедитесь, что вы его активировали. Это показано здесь:

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

Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).

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

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

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

Когда все сделано, просто нажмите кнопку Сохранить (Save).

Шаг 4: Настройка уведомлений и Подтверждений

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

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

Форма уведомления – это сообщения, которые получаете вы, когда к вам приходит новая заявка или email письмо с вашего WordPress сайта.

Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.

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

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

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

Поле Тема email будет автоматически заполнено c вашим именем формы. Поле имя будет браться из имени пользователя (вашего имени). Когда вы будете отвечать на письмо, то оно будет идти на почту с именем пользователя, который заполнил контактную форму.

Шаг 5: Добавление контактной формы WordPress на страницу

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

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

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

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

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

Шаг 6: Добавление контактной формы WordPress в сайдбар

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

Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.

Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.

На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!

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

Так, на всякий случай, чтобы вы знали, что они естьJ

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

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

Она уже установлена на моем сайте, не на этом блоге. Процедура стандартная. Теперь нам нужно зайти в админку блога и создать новую форму, которая будет собирать нам заявки и другую полезную информацию. Переходим в раздел «Contact Form 7» -> Добавить новую.

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

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

  1. Его имя, чтобы к нему обратиться (персональное обращение)
  2. Адрес почты (обратная связь, куда отправлять ему предложение)
  3. Номер телефона, чтобы сразу позвонить (если это произойдет быстро, то он в любом случае станет вашим клиентом)
  4. Собственно кнопка «Отправить»

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

Создание полей контактной формы в плагине Contact Form 7

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

  • Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
  • Email (тут предназначение одно, чтобы пользователь ввел )
  • URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
  • Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
  • Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
  • Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
  • Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
  • Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
  • Checkboxes (множественный выбор, например: Сайт + Создание логотипа + продвижение + контекстная реклама)
  • Radio buttons (Выбор какого-то одного пункта, например: «Вы заказываете или контекстную рекламу или таргетированную»)
  • Acceptance (Принимаете условия соглашения, т.е пользовательская информация, типо публичной оферты)
  • Quiz (Викторина – серия коротких вопросов, тоже можно вставить в контактную форму).
  • reCaptcha (Подтверждение, что вы не робот и не будете спамить.) Хорошая защита от СПАМА. Примечание: данная опция работает, если вы подключили плагин Really Simple Captcha.
  • File (Если вы хотите дать возможность пользователям загрузить вам файл, например: «Прикрепите ТЗ на разработоку сайта»).
  • Submit (Отправить данные на почту)

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

В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:

Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:

Здесь нам нужно нажать на галочку Тип Поля – Обязательное. Сделано для того, что если пользователь не введет в него имя, то заявку он вам прислать не сможет, будет ошибка отправки, что не все поля заполнены корректно.

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

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

< div class = "col-md-4" > < label class = "sr-only" > Full Name < / label > [ text* text - 658 class : form - control placeholder "Ваше имя" ] < / div >

А вот скрин:

Аналогичную операцию проделываем для поле «Email». Кликаем на соответствующую вкладку и попадаем вот в такое диалоговое окошко.

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

< div class = "col-md-4" > < label class = "sr-only" > Full Email < / label > [ email* email - 447 class : form - control placeholder "Ваш Email" ] < / div >

А вот скрин:

И, наконец, кнопка «Submit» (Отправить данные). Она у меня вся в стилях.

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

< / div >

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

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

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

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

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

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

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

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

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

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

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