Топ-100 Форма обратной связи php html без перезагрузки страницы сайта

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

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

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

Ее можно устанавливать как на сайт HTML (но хостинг должен все-равно поддерживать PHP), так и на сайт с использованием какой-то CMS (движка сайта), например Вордпресс. Поэтому разместить форму обратной связи PHP  можно в любом месте вашего ресурса. Кроме того в форме установлена простая математическая капча, вашим посетителям не нужно будет разгадывать шарады из непонятных букв.

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

1. Закинуть архив на хостинг, распаковать и разместить папку ajax_form в корневой папке сайта если сайт на HTML или в папке используемой темы если используете CMS (движок), например вордпресс.

2. В файл index.html (если сайт на HTML) или в файл header.php темы (если CMS) необходимо подключить файл my_form.css, библиотеку jquery и файл ajax.js
Для HTML сайта:

<link rel=»stylesheet» href=»ajax_form/my_form.css»>
<script src=»ajax_form/jquery.min.js»></script>
<script src=»ajax_form/ajax.js»></script>

Для Вордпресс:

<link rel=»stylesheet» href=»<?php bloginfo(‘template_url’); >/ajax_form/my_form.css»>
<script src=»<?php bloginfo(‘template_url’); >/ajax_form/ajax.js»></script>

Библиотеку jquery на вордпресс можно не подключать, она уже подключена по умолчанию.

3. В то место где вы собираетесь разместить форму, вставить следующий код:

<!—*******************contact form************************* —>
<h4 class=»footer-title yellow»>Обратная связь</h4>
<div class=»footer-content»>
<div id=»result_form»></div>
<?php
$a = rand(1,10);
$b = rand(1,10);
?>
<form class=»contact_form» method=»post» name=»ajax_form» id=»ajax_form» action=»»>
<div class=»my_form»>
<input type=»text» name=»name» placeholder=»Ваше имя» size=»20″ maxlength=»40″ required />
</div>
<div class=»my_form»>
<input type=»email» name=»email» placeholder=»E-mail» size=»20″ maxlength=»40″ required />
</div>
<div class=»my_form»>
<textarea name=»mess» placeholder=»Ваше сообщение» cols=»25″ rows=»4″ maxlength=»300″ required ></textarea>
</div>
<div class=»my_form»>
<label><?php echo «Антиспам » . $a . » + » . $b . » = » ?></label>
<input name=»a» readonly type=»hidden» value=»<?php echo $a ?>» /> <!— readonly — не редактируется —>
<input name=»b» readonly type=»hidden» value=»<?php echo $b ?>» />
<input name=»sum» type=»text»size=»2″ placeholder=» ?» maxlength=»300″ required />
</div>
<div class=»center yellow»>
<input class=»btnform» type=»button» name=»btnform» id=»btnform» value=»Отправить» />
</div>
</form>
</div>
<!—*******************End contact form****************** —>

3. В файле ajax.js в 11 строке прописать путь до файла action_ajax_form.php. В вордпресс это будет так:

url:»http://Ваш сайт/wp-content/themes/Ваша_тема/ajax_form/action_ajax_form.php»

4. В файле action_ajax_form.php в строке 49 прописать свой адрес электронной почты.
На этом все.  Если вы все сделали правильно, то форма обратной связи php будет работать. Проверено.

Если немного разбираетесь в CSS, можете изменить или прописать свои стили в файле my_form.css.

Скачать форму обратной связи php с математической капчей:  ajax_form

Удачи!


Рубрики: Полезное на сайт Тэги: |
Понравилась статья? Поделись!
        

Всего комментариев: 0

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

Ваш email не будет опубликован.