Москва, Строительный проезд, 7А кор. 4 Работаем: 24/7 +7 495 744 67 74

JavaScript: Простая форма обратной связи

Не стану много писать о достоинствах и промашках этой простой формы обратной связи, а перейдем сразу к делу. Единственное о чем нужно подчеркнуть, так это то, что в ней присутствуют все необходимые атрибуты формы – это проверка заполнения полей, защита от спама, которые построены на JavaScript-е.

Для создания формы обратной связи нам потребуется само тело формы. Пускай нам нужно создать форму с такими вот полями:
— имя;
— сообщение;
— e-mail;
— контактный телефон;
— контрольное число для защиты.

Создам HTML-разметку

<form action=’index.php’ method=»post»>
<p> Ваше имя: </p>
<input type=»text» name=»fnm» value=»»>
<p> Сообщение: </p>
<textarea name=»text»></textarea>
<p> E-Mail: </p>
<input type=»text» name=»email» value=»»>
<p> Контактный телефон: </p>
<input type=»text» name=»phone» value=»»>
<p> Введите сумму 10+10: </p>
<input type=»text» name=»summa» id=’summa’ value=»»><br>
<input type=»hidden» name=»hidden» value=»ok»>
<input type=»submit» value=»отправить» name=»Submit» onClick=»return Formdata(this.form)»>
</form>

Представленная разметка формы уже раскрывает принцип работы защиты – это ранее  заложенное некоторое число, которое является результатом не сложных математических вычислений. В данном случаи – это число 20. Если нужно схитрить, то можно установить несколько выражений, ответом на которые есть наше число 20, но это уже совсем другая тема для очередного материала.

Продолжим. Приведем JavaScript, который непосредственно производит проверку заполнения поля формы:
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.fnm != null && data.fnm.value.length < 3 )
{
alert(‘Заполните поле «Ваше имя»‘);
return false;}

/* если не заполнено поле Сообщение */
if (data.text != null && data.text.value.length < 3)
{
alert(‘Заполните поле «Сообщение»‘);
return false;}

/* e-mail Юзера */
if(data.email != null && data.email.value.length == 0)
{
alert(‘поле «E-Mail» пустое’);
return false;}

if(data.email != null && data.email.value.length < 6)
{
alert(‘слишком короткий «E-Mail»‘);
return false;}

if(!(/^\w+[-_\.]*\w+@\w+-?\w+\.[a-z]{2,4}$/.test(data.email.value)) )
{
alert(«Введите правильный E-Mail адрес»);
return false;}

/* контактный телефон */
if(data.phone != null && data.phone.value.length == 0)
{
alert(‘поле «Контактный телефон» пустое’);
return false;}

if(data.phone != null && data.phone.value.length < 5)
{
alert(‘поле «Контактный телефон» должно содержать минимум пять символов’);
return false;}

if(!(/^[0-9-+()s]+z/.test(data.phone.value+»z»)))
{
alert(‘»Контактный телефон» указан неверно’);
return false;}

/* делаем чтобы поле сумма было равно определенному числу */
number = document.getElementById(«summa»);
if (number.value !== ’20’)
{
alert(‘»Сумма» не введена или введена неверно’);
return false;}
}

Что-то комментировать еще в приведенном коде считаю не нужно, ведь в каждом из условий сначала идет название самого поля – fnm, которое, например, заранее обозначено в HTML-разметке и потом уже само действие.
Следует отметить, что приведенный JavaScript проверки полей нужно разместить в отдельном файле, например, пускай это будет файл с именем – data.js и который нужно подключить к файлу с нашей формой. Для этого, между тегами <head>…</ head > установим строку
<!— не ошибитесь с путем к файлу —>
<script type=»text/javascript» src=»data.js»></script>

И в завершении, осталось только отправить сообщение на электронную почту, если же конечно, все поля заполнены. Чтобы происходила отправка сообщения, напишем следующие строки сразу, после HTML-разметки:
<?php
if(@$_POST[«hidden»])
{
$dt=date(«d F Y, H:i:s»); // дата и время
$mail=»my@email.ru»; // e-mail куда уйдет письмо
$title=»»; // заголовок(тема) письма
$fnm=$_POST[«fnm»];
$fnm=htmlspecialchars($fnm); // обрабатываем

$text=$_POST[«text»];
$text=htmlspecialchars($text); // обрабатываем
$text=str_replace(«\r\n»,»<br>»,$text); // обрабатываем

$email=$_POST[«email»];
$phone=$_POST[«phone»];

$mess=»<b>Имя:</b> $fnm<br>»;
$mess.=»<b>Сообщение:</b> $text<br>»;
// ссылка на e-mail
$mess.=»<b>E-Mail:</b> <a href=’mailto:$email’>$email</a><br>»;
$mess.=»<b>Телефон:</b> $phone<br>»;
$mess.=»<b>Дата и Время:</b> $dt»;

$headers=»MIME-Version: 1.0\r\n»;
$headers.=»Content-type: text/html; charset=windows-1251\r\n»; //кодировка
$headers.=»From: oursite.ru\r\n»; // откуда письмо (необязательнакя строка)
mail($mail, $title, $mess, $headers); // отправляем

// выводим уведомление и перезагружаем страничку
print»
<script language=’Javascript’ type=’text/javascript’>
<!—
alert (‘Ваше сообщение отправлено! Спасибо!’);
function reload()
{location = \»index.php\»};
setTimeout(‘reload()’, 0);
—>
</script>»;
}
?>


адрес

г. Москва, Строительный пр., 7Ак4

телефон

+7 495 744 67 74Круглосуточно
Яндекс.Метрика

Если у Вас есть вопросы, жалобы или предложения по работе нашей компании, напишите нам Нам важно любое мнение. Спасибо.