Все для создания и продвижения сайтов

Верстка, программирование, SEO

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

количество просмотров 9889
Ajax форма обратной связи

Для создание обратной формы на Ajax, вам потребуется создать три файла.

  1. index.html - Главная страница, в ней разметка формы в HTML
  2. script.js - В этом файле формируем Ajax для формы
  3. form.php - Здесь мы будем обрабатывать форму через php

1. Создадим первый файл index.html и в нём мы создадим форму:



<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Название страницы</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
	<form id="myform" method="POST">
		<input type="text">
		<input type="hidden" name="question" value="1">
		<textarea type="text"  name="message" placeholder="Ваш вопрос"></textarea>
		<input type="button" class="btn-form" value="Задать вопрос" >
	</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

2. Теперь файл script.js, где мы будем формировать Ajax-запрос (не забудьте подключить библиотеку jquery).

jQuery(function($){
	jQuery('#myform').click(function(){
		form = $(this).parent('form');
		$.ajax({
			url: 'form.php',
			type: 'GET',
			dataType: 'json',
			data: ({
				'mes': $(this).parent('form').find('textarea').val(),
				'question': $(this).parent('form').find('input[name=question]').val(),
				'span': $(this).parent('form').find('input[name=span]').val()
				}),
			success: function(response){
				if (response){ // если есть ответ, то выполняем след. действия
					form.append('
Спасибо за ваше сообщение
'); } else { form.append('
Ошибка!
'); } } }); }); });

1. Создали форму и ajax-скрипт для неё, теперь её нужно обработать, создаём файл form.php и в нём пишем:

<?php
$addresses = array(
	'mail1@gmail.com',
	'mail2@gmail.com',
);

if (isset($_REQUEST['mes']) && !empty($_REQUEST['mes'])){
	if (empty($_REQUEST['span'])){
		$question = $_REQUEST['question'];
		$message = $_REQUEST['mes'];
		$send = "На сайте site.ru задали вопрос №".$question.": ".$message;
		$to= implode(', ', $addresses);
		$from = "no-replay@ru-bezh.ru";
		$subject = "Вопрос от сайта";
		$headers = "From: $from\r\nReplay-To: $from\r\nContent-type: text/plain; charset=utf-8\r\n";
		mail($to, $subject, $send, $headers);
	}
}
?>

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

Читайте о создании простой обратной форме на php и обратной связи на modx c защитой от спама.

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.