все о заработке в интернете
инфо-бизнесе с нуля, электронной коммерции
Мой профиль Вконтакте

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

Всем привет. Наконец-то выдалась минутка написать статью. Обязательно прочтите ее до конца, так как для вас будут интересные новости. Cоздание формы обратной связи является неотъемлемым элементом любого успешного блога или сайта. Вот сегодня я и расскажу о том, как ее создать в формате html для wordpress.

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

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

Создаем форму с помощью плагина

Самым быстрым и простым способом добавить себе форму обратной связи на сайт на wordpress является использование плагинов. Раньше у меня было именно так. Нам понадобятся два плагина:

— Contact Form 7 – плагин формы;

— Really simple captcha – для защиты от спама.

Найти эти два плагина вы можете прямо в админ-панели вашего wordpress сайта. Заходите в пункт «плагины» — «добавить новый». Там вводите название и нажимаете поиск. Активируете оба плагина.

Слева у вас появится пункт меню «Контакты (CF7)». Заходите в данное меню и выбираете пункт «контакты» как показано на рисунке.

1

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

Жмем сгенирировать тэг, затем выбираем CAPTCHA.

3

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

4

Сохраняете форму и затем копируете ее код.

5

После этого нам нужно создать новую страницу в панели wordpress под названием «Контакты» и вставить в тело код формы.

6

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

7

Также создать форму обратной связи можно с помощью плагина Fast Secure Contact Form. В нем самом уже будет присутствовать капча для защиты сайта от спама. В админ-панели своего блога находите его через раздел плагины, активируете и переходите к настройкам.

8

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

9

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

10

Создаем форму обратной связи с помощью html

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

Оказывается, что в Google документах есть очень хорошая функция для создания форм связи на html. Но там вы также можете сделать и различные анкеты, опросы и много чего другого.

11

12

13

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

14

Затем нам надо добавить еще один элемент. Выбираем пункт «добавить элемент» и из выпадающего меню берем «текст».

20

Заполняем все поля как и в предыдущем пункте. Теперь нам остается еще одно поле для сообщения. Для этого мы снова добавляем элемент, но теперь выбираем «текст (абзац)». На рисунке выше вы можете видеть этот пункт. Не забываем ставить галочку, чтобы сделать эти пункты обязательными для заполнения.

Все, форма html у нас готова. Теперь ее нужно добавить к себе на сайтwordpress. Для этого вверху или внизу жмем синюю кнопку «отправить». У вас появится вот такое окошко.

17

Жмем встроить и копируем появившийся код html.

18

Идем к себе на блог в админ-панель. Создаем новую страницу и выбираем вкладку «текст».

19

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

16

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

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

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

У меня на блоге сейчас стоит форма для связи Super AJAX Contact Form. Посмотреть ее вы можете на [urlspan]этой странице[/urlspan]. Преимуществами ajax формы является то, что она сразу выдает сообщение об ошибках, либо об успешном отправлении письма.

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

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

Получить сам ajax скрипт можно вот здесь. Стоит он 1 доллар. Оплатить можно с помощью Paypal. Раньше он вроде был бесплатным. Либо вы можете его бесплатно скачать вот здесь.

Изначально все записи будут на английском языке. Поэтому нам нужно будет отредактировать файл index.html и config.php, расположенного в каталоге xml (assets\xml).  Если вы не хотите заморачиваться с ajax, то просто скачайте уже готовый файл формы, который стоит на моем сайте по этой ссылке.

Что вам здесь нужно поменять. Открываете файл config.php с помощью notepad++. Вам нужно прописать свой e-mail и поменять кодировку на utf-8. В моем файле она уже изменена.

21

В файле index.php поставьте кодировку «windows-1251».

22

Теперь идем в Filezilla, создаем в корневой папке сайта новый каталог code (нужно нажать правую кнопку мыши и выбрать «создать каталог») и закидываем туда файлы скрипта в разархивированном виде. Все, форма для связи на вашем сайте вордпресс готова. У меня эта страница имеет следующий адрес.

http://alex-bestbusiness.com/code/index.php

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

На этом я буду заканчивать.      С уважением, Александр Пузатых

Понравилась статья? Поделитесь с друзьями!