Урок 167 Форма обратной связи для сайта на html

03.09.201613120

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

С помощью формы можно создать подписку на обновления сайта; коммерческим ресурсам она понадобится как удобная форма заказа и поможет увеличить доход. Установленная форма позволит автору не афишировать свой e-mail и защитит почтовый ящик от спама. А её аккуратный и привлекательный внешний вид отлично впишется в юзабилити сайта и добавит ему большой плюс.

Можно создать форму на Html несколькими способами

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

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

Для создания формы можно использовать готовые скрипты или конструкторы и генераторы форм. Проще всего использовать генераторы, причём ip-whois (http://ip-whois.net/forma-obratnoj-svyazi/) создаёт форму специально для сайтов Html. Сервис предлагает 4 варианта формы, цвета которых можно корректировать. Настраиваемая ширина полей позволит подогнать форму под размеры сайдбара.

 Форма обратной связи для сайта на html

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

Форма обратной связи для сайта на html2

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

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

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

Форма обратной связи для сайта на html4

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

Форма обратной связи для сайта на html5

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

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

Самый простой способ для любого сайта на WordPress, шаблон которого написан на Html, но хостинг поддерживает PHP, создать контактную форму с помощью плагинов и разместить её в любом месте сайта: на специальной странице или в сайдбаре.

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

После установки плагина Contact Form-7 в левой части административной панели сайта появится строчка Контакты (CF7). Она ведёт на страничку плагина, где предлагается небольшой код, умещающийся в одну строку. Его нужно вставить в то место, где предполагается размещение формы контактов. Код вставляется только в HTML-режиме, то есть, в текстовом, но не визуальном редакторе! Для каждого сайта он свой, чужим кодом без установки плагина воспользоваться нельзя.

 форма обратной связи

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

Форма обратной связи для сайта на html7Форма обратной связи для сайта на html8

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

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

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

А вы уже поставили себе на сайт форму обратной связи?

Следующий урок: Как узнать на каком движке сделан сайт.
Предыдущий урок: Айфон это что такое?

Хочешь быть умнее, чем другие? Зарабатывать больше? Читай еще: