Как сделать форму обратной связи для сайта HTML, CSS, PHP?
Один из самых нужных элементов на сайте — это форма обратной связи. Формы используются для сбора данных о пользователях, для связи между пользователем и владельцем сайта, для загрузки файлов и многое другое. Формы — основной атрибут LANDING PAGE. Давайте посмотрим ка сделать простую форму обратной связи используя php.
Шаг первый — делаем форму на HTML
Не буду рассказывать все с нуля, предполагаю что вы уже сделали все необходимое для начала работы, то есть начинаем с того, что у нас в какой-то папке есть три файла:
index.html
style.css
post.php
Чтобы создать форму, в файл index.html нам нужно поместить следующий код:
<form action="post.php" method="post">
<h1>Задайте вопрос и мы вам перезвоним</h1>
<label for="name">Введите имя:</label><input type="text" name="name" id="" required><br>
<label for="email">Ваш E-mail:</label><input type="email" name="email" id=""><br>
<label for="phone">Ваш телефон:</label><input type="tel" name="phone" id="" required><br>
<label for="text">Ваш вопрос:</label><textarea name="text" id="" cols="30" rows="2"></textarea><br>
<input class="but" type="submit" value="Отправить">
</form>
В браузере будет примерно следующее:
Что ж похоже на форму но не красиво. Переходим к CSS.
Шаг второй — работаем над стилем формы.
Чтобы привести форму в надлежащий вид мы меняем ее style (как подключить файл style.css к сайту). То есть в style.css вносим код:
body {
font-family: 'Roboto';
}
form {
text-align: center;
width: 350px;
}
h1 {
font-size: 24px;
}
input {
margin: 5px;
height: 25px;
width: 225px;
}
.but {
margin-left: auto;
margin-right: auto;
height: 30px;
width: 150px;
}
Теперь наша форма имеет такой вид:
Осталось написать скрипт для отправки сообщения на почту.
Шаг третий — PHP скрипт для отправки письма.
Чтобы сайт обрабатывал и оправлял на почту введенную информацию, пишем короткий код в файл post.php:
<?php
$name = htmlspecialchars($_POST["name"]);
$mail = htmlspecialchars($_POST["email"]);
$tel = htmlspecialchars($_POST["phone"]);
$message = htmlspecialchars($_POST["text"]);
$address = "Ваш эл.адрес";
$mes = "Сообщение с сайта.
Имя отправителя: $name
Эл.почта отправителя: $email
Телефон отправителя: $tel
Сообщение: $message";
if (mail($address, $mes)) {
header('Refresh: 5; URL=https://sh-info.ru');
echo '
Письмо отправлено, через 5 секунд вы вернетесь на сайт';}
else {
header('Refresh: 5; URL=https://sh-info.ru');
echo '
Письмо не отправлено, через 5 секунд вы вернетесь на сайт';}
?>
Этот скрипт отправит сообщение на почту которую вы укажете в значении переменной $address
Ну что же, мы сделали самую простую форму для сайта, в дальнейшем мы ее будем усовершенствовать и доводить до ума. Я хотел описать лишь общий принцип работы. Если он понятен, то можно двигаться дальше и делать все лучше и лучше, ведь нет предела совершенству.