logo

Форма связи

Форма обратной связи - Super AJAX Contact Form.

 

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

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

В скачанном архиве находится папка, которую надо будет загрузить в корень сайта. Перед этим разберём, что в папке находится и что и где надо поменять. Разархивируйте архив. В архиве находится папка code.Внутри неё находится папка assets и файл index.php. Вам необходимо будет открыть папку assets, в которой есть еще несколько папок:

папка hmlОткройте папку xml, там находится файл config.php, в котором Вам надо прописать адрес электронной почты, на который Вы хотите получать сообщения:

адресПосле этого можно папку code загружать в корень сайта. Полный путь к форме связи будет выглядеть так: http://ваш-сайт.ru/code/index.php

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

Установка.

1-й вариант. Сделаем вызов формы из горизонтального меню. Создаём в админке новую страницу и называем её Контакты. Сохраняем чистую страницу и в меню появится кнопка Контакты. При клике на эту кнопку форма связи не появится. Необходимо сделать редирект на форму обратной связи. Открываем в корневой папке сайта файл .htaccess и прописываем там следующую строчку:

Redirect permanent /kontaktyi.html /code/index.php

Теперь после клика по кнопке Контакты будет происходить перенаправление на страницу формы обратной связи. Эта форма имеет шаблон своей собственной страницы. На этой странице нет никаких "механизмов", чтобы посетитель вернулся обратно на сайт. Поэтому необходимо добавить в шаблон формы связи одно дополнение.
Это дополнение можно сделать в виде логотипа сайта или в виде кнопки"Вернуться на сайт" и сделать дополнение кликабельным. Для этого откройте файл index.php формы обратной связи и вставьте сразу после тега <body> следующий код:

<div align="center"><a href="http://ваш сайт">
<img src="http://полный адрес расположения логотипа или кнопки.png" alt=""/>
</a></div>

Для начинающих объясню немного подробнее и наглядней.

  1. Для начала я в Фотошопе сделал для страницы с формой обратной связи картинку с логотипом и названием сайта, чтобы потом вставить её над формой обратной связи. Это делается очень быстро.
  2. Второй шаг - зашел в свой аккаунт на хостинге и открыл корневую папку сайта. В корневой папке сайта находится папка этой формы - code.
  3. Теперь открываем папку code, в ней находится файл index.php.  Открываем этот файл для редактирования. В верхней части кода этого файла ищем тег <body>: форма обратной связиСразу, ниже этого тега и вставляйте код, который выделен синим цветом выше. Эта картинка будет кликабельной и при клике на неё посетитель попадет обратно на сайт.
  4. Возможно будут такие посетители, которые не сообразят, что таким образом они могут вернуться на сайт. Для таких я специально сделал кнопку под названием "Вернуться на сайт" и установил её ниже формы. Код точно такой же, только вместо адреса расположения картинки пропишете адрес расположения кнопки. Код устанавливается в этом же файле (index.php), только в самом низу после элемента кода <div id="bot"><!--bottom--></div> :форма2

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

форма3

Теперь после клика по логотипу или кнопке, посетитель может вернуться на Ваш сайт.

2-й вариант. Можно установить какую-то отдельную кнопку в виде иконки в любом месте сайта - в шапке, в сайтбаре, в футере или на отдельной странице. Такая иконка устанавливается как кликабельная картинка или как баннер. Составим код для такого варианта:

<a href="http://ваш-сайт.ru/code/index.php" target="_blank" ><img src="http://адрес картинки" border="0" alt=""/></a>

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

Теперь можно проверить работу формы обратной связи. У меня работает отлично!

Форма связи обновлено: Июль 5, 2017 автором: admin

1 коммент. к “Форма связи”

  1. Артём:

    Кто вкурсе как добавить еще одну форму на странице? как понял нужно добавить xml с ид и полями что в форме.

Оставить комментарий

▲Вверх