Форма обратной связи HTML5 + CSS3 + jQuery + php

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

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

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

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

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

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

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

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

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

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

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

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

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

CF7 в поиске

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

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

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

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

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

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

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

Интеграция

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

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

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

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

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

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

Поле текст

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

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

  1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
  2. Имя не меняем это уникальный идентификатор
  3. Значение по умолчанию, ввел фразу, которую увижу внутри
  4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
  5. Не советую пользоваться полем Akismet
  6. Для добавления стилей вводим class или id, сделал pole-imya
  7. Вставляем тег в общее поле

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

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

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

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

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

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

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

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

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

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

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

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

  1. Теги полей созданные ранее
  2. Адрес почты куда будут приходить письма
  3. От кого и тема, заполняйте по желанию
  4. Дополнительные заголовки, полностью очищаем
  5. Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
  6. Внизу нажимаем Сохранить

Сохранение

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

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

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

Шорткод

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

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

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

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

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

Дополнение

В качестве дополнения, стоит упомянуть одну очень хорошую особенность в Contact Form 7 для WordPress, с помощью которой можно фильтровать большие потоки писем от посетителей. Бывают ситуации, когда их действительно очень много, поэтому быстро ответить на все невозможно, а фильтровать вручную очень долго. Конечно, в таком случае, можно использовать метки и фильтры непосредственно в почтовом ящике, но это тоже потребует много времени. Гораздо проще будет осуществить фильтрацию еще на стадии отправки, воспользовавшись тегом «select» в Contact Form 7, отображающим раскрывающийся список

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

Создайте новое поле, выбрав «drop-down menu», и установите ему обязательное заполнение. Затем, добавьте в строку «Options» несколько вариантов категорий для сообщений, в зависимости от направления деятельности вашего сайта (например, «Общие вопросы», «Отзывы по работе компании», «Верните мои деньги»). Каждая категория должна начинаться с новой строки. Также, желательно поставить галочку на «Insert a blank item as the first option», чтобы первым пунктом списка была пустая строка, и пользователю пришлось выбирать подходящую причину, а не оставлять первый вариант.

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

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе «Плагины» нажимаем «Добавить новый». Вводим в окошко «Поиска» Contact Form 7. Естественно он отобразится первым. Кликаем кнопку «Установить:

Как установить плагин

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

Contact form 7 настройка

Находим в панели управления появившийся новый раздел «Contact Form 7» — пункт «Контактные формы». На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Контактная форма № 1 по умолчанию

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

Внешний вид: Стандартная контактная форма на сайте WordPress

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

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

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

Редактировать контактную форму. Вкладка файл

Откроется окно — Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ()

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку «Вставить тег»:

Тег файл вставлен в шаблон формы

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

Кнопка Выберите файл в контактной форме

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

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

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

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

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем «Порядок» 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку «Опубликовать». Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

JS код формы (jQuery):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

(function($){

«use strict»;

varinput=$(‘.validate-input-at .input-at’);

$(‘#submit-at’).on(‘click’,function(){

varcheck=true;

for(vari=;iinput.length;i++){

if(validate(inputi)==false){

showValidate(inputi);

check=false;

}

}

// Отправка формы        

if(check==true){

$.post(«/send.php»,$(«.form-at input, .form-at textarea»).serialize(),

function(data){

if(data.frm_check==’error’){

$(«.result-at»).html(«Ошибка: «+data.msg+»
«);

}else{

$(«.result-at»).html(«Ваше сообщение отправлено!»);

$(«.form-at»).fadeOut(500);

$(«.input-at»).val(«»);

}

},»json»);

returnfalse;

}

});

$(‘.form-at .input-at’).each(function(){

$(this).focus(function(){

hideValidate(this);

});

});

functionvalidate(input){

/* Если нужно проверять валидность почты, раскомментируйте строчки ниже */

/*     if($(input).attr(‘type’) == ’email’ || $(input).attr(‘name’) == ’email-at’) {

            if($(input).val().trim().match(/^(+)@((\{1,3}\.{1,3}\.{1,3}\.)|((+\.)+))({1,5}|{1,3})(\]?)$/) == null) {
            return false;
            }
            }
        */

if($(input).val().trim()==»){

returnfalse;

}

}

functionshowValidate(input){

varthisAlert=$(input).parent();

$(thisAlert).addClass(‘alert-validate’);

}

functionhideValidate(input){

varthisAlert=$(input).parent();

$(thisAlert).removeClass(‘alert-validate’);

}

})(jQuery);

Защита от спама для Contact form 7 при помощи поля reCAPTCHA

Следующее поле для защиты от спама, это поле reCAPTCHA. Это специальный сервис Google который позволят генерировать специальные поля, которые выглядят таким образом:

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

Для вставки данного поля на панели генерирования полей Contact form 7 нажимаем кнопку «reCAPTCHA».

Во всплывающем окне нам будет предложена ссылка с инструкцией по подключению сервиса reCAPTCHA к вашему сайту.

Переходим по этой ссылке и смотрим инструкцию.

  1. Первое, что нужно сделать — перейти на Google’s reCAPTCHA.
  2. Register your site — зарегистрировать ваш сайт.
  3. Get a site key and secret key – получить ключ от сайта и секретный ключ.

При переходе по предложенной ссылке нам предлагают ввести название и домен сайта, причем не адрес сайта, а только домен, без http://.

После ввода данных нажимаем на кнопку «Регистрация».

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

Затем нам нужно перейти в админ панель сайта, пункт меню Contact Form 7 => Integration и вести полученные ключи для сайта.

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

Нажимаем на » reCAPTCHA «, и видим настройки:

  • Theme (light/dark) — тема, светлый фон/темный фон.
  • Size (normal/compact) — размер, нормальный или компактный.

Выбираем нужные значения и нажимаем Insert Tag»

Если вы ещё не знаете как добавлять и настраивать в Contact Form 7 свои поля и создавть формы любой сложности, то обязательно почитайте статью «Настройка contact form 7. Добавление полей»

Создание и показ контактных форм

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

Форма на картинке создана при активации плагина автоматически.

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

Формы создаются как произвольный тип записи — wpcf7_contact_form. Т.е. страница редактирования формы — это тип записи.

А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):

На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).

Получаете спам через Contact Form 7?

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

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт «Интеграция». Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

reCAPTCHA — это сервис Google

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы — Contact Form 7 Style

Стили для форм обратной связи 7

Плагин Contact Form 7 Style — это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка — Contact Form 7 Style Template. Настройка внешнего вида:

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

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

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

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

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

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/. Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

P.S. Оказывается на редактирование старых постов (информация для читателей должна быть актуальной всегда) уходит столько же времени, как на написание новой инструкции. Ужас!

Скачать модуль обратной связи

руб.

  • Отправка сообщений на вашу почту
  • Цели для аналитики
  • Отправка сообщений по sms
  • Копирайт

Стандартный

290
рублей

  • Отправка сообщений на вашу почту
  • Цели для аналитики
  • Отправка сообщений по sms и telegram
  • Защита от спама (капча)
  • Добавление файлов
  • Выбор цветового оформления
  • Несколько форм на одном сайте
  • Всплывающая форма
  • Разовая оплата (без абонентской платы)

Премиум

490
рублей

  • Отправка сообщений на вашу почту
  • Цели для аналитики
  • Отправка сообщений по sms и telegram
  • Защита от спама (капча)
  • Добавление файлов
  • Выбор цветового оформления
  • Несколько форм на одном сайте
  • Всплывающая форма
  • Разовая оплата (без абонентской платы)
  • Конструктор полей

Крупнейшая международная площадка по продаже модулей для сайтов CodeCanyon (Envato Market) оценила Contactus в 15$ (19.5$ включая техподдержку), для нашей русскоязычной аудитории мы продаем модуль в 2 раза дешевле!

Элементы (поля) формы html. Основные типы полей

В таблице ниже представлены основные типы элементов формы (полей). Подробную информацию о каждом элементе вы можете просмотреть на отдельной странице тега.

Тип элемента Отображение
Текстовое поле

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

С помощью тега к полю можно добавить список предопределенных вариантов.

Поля для ввода даты и времени

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

Существует несколько типов полей, содержащих данные о дате и времени:

  • date — дата (число, месяц, год);
  • datetime-local — дата и время (число, месяц, год, часы, минуты);
  • month — месяц конкретного года (например: январь, 2004г);
  • week — неделя конкретного года (например: неделя 32, 2001г).
Поле с указанным типом содержимого

Поле для ввода пароля:

В поле типа password введенное значение будет заменено символьной маской.

Поле для ввода чисел:

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

Поля с указанным типом содержимого:

  • email — поле для ввода адреса электронной почты;
  • number — поле для ввода чисел;
  • password — поле для ввода пароля;
  • search — поле для ввода поискового запроса;
  • tel — поле для ввода номера телефона;
  • url — поле для ввода URL адреса.
Текстовая область

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

Чек-бокс Принимаю условия

Чек-бокс представляет собой поле, в котором можно сделать отметку.

Переключатель

Самовывоз Курьер Экспресс-почта

Элемент «переключатель» позволяет выбрать один из доступных вариантов.

Выпадающий список 16 Гб, Черный32 Гб, Черный32 Гб, Белый64 Гб, Золотой

При клике на список пользователю откроются доступные для выбора варианты.

Список с множественным выбором ПонедельникВторникСредаЧетвергПятницаСубботаВоскресенье

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

Поле загрузки файлов

С помощью этого элемента пользователь может прикрепить к форме файл.

Кнопка

Для создания кликабельной кнопки можно использовать тег либо тег .

Отличие в возможности формировать название кнопки, сделанной тегом , с помощью HTML тегов.

Типы кнопок (определяются атрибутом type):

  • button — простая кнопка. Действие, которое будет выполнено при нажатии кнопки, определяется через JavaScript;
  • submit — кнопка отправки формы;
  • reset — кнопка очистки полей формы.

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

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

Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

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

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

И придаем ей стили.

.modalbox {
   color:#FFFFFF;
   display:block;
   cursor:pointer;
   padding:10px 11px;
   font-size:1.2em;
   border:solid 1px #F9F9F9;
   border-radius:2px;
   background:#70C6B9;
   width:210px;
   text-decoration:none;
   text-align:center;
   margin:0 auto 20px;
}
.modalbox:hover {
   background:#979797;
}

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте

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

#inline {
   display:none;
   margin-left:30px;
   width:80%;
   margin:0 auto;
   background:#fff;
   padding:10px 20px;
}

В итоге у нас получается вот такая кнопочка.

При нажатии на которую открывается всплывающее окно с обратной связью.

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

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

Функции формы обратной связи

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

Контактная форма может стимулировать конверсию и, напротив, негативно влиять на ее показатели. Форма должна быть простой, удобной и приятной для взаимодействия – тогда ее КПД будет максимально высоким. Есть, как минимум, 10 критериев, по которым можно оценить эффективность контактной формы.

1Заголовок

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

3Краткость

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

4Заголовки над полями

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

5Подсказки

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

7Юзабилити

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

8Мобильность

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

В дальнейшем эта тенденция сохранится.

9Откажитесь от капчи

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

10Благодарность

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

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

Добавлено в v1.2

Улучшения и исправления

  • Теперь если в форме есть заполненное поле с `name=»header»`, такое поле будет автоматически подставлено в тему письма.
  • Исправлена ошибка на DLE 10.5+ с невозможностью указать email отправителя из формы.
  • Исправлена ошибка с экранированием кавычек в письме.
  • Если пользователь авторизован, то тег {uf_field_email} при открытии формы автоматически заменится на его email.
  • Убран тег {send_date=D.m.Y} т.к. он оказался нерабочим.
  • Исправлено некорректное поведение тега {send_date}.
  • Добавлен новый параметр конфигурации sendAsPlain — Отправлять сообщение как простой текст. Теперь можно отправлять письма как простые текстовые сообщения, без обработки html.
  • Добавлен новый параметр конфигурации sendToAuthor — Отправить письмо автору новости, если есть поле с name=»newsId» и если автор разрешил получение писем с сайта.
  • Реализована возможность отправлять в письме данные из новости. Для этого необходимо передать в форму поле newsId. Пример шаблона в папке newsauthor.
  • Реализована возможность отправки сообщения на email автора новости. Для этого необходимо передать в форму поле newsId и в конфиге прописать sendToAuthor = y. Пример шаблона в папке newsauthor.
  • {news_id} — ID новости (если есть поле с name=»newsId»).
  • {news_autor} — Логин автора новости (если есть поле с name=»newsId»).
  • {news_title} — Заголовок новости (если есть поле с name=»newsId»).
  • {news_email} — Email автора новости (если есть поле с name=»newsId»).
  • {site_home_title} — Выводит название сайта из настроек DLE.
  • {site_http_home_url} — Выводит адрес сайта из настроек DLE.
  • {site_short_title} — Выводит краткое название сайта из настроек DLE.
  • {user_name} — Выводит логин пользователя, отправившего сообщение.
  • {user_fullname} — Выводит полное имя пользователя, отправившего сообщение.
  • {user_email} — Выводит email пользователя, отправившего сообщение.
  • {user_foto} — Выводит ссылку на аватар пользователя, отправившего сообщение.
  • {user_land} — Выводит то, что пользователь, отправивший сообщение, написал в поле «Место жительства».

Сознание новой формы

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

  1. Текстовое поле, адрес электронной почты (text, email);
  2. Ссылка (url);
  3. Номер телефона, диапазон чисел, дата (tel, number, date);
  4. Текстовое поле в несколько строк (textarea);
  5. Флажки, переключатели и выпадающее меню (checkbox, radio, select);
  6. Проверка капчей (captchac и captchar);
  7. Проверка контрольным вопросом (quiz);
  8. Флажок согласия (acceptance);
  9. Прикрепление файлов (file);
  10. Кнопка отправки (submit).

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

В качестве примера, можно добавить к готовому шаблону такие поля, как: никнейм, номер телефона, текстовый вопрос для защиты от спама. Это будет самая простая форма отправки сообщения администратору сайта. Для ее создания понадобятся теги (text, tel, quiz).

Сперва добавим новое поле для никнейма автора сообщения, с именем «Ваш никнейм», как написано в других готовых полях (можно просто скопировать). Теперь, в разделе «Шаблон формы» выбираем «text» и задаем нужные параметры. Например, можно сделать обязательное заполнение, поставив галочку на «Required field». В качестве альтернативы, можно сделать это поле обязательным для заполнения просто добавив звездочку (text*).

Имя поля можно оставить по умолчанию или задать любое другое, например, «your-nickname». Чтобы поле имело содержание по умолчанию, которое поможет пользователю сориенироваться быстрее, нужно добавить его в строчку «Значение по умолчанию». Если поставить галочку на «Use this text as the placeholder of the field», то это содержание будет исчезать при нажатии. Далее, можно задать атрибуты «ID» или «Class», чтобы использовать их для оформления поля через CSS стили. Теперь остается только нажать «Insert Tag», и сгенерированный тег появится в содержимом. Он должен выглядеть так:

Аналогичные действия нужно провести и при добавления остальных полей (tel, quiz). Только, в случае с вопросом для защиты от спама (quiz), нужно будет написать вопрос и ответ одной строкой, через разделитель «|». Это должно выглядеть примерно так (Сколько будет 2+3?|5)

Обратите внимание, что очередность тегов в содержании шаблона определяет расположение полей на сайте

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

Ссылка на основную публикацию