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

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

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

Для этого мы будем использовать стандартную форму обратной связи, сделанную с помощью плагина Contact Form 7 и плагина Easy WP SMTP .

Как установить плагин Easy WP SMTP?

1. Необходимо перейти в админ-панели WordPress по ссылке: http://Ваш_сайт/wp-admin/

2. После этого переходим в админ-панель в раздел «Плагины» — «Добавить новый», в правом углу экрана Вы можете использовать строку для поиска, напишите в ней: «Easy WP SMTP».

3. При поиске будут отображены плагины, доступные для установки, находим наш плагин из списка и нажимаем на кнопку «Установить», как только плагин будет установлен, нажимаем на кнопку «Активировать».

4. Приступаем к настройке плагина. Переходим в админ-панель в раздел «Настройки» — «Easy WP SMTP».

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

Как настроить плагин Easy WP SMTP?

Заполняем поля в настройках SMTP:

• «От кого (Адрес электронной почты)» — указываем имя почтового ящика, от которого будут отправляться письма, admin@Ваш_домен или любое другое имя вместо admin.
• «От кого (Имя)» — Вы можете указать от кого будут отправляться письма, например, от имени Вашей компании ООО «Наименование компании».
• «Адрес для ответа (Reply-To)» — указываем почтовый ящик, на который в случае чего можно будет ответить, аналогично по заполнению с полем «От кого (Адрес электронной почты)»
• «BCC Email Address» — системный почтовый ящик, данное поле необязательно для заполнения и не рекомендуется для заполнения, так как все письма на сайте будут дополнительно добавлять этот почтовый ящик как отправитель.

• «SMTP-хост» — это адрес сервера к которому идёт подключение. На нашем хостинге SMTP сервер имеет имя mail, то есть сервер будет выглядеть таким образом mail.Ваш_домен.
• «Тип шифрования» — выбираем «Ни одного», «SSL/TLS»/«STARTTLS» используются если на почтовом домене установлен SSL-сертификат.
• «Порт SMTP» — порт по которому будет работать почтовый сервер, указываем порт 25, если был установлен SSL-сертификат на почтовый домен, то указываем порт 465.
• «Аутентификация SMTP» — указываем «Да».
• «Имя пользователя SMTP» — указываем имя почтового ящика admin@Ваш_домен или какое-либо другое имя вместо admin.
• «Пароль» — в данном поле необходимо указать пароль от почтового ящика.

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

Как настроить плагин Contact Form 7?

Открываем в админ-панели настройки плагина Contact Form 7, переходим в раздел «Письмо».

• В поле «Кому» указываем почтовый ящик, например admin@Ваш_домен, то есть почтовый ящик, который мы указывали при настройке плагина Easy WP SMTP.
• В поле «От кого» указываем почтовый ящик, который был указан при настройке плагина Easy WP SMTP.
• В поле «Тема» необходимо указать тему сообщения.
• В поле «Additional headers» используется для дополнительных заголовков при отправке писем, это поле необязательно для заполнения.
• В поле «Тело письма» по умолчанию все необходимые поля уже добавлены, поэтому дополнительных настроек выставлять не нужно.

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

Источник

7 лучших плагинов обратной связи для WordPress

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

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

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

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

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

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

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

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

Это еще один очень популярный плагин, который доступен в двух версиях — в качестве плагина для WordPress и PHP кода для интеграции на «самописные» сайты. Уникальность этого плагина в том, что роботы-спамеры обнаруживаются на сайте автоматически. Используя капчу и Akismet Fast Secure form плагин блокирует атаки с наиболее популярными спамерскими тактиками. Эта функция сокращает вероятность появления спама и любой другой нежелательной информации.

Универсальный бесплатный плагин с отличным интуитивным drag’n’drop интерфейсом для создания контактных форм на вашем WordPress сайте. В админке вы сможете строить свою форму просто перетаскивая нужные блоки и настраивая их под ваши нужды. А также в нем есть огромное количество функций, среди которых AJAX handler, надежные антиспам модули, импорт и экспорт данных.

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

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

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

Источник

Как добавить контактную форму в WordPress

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

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

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

Шаг 1. Установите плагин Contact Form 7

Перейдите на вкладку Плагины — Добавить новый. В поисковой строке введите Contact Form 7 и нажмите Установить:

После установки нажмите Активировать:

Готово, вы установили и активировали плагин.

Шаг 2. Создайте форму обратной связи

Перейдите на появившуюся после установки вкладку Contact Form 7 — Добавить новую. На вкладке «Шаблон формы» откроется редактор формы с уже готовым стандартным шаблоном:

Шаг 3. Настройте шаблон формы

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

Для Contact Form 7 настройка шаблона выглядит следующим образом. В редакторе шаблона можно использовать HTML-код и так называемые теги формы. Теги формы — это шорткоды (короткие коды), которые при публикации преобразуются в HTML-код и добавляют поля формы. Также существуют теги почты для настройки электронной почты. Рассмотрим синтаксис тегов формы и тегов почты.

Синтаксис тега формы

Пример тега формы: [text text-name “Enter your name”] . Он состоит из четырёх частей:

• Тип (в примере — text) — определяет тип элемента. Если поставить звёздочку после типа, то поле будет обязательным к заполнению: [text* ].
• Имя (text-name) — название поля ввода.
• Значение («Enter your name») — необязательно для добавления. Используется для значений по умолчанию, которые находятся в поле (подсказка, что вводить в поле пользователю).

Теги формы вы можете выбрать из списка и добавить их в контактную форму:

Рассмотрим поля, которые можно добавить:

1. текст — текстовое поле для ввода текста только в одну строку, Например: имя, тема сообщения.
2. email – адрес электронной почты.
3. URL — адрес сайта или страницы.
4. телефон — числовое поле для ввода номера телефона.
5. номер — числовое поле для ввода (например, количества заказываемого товара).
6. дата — дата в формате дд.мм.гггг.
7. текстовая область — поле для ввода текста в несколько строк. Например, отзыв или сообщение от посетителя.
8. в раскрывающемся меню — выпадающее меню, здесь можно добавить несколько пунктов меню для выбора. Пользователь может выбрать только один пункт.
9. чекбоксы – чекбоксы, в которых можно выбрать один пункт, несколько или ни одного.
10. радио кнопка – она похожа на чекбокс — предоставляются варианты для выбора. Пользователь обязательно должен выбрать один вариант из предложенных.
11. принятие – чекбокс. Пока пользователь не поставит галочку (например, о том, что он согласен с правилами обработки персональных данных), кнопка отправки сообщения будет неактивна.
12. опрос — CAPTCHA, чтобы убедиться, что форму отправил человек, а не робот. Вы можете задать здесь контрольный вопрос, на который нужно ответить перед отправкой формы. Только когда будет введён правильный ответ, кнопка отправки активируется.
13. файл — создание кнопки для выбора файла, который можно прикрепить к письму.
14. отправить — кнопка, при нажатии на которую отправляется форма.

Посмотрите, как можно применить все инструменты, на примере. Ниже приведён код с тегами формы и результат — получившаяся форма заказа Вордпресс:

Синтаксис тега почты

Почтовый тег состоит только из одного слова. Это слово обычно соответствует имени тега формы. Например: [your-name] . Используется при настройке шаблона письма (шаг 4).

Шаг 4. Настройте шаблон письма

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

Вы можете настроить это сообщение на вкладке «Письмо». При редактировании используйте почтовые теги:

• Кому — введите здесь свой адрес электронной почты, на который будут отправляться все отправленные формы.
• От кого — введите адрес электронной почты, который принадлежит тому же домену, что и ваш сайт.
• Тема — тема сообщения, которую вводит пользователь.
• Additional headers — по желанию добавьте дополнительные заголовки. Например: Reply-To: [your-email] — тогда письмо будет отправляться вам и дублироваться отправителю.
• Тело письма — то, как будет выглядеть отправленное письмо, которое придёт на ваш почтовый ящик. Прикреплённые файлы — если в шаблоне формы вы добавили кнопку для прикрепления файлов, добавьте здесь почтовые теги типа [file] , чтобы получить эти файлы.

Шаг 5. Настройте уведомления при отправке формы

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

Некоторые сообщения — это уведомления о состоянии отправки контактной формы. Например, при успешной отправке пользователь получит сообщение «Спасибо за ваше сообщение. Оно успешно отправлено», а при ошибке отправки — «При отправке сообщения произошла ошибка. Пожалуйста, попробуйте ещё раз позже». Другие сообщения — это уведомления об ошибках заполнения формы «Поле слишком короткое» или «Введён некорректный URL-адрес».

В уведомлениях можно использовать только текст. Но также можно добавить почтовые теги. Например, настройте уведомление «Спасибо, [your-name], вы отправили форму!» Когда пользователь при заполнении формы введёт своё имя [your-name], то в сообщении при отправке тег заменится на его имя.

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

Готово, вы настроили и сохранили форму.

Шаг 6. Добавьте форму на сайт

Перейдите на вкладку Contact Form 7 — Контактные формы. Рядом с вашей контактной формой находится шорткод. Скопируйте его:

Добавьте шорткод на страницу сайта или запись в редакторе:

Добавленная форма (здесь стандартная) будет выглядеть в режиме предпросмотра и на сайте таким образом:

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

Источник