Форма обратной связи 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 не будет опубликован.