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

Доброго времени суток, уважаемые читатели – Sozdaiblog.ru!

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

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

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

И тут, опять возникает вопрос – «Что это Автор, сошёл с ума, при чём тут форма обратной связи?».

А при том, что Вы не должны напрягать своих читателей, поисками Вашего имейла или аськи.

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

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

Теперь, переходим к главному.

 

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

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

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

Адрес этого сайта — jotform.com.

Единственный минус в том, что этот сайт не русскоязычный, но это не проблема, я всё расскажу и покажу. Так что наслаждайтесь.
Для начала, Вам нужно перейти по ссылке и зарегистрироваться. Сделать это очень просто, переходите на сайт и в правом нижнем углу выбираете – Create an Account – It’s Free!!:

 

 

Затем, в открывшемся окне, нужно ввести имя аккаунта, адрес электронной почты и придуманный пароль, который, как и везде нужно подтвердить. После нажимаем – Create My Account (создать аккаунт):

 

 

В открывшемся окне, Вам сообщат об удачной регистрации и предложат перейти к созданию формы обратной связи для сайта, нажатием на кнопку – «Start Creating Forms»:

 

 

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

Сначала, давайте напишем заголовок. Для этого, в левом столбике находим надпись – «Heading», выделяем и мышкой перетягиваем её на рабочее поле. В строке заголовка, удаляете ненужную надпись и вписываете свою. У меня, это – «Связь с Администратором блога»:

 

 

Теперь, нужно вставить форму для ввода имени. Возвращаемся опять к левому столбику, находим надпись – «Text Boks» и точно также перетягиваем её на рабочее поле. После этого вписываем слово – «Имя»:

 

 

Далее, добавляем в нашу форму обратной связи, поле ввода адреса электронной почты. Выбираем новую вкладку – «Quick Tools», из выпадающего списка выбираем – «E-mail» и повторяем предыдущие действия, после этого вписываем название – «Адрес электронной почты»:

 

 

Если Вы заметили, в строке ввода электронной почты, находится посторонняя надпись. Чтобы её удалить, в правом углу верхней строки меню, найдите раздел – «Hint Example» и в выпадающем окне удалите эту надпись, после нажмите – «OK»:

 

 

Наконец, переходим к форме ввода сообщения. Возвращаемся в предыдущую вкладку, в котором мы выбирали форму ввода имени и выбираем надпись – «Text Area», перетягиваем и прописываем – «Ваше сообщение»:

 

 

Теперь, чтобы люди были обязаны вводить своё Имя и электронную почту, нужно поставить специальное правило. Для этого, выделив поле для ввода имени, нажимаем в верхней строке меню, на кнопку – «Required». После выполненных этих действий, рядом с заголовком – «Имя», появиться звёздочка, означающая обязательное заполнение данного поля. С полем ввода адреса электронной почты, необходимо проделать те же  действия:

 

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

 

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

Давайте сначала изменим размер шрифта заголовком. Для этого в верхнем меню выбираем вкладку – «Font Size» и задаём нужный размер, нажимаем – «OK»:

 

 

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

 

 

Теперь можно выбрать расположение заголовков наших ячеек. Например, мне нравится, когда надписи располагаются над полем ввода. Для этого нужно в верхнем меню, выбрать вкладку – «Label Align» и выбрать – «Top Aligned»:

 

 

Если Вы заметили, то внизу находится кнопка отправки сообщений. Для изменения надписи на кнопе, нужно её выделить мышкой и перейти в верхнем меню во вкладку – «Submid Text». Здесь вписываем – «Отправить сообщение» и нажимаем – «OK»:

 

 

Затем, выбираем её форму и цвет. Снова глядим в верхнее меню и находим надпись – «Button Style»:

 

 

Вас сразу-же перебросят в окно выбора красивых кнопочек, где Вы сможете выбрать понравившуюся кнопку. После выбора нажимаем – «Finish»:

 

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

 

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

Для этого переключаемся на вкладку – «Setup & Embed» и в верхнем меню выбираем пункт – «Thank you»:

 

 

Послы этого, откроется окно выбора страницы для перенаправления, состоящее из трёх пунктов:

 

• Дефолтная страница.

• Адрес перенаправления.

• Страница благодарности.

 

Я выбираю третий вариант и нажимаю – «Next»:

 

 

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

 

 

Не забудьте сохраниться:

 

Осталось вставить форму обратной связи на Ваш ресурс.

 

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

Для того чтобы вставить форму обратной связи на сайт, нужно в верхнем меню перейти во вкладку – «Embed Form»:

 

 

После этого, откроется окно с выбором движка на котором работает ресурс для размещения формы. Я выбираю WordPress:

 

 

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

 

 

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

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

Маленький минус то, что на каждый месяц даётся 100 сообщений, но мне кажется, этого более чем достаточно.

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

На этом всё...

С уважением, Денис Черников!