Вот сижу и думаю, что бы такое написать в статье, чтобы вам было интересно и полезно?! Эврика! Придумал! Сегодняшняя статья будет рассказывать о том, как создать простую всплывающую форму обратной связи для сайта, созданную на html.
Кстати, эта форма обратной связи подойдет не только для сайта, созданного на html, но и на WordPress и Joomla.
Итак, форма обратной связи состоит из трех файлов:
1. HTML форма «form.html»
2. Обработчик формы «send.php»
3. Страничка благодарности
Код формы обратной связи:
1. HTML форма «form.html»
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 ENGINE="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: http://ваш сайт/thankyou.html" ); ?>
Обратите внимание на два пункта: [13] и [15].
Укажите там ваш E-mail адрес, на который вы хотите получать письма, тему письма (например, форма обратной связи с блога BlogGood.ru) и путь к файлу thankyou.html (например: /thankyou.html).
3. Страничка благодарности или отчета об отправке письма «thankyou.html»
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://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>
Вот и все! Правда не сложно? Если сложно, вы можете скачать исходник:
Спасибо вам, что посетили мой блог, всего хорошего!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как вытащить любое значение с атрибута – JS
Сайт пока не может обработать этот запрос HTTP ERROR 500
Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Как получить значение ID при клике по слову?Похожие статьи
Форма обратной связи с капчей на PHP
Картинка, меняющаяся при наведении мыши
Видео как фон сайта. HTML5
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504
79 Ответов на комментарий - Простейшая всплывающая форма обратной связи для сайта
Добавить комментарий
Метки: для сайта, форма обратной связи
А я писал про другой вариант, для wordpress – связка плагинов FancyBox и Contact Form дают красивое вплывающее окошко с эффектами при нажатии на кнопку или ссылку. Это позволяет настроить форму обратной связи или заказа, и поставить просто кнопку на сайт.
Спасибо, Юрий, за комментарий и идею, как сделать простейшую всплывающую форму обратной связи! Обязательно почитаю о плагине FancyBox.
Ошибка 404 при скачивании…
Спасибо, Дмитрий, что сказали за ошибку 404! Я все исправил.
Извините, что долго не отвечал на ваш комментарий, так как он находилось в СПАМе
здравствуйте. а можно для тупых объяснить, куда эти файлы надо складывать, чтобы форма работала?
Здравствуйте, Артем! Вы не тупы, возможно я просто не сумел объяснить так как нужно. Все файлы нужно выложить на хостинг (это то место где лежит сайт).
Очень прошу, подкорректируйте пожалуйста скрипт формы обратной связи в всплывающем окне, а именно, всплывающее окно работает отлично, но при нажатии мыши в любом месте прячется за основное окно браузера и люди его теряют, что приводит к недоразумениям.
подкорректируйте, пожалуйста, что бы всегда на верху слой был. спасибо.
Виталий, здесь ничего подкорректировать не нужно, такой код, потому и называется статья “простейшая всплывающая форма обратной связи для сайта”. Если вы заметили, в коде присутствует “target=”_blank”
<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>target=”_blank – означает, что при нажатии ссылки “Задать вопрос”, файл “form.html” откроется в новом окне размерами 550х350.
Здравствуйте, Степан. А возможно ли вставить эту форму в лендинг, сделанный в html редакторе wix?
Здравствуйте, Марина! Редактором wix, я не пользовался! Но если там есть возможность редактировать HTML код, значит всплывающую форму вы сможете вставить. Марина, а Вы не пробовали создать одностраничный сайт в программе Microsoft Office FrontPage?
Не пробовала, изучаю web builder9 и adobe muse. Просто в wix очень удобно и интуитивно понятно.
Вставляла код формы в html , форма появилась, как у вас на скрине, но когда жмешь на кнопку Отправить – выдает ошибку. Как будто не прописан путь, я думаю дело в самом редакторе или что-то не правильно делаю
В любом случае, спасибо за ответ, у вас отличный блог, много полезной информации
Марина, Ваш сайт находиться в сети? Если нет, тогда эта ошибка из-за обработчика «send.php», так как написан он на языке программирования PHP. PHP работает только на сервере. Залейте все файлы на хостинг или на локальный сервер Денвера (Denwer) и смотрите на результат.
У меня wordpress.
В wp-content создал форму обратной связи состоящую из трех файлов:
1. HTML форма «form.html»
2. Обработчик формы «send.php»
3. Страничка благодарности «thankyou.html»
4. Чтобы форма обратной связи появилась в всплывающем окне, установил на сайте код ссылки на файл «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>Спасибо за полезную информацию!
У меня сайт на WordPress. Размещаю три файлика в корень темы (как и другие написанные мной скрипты) прописываю путь в ссылке “http: //название сайта.kz/form.html”. А вылазит 404. Может не туда складываю?
Да, не верно указали путь. Попробуйте вот так:
<a href="<?php bloginfo('url'); ?>/form.html">Ссылка</a>Добрый день. поставил предложенную вами форму на сайт. Окно формы запускается, но после заполнения полей и отправки сообщения пишет что страница thankyou.html не найдена. При этом путь прописал. Кстати, само письмо на ящик также не доходит. Подскажете в чём проблема?
Со страницей thankyou.html удалось разобраться, а вот письма не приходят.
В файле “send.php”, пункт [13] – вы указали email?
Здравствуйте! Укажите к страница “thankyou.html” правильный путь. Как указать путь, смотрите тут.
Если письма не приходят, проблема в обработчике (файл “send.php”).
Проверьте расширение файла “send.php”. Должно быть именно “send.php”, а не “send.html” ().
В файле “send.php” посмотрите пункт [13] – вы должны указать ваш email. Если указали, тогда проверьте, правильно ли вы указали email
Как реализовать такую же форму, но с записью данных полей в файл doc(rtf) и отправкой этого файла на почту?
Что-то не сильно понял ваш вопрос.
Спасибо за форму обратной связи ! Сначала не получалось, потом нашел где я что пропустил и теперь всё работает.
Пожалуйста! А что Вы сделали не так?
Во-первых сохранил файлы неправильно )) Сохранил просто с кодировкой UTF8, а нужно было сохранить в UTF8 (безBOM)
А вторая ошибка – закрывающие символы ?> должны быть на 15 строке файла send.php, дописал там и все прекрасно заработало.
символ “?>” у меня на 16 строке. Видимо Вы не до конца выделили код для сохранения.
Я рад, Александр, что Ваша проблема решилась.
Дело в том, что код был выделен полностью, то есть как Вы и сказали символ “?>” был на 16й строке, но не работало почему то. А когда прописал его на 15й строке все заработало.
Рекомендую Вам, Александр, немножко почитать основы php. Вдруг Вам это будет интересно.
Спасибо за ссылку. У Вас весь блог – просто кладезь полезной информации.
Буду рад, если Вы, Александр, частенько будете заходить ко мне в гости на блог!
Подскажите пожалуйста как такую форму добавить на сайт на платформе wix?
Платформой wix я не пользовался, но если там есть возможность редактировать HTML-код, тогда можно вставить код моей формы.
А не проще ли на своем блоге создать новую страничку и назвать Контакты, далее переходим в редактор и выбираем текст, после туда вставляем из form.html все что находится между тегами и и публикуем. А сам обработчик нужно загружать не там где папка с темой, а в корень вашего сайта в папку public_html и все будет работать
Пусть уже решать читатели, как им будет проще!
Спасибо, Александр, за комментарий!
Статья конечно хорошая. Но вот у меня есть такой вопрос: Степан, а вы не знаете как сделать так, чтобы сообщение об успешной отправке появлялось не в отдельной страничке, а к примеру рядом с формой, короче на той же странице где и форма?
В файле “index.html” пропишите вот так:
<a href="form.php" target="_blank" style="border:1px solid # 000000;" onclick="window.open('form.php','Задать вопрос','resizable=yes,width=550,height=350,left=500,top='+(screen.availHeight/2-365)+'');return false;">Задать вопрос</a>Теперь создайте новый файл “form.php” с таким кодом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://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> <?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 ); ?> <? if($email) {echo "Ура! Сообщение отправил!"; } ?> <form method="post" action="" style="width: 220px;"> <ul> <li><input ENGINE="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>Спасибо! Еще вопрос:
У меня php обработчик находится не html файле, тогда в action мне нужно прописать путь для обработчика правильно?
И самый первый код, нужно его поставить в кнопку Отправить сообщение, И получается что кнопка отправки submit не нужна?
А то я уже хотел использовать ajax. Просто делают один проект и решил в форме заявке сделать чтобы сообщение об отправке появлялось на той же страничке
Александр, обработчик должен быть вместе с формой и action оставляете пустым. Кнопка отправки submit нужна, как же тогда отправить письмо без нее.
Спасибо за ответ! Но получается что по клику открывается php файл в новом окне. А у меня форма отправки стоит на главной странице и мне нужно чтобы при нажатию на кнопку отправить появлялось сообщение в том же окне. У вас сама форма стоит в самом обработчике. Мне теперь что, получается нужно обработчик засунуть в индексный файл и сохранить его с расширением pnp, это я так понимаю.
Совершенно верно!
Вот почему то мне никак не хочется засовывать обработчик в индексный файл. Если использовать его отдельно, то нужно прикручивать ajax. Хотя можно и оставить по простому с Location или Refresh, это своего рода простая защита от случайной повторной отправки, так как поля формы обновляются.
Здравствуйте Степан!!! Я сделал все как Вы и описали, все работает, но имеется нюанс. Я отредактировал форму под свой сайт (цвет, заменил слова), загрузил файлы на хостинг, но все-равно форма выпадает с Вашим вариантом (цвет и слова. Редактировал в Нотепад++. Пытался отредактировать на самом хостинге, там вообще в место русских слов типа Задать вопрос и т.д., одни кракозябры. Все отредактированные файлы на рабочем столе компьютера, при открытии работают как мне нужно, а при загрузке их на хостинг, все-равно появляется форма с Вашим цветом и словами. Не знаю даже что и делать!!!
Здравствуйте, Денис! По поводу “кракозябры”, почитайте вот эту страницу о кодировке.
Далее, вы загружали вначале мои файлы на хостинг?
Жду ответа! Помогу!
Степан здравствуйте. Уже достаточно давно установил Ваши коды для простейшей обратной связи – Спасибо всё работает, но хотелось бы, что бы после того, как человек отправил письмо и увидел окошко с благодарностью – это окошко закрывалось самостоятельно – это было бы очень удобно. Если это возможно сделать, то напишите пожалуйста нужный код – думаю не один я буду благодарен. Спасибо заранее.
Здравствуйте, Александр! Можно использовать редирект.
Посмотрите, как я сделал здесь!
Еще рекомендую посмотреть статью “Перенаправление на другую страницу с помощью PHP, JavaScript или HTML (Redirect)”.
Здравствуйте Степан. Я не стал делать редирект, как Вы посоветовали, а просто поставил в страницу thankyou.html java скрипт window.close с закрытием по времени ID=window.setTimeout и окно теперь замечательно само закрывается.
Здравствуйте, Александр! Интересно посмотреть код
Здравствуйте Степан. Вот код:
<script ENGINE="text/javascript"> ID=window.setTimeout("Update();",1700); function Update(){ javascript:window.close(); } </script>Спасибо, Александо! Теперь я понял, как вы хотели. Может кому-то пригодиться, вот полностью готовый код:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Демо для скрипта закрытия страницы</title> </head> <body> <script ENGINE="text/javascript"> ID=window.setTimeout("Update();",5000); function Update(){ javascript:window.close(); } </script> <div align="center"> текст </div> </body> </html>Страница закроется через 5 секунд (5000мс).
Пожалуйста Степан. Пригодится код и другим, потому что смотрю в сети многие ищут самозакрывающиеся окна, а им предлагают и в саму jquery библиотеку залезать и еще другие заморочки.. А этот код очень простой и удобный.
Это точно! Еще раз спасибо
Степан здравствуйте. А какой код и куда нужно прописать чтобы не возможно было отправить мне письмо без указанного телефона. емейл и текста ?
Здравствуйте, Александр! Почитайте статью “HTML5 и его атрибуты для проверки формы“
Обработчик через чур простенький, сейчас напишу код с проверками на валидность и комментариями. Может кому пригодится
Есть поле для проверки БОТОВ, думаю будет полезно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://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> <?php // Функция Вывода информации об ошибках function getError($error) { if(count($error)) return "<h3>Ошибка!</h3><p>".implode("<br />",$error)."</p>"; } //////////////////////////////////////// /// Функция обработки переменных function html($data) { if(is_array($data)) $data = array_map("html", $data); else $data = trim($data); // удаляем пробелы по бокам $data = htmlspecialchars($data); $data = str_replace("'", '', $data); // удаляем одинарные кавычки $data = str_replace('"', '', $data); // удаляем двойные кавычки $data = str_replace('"', '', $data); //удаляем двойные кавычки $data = str_replace('&', '', $data); // удаляем амперсанд $data = str_replace('<', '', $data); // удаляем знак < $data = str_replace('>', '', $data); // удаляем знак > return $data; } //////////////////////////////////////// // Если переменная name передана // начинаем работу с переменными if (isset($_POST["name"])) { $name = html($_POST['name']); $email = html($_POST['email']); $quest = html($_POST['quest']); $bezspama = htmlspecialchars($_POST["bezspama"]); $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>"; // Создаем массив для ошибок // $error = array(); // Разрешаем ввод только букв пробелов и тере, // иначе показываем ошибку if (!preg_match("#^[а-яё\-\sa-z]+$#ius", $name)) { $error[] = 'Поле "name" заполненно неправильно!'; } if (!preg_match("#^[а-яё\-\sa-z]+$#ius", $quest)) { $error[] = 'Поле "quest" заполненно неправильно!'; } // Проверка почты if (!preg_match("/.+@.+\..+/i", $email)) { $error[] = 'Поле "email" заполненно неправильно!'; } // Поле bezspama должно быть пустым // защита от ботов if (!empty($bezspama)) { $error[] = 'Ты БОТ, а им запрещено отправлять форму!'; } // Если нет ошибок отправляем сообщение if(!count($error)) { mail( "ваш e-mail", "Тема письма", $message, $headers ); // При удачной отправке отправляем человека на // страницу благодарности header('Location: http://sait.ru/ok.html'); echo ''; } } ?> </head> <body> <!-- Здесь выводим сообщение о ошибке --> <div class="error"><?php echo getError($error); ?></div> <form method="post" action="send.php" style="width: 220px;"> <ul> <li><input ENGINE="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> <!-- Поле bezspama для ботов, человек его не видит, НО... --> <!-- БОТ видит и заполняет его,выходит ошибка и сообщение не отправляется --> <input name="bezspama" type="text" style="display:none" /> <li><input type="submit" name="subscribe" value="Отправить!"></li> </ul> </form> </body> </html>Почему я перенапрявляю на страницу благодарности? Да просто потому что если написать сообщение в echo , то при нажатии F5 сообщение опять отправится
Спасибо за код!
Пожалуйста Степан!
Здравствуйте Степан. Почему то в мобильной версии сайта, созданной при помощи Duda Mobile Website Builder во всех полях получаются кракозябры вместо русских слов. Пробовал кодировки менять – не помогло… Что может помочь, что бы и в мобильной версии нормально всё отображалось ?
Здравствуйте, Александр! Вы точно правильно указали кодировку?
Навсяк случай, посмотрите вот здесь
Здравствуйте Степан. Когда преобразовываю в UTF-8 (без BOM), то на сайте то же кракозябры почему то, а когда просто в UTF-8, то все нормально – на русском.
Сайт html на денвере внутри уже есть файл index.html ,и это файл с сайтом, вы здесь конкретно не указываете куда распаковать файлы , каждый файл куда вставить , можно поподробнее пожалуйста.
Алексей, все в корень сайта (“thankyou.html”, “send.php”, “form.html”).
Вот этот код, вставьте в “index.html” между тегами body:
<a href="form.html" target="_blank" style="border:1px solid # 000000;" onclick="window.open('form.html','Задать вопрос','resizable=yes,width=550,height=350,left=500,top='+(screen.availHeight/2-365)+'');return false;">Задать вопрос</a>Здравствуйте, Степан. В коде:
<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>наверно нужен слэш перед form.html.
Простите, не уточнил сразу, слэш нужен перед вторым ‘form.html’, перед первым не надо.
Здравствуйте, Александр!
Не могу понять, зачем там нужен слэш?
Александр, все равно не понятно, для чего там нужен слэш. Что оно нам даст в коде?
Здравствуйте Степан. Установил Вашу форму на сайт. Все сделал как Вы писали, но письма на почту не приходят, что не так сделал.
Здравствуйте, Николай!
А Вы поменяли в файле «send.php» в строке №13 на ваш e-mail?
Проверьте письма в спаме.
Спасибо, посмотрел письма приходят в спам, они всегда туда будут приходить.
на почте можно указать, что письмо не спам. По идее письма перестанут попадать в спам.
Все сдел, письма в спам не приходят. Спасибо.
Пожалуйста, Николай!
Здравствуйте Степан. Спасибо за форму обратной связи. Все хорошо, но при открытии на смартфоне форма имеет малюсенький вид , располагается в верхнем углу и открывается в новом окне. Как сделать чтоб при открытии она имела огромный и читабельный вид? Если не затруднит, пожалуйста напишите. Спасибо.
Здравствуйте, Леонид!
У Вас сайт сделан на Bootstrap.
Даю Вам свой бесплатный курс по Bootstrap. Вы там найдете как сделать форму и всплывающее окно.
Вот сам курс – “Бесплатный курс «основы BootStrap3»“
Здравствуйте Степан! Спасибо за форму. Она отлично работает. Только вот письмо приходит только на ящик Яндекса. На mail.ru письмо не приходит. Ну и на ящики на менее популярных почтовых сервисах тоже не получилось. Не подскажете с чем это может быть связано? Хостинг?
Здравствуйте, Вячеслав. Письма могут находится в СПАМе