Простейшая всплывающая форма обратной связи для сайта
Опубликовано: 06.09.2018
Вот сижу и думаю, что бы такое написать в статье, чтобы вам было интересно и полезно?! Эврика! Придумал! Сегодняшняя статья будет рассказывать о том, как создать простую всплывающую форму обратной связи для сайта , созданную на html.
Итак, форма обратной связи состоит из трех файлов:
1. HTML форма «form.html»
2. Обработчик формы «send.php» 3. Страничка благодарностиКод формы обратной связи:
1. HTML форма « form.html »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Задать вопрос</title> <style> form li { list-style:none; padding:5px 0; } body { background:#ecf9fe; font-family: Arial; } </style> </head> <body> <form method="post" action="send.php" style="width: 220px;"> <ul> <li><input type="text" name="name" placeholder="Ваше Имя" class="name" required /></li> <li><input type="text" name="email" placeholder="Ваш E-mail" class="name" required /></li> <li><textarea name="quest" placeholder="Ваш вопрос" rows="6" cols="40" required ></textarea></li> <li><input type="submit" name="subscribe" value="Отправить!"></li> </ul> </form> </body> </html>Вы можете поменять цвет фона в пункте [13] .
2. Обработчик формы « send.php »
<?php $name = $_REQUEST['name']; $email = $_REQUEST['email']; $quest = $_REQUEST['quest']; $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html;charset=utf-8 \r\n"; $message = "<p>Новый вопрос</p> <p><strong>Имя:</strong> $name</p> <p><strong>Email:</strong> $email</p> <p><strong>Вопрос:</strong> $quest</p>"; mail( "ваш e-mail", "Тема письма", $message, $headers ); header( "Location: https://ваш сайт/thankyou.html" ); ?>Обратите внимание на два пункта: [13] и [15] .
Укажите там ваш E-mail адрес, на который вы хотите получать письма, тему письма (например, форма обратной связи с блога BlogGood.ru ) и путь к файлу thankyou.html (например: https://bloggood.ru/ thankyou.html ).3. Страничка благодарности или отчета об отправке письма « thankyou.html »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Спасибо!</title> </head> <body style="background:#fbedca"> <div style="margin:20px 0 0 30px"> <h1 style="color:#666;font:bold 22px Tahoma">Ваш вопрос отправлен</h1> <p>Мы постараемся ответить на него как можно скорее :)</p> </div> </body>Вы можете поменять цвет фона в пункте [7] , и, естественно, текст самого сообщения, которое увидит посетитель после отправки письма.
ВНИМАНИЕ, ЭТО ВАЖНО!!!
Чтобы форма обратной связи появилась в всплывающем окне, установите на сайте вот этот код ссылки на файл « form.html »:
<a href="form.html" target="_blank" onclick="window.open('form.html','Задать вопрос','resizable=yes,width=550,height=350,left=500,top='+(screen.availHeight/2-365)+'');return false;">Задать вопрос</a>Вот и все! Правда не сложно? Если сложно, вы можете скачать исходник:
Спасибо вам, что посетили мой блог, всего хорошего!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: для сайта , форма обратной связи
