Форма обратной связи 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