Блог Новой студии

Создание формы обратной связи для сайта

Создание формы обратной связи для сайта

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

Для начала визуализируем нашу форму на сайте, для этого в html коде вашей страницы в нужном месте добавим следующий код:

<form id=”callback”>

<h3>Напишите нам</h3>

<input type=”text” name=”name” placeholder=”Введите Ваше имя” required />

<input type=”text” name=”phone” placeholder=”Введите Ваш телефон” required />

<input type=”email” name=”email” placeholder=”Введите Ваш E-mail” required />

<textarea name=”textarea” placeholder=”Введите сообщение”></textarea>

<button class=”button” type=”submit”>Отправить</button>

</form>

Данный пример формы содержит поля для получения от пользователя Имени, телефона, электронной почты, а также комментария к сообщению, при этом первые три поля являются обязательными для заполнения, т. к. в тэге <input/> мы указали свойство required. Если Вы хотите сделать поле необязательным — просто уберите это свойство из тэга.

Еще одной составной частью формы отправки сообщения будет php файл, который мы разместим в корне сайта. Пусть это будет mail.php в который запишем:

А теперь свяжем нашу форму в html и код отправки письма в php файле между собой, а также сделаем отправку письма без перезагрузки страницы, для этого создадим js файл который подключим к нашей странице, либо в уже готовый js файл занесем нужный код, который будет выглядеть так:

<?php

$recepient = ”mail@mail.com”;

$sitename = ”Ваш сайт”;

$name = trim($_GET[”name”]);

$phone = trim($_GET[”phone”]);

$email = trim($_GET[”email”]);

$textarea = trim($_GET[”textarea”]);

$pagetitle = ”Новое письмо с сайта \”$sitename\””;

$message = ”Имя: $name \nТелефон: $phone \nE-mail: $email \nГород: $city \nСообщение: $textarea”;

mail($recepient, $pagetitle, $message, ”Content-type: text/plain; charset=\”utf-8\”\n From: $recepient”);

?>

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

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

Понравился пост?
Помоги другим узнать об этой статье, кликни на кнопку социальных сетей!

2017-04-18
1 голос2 голоса3 голоса4 голоса5 голосов ( 1 оценок, среднее: 5,00 из 5 )
Загрузка...

Добавить комментарий

Обязательные поля помечены *

*