• Главная
  • Карта сайта
Не найдено

Простейшая всплывающая форма обратной связи для сайта

Опубликовано: 06.09.2018

Вот сижу и думаю, что бы такое написать в статье, чтобы вам было интересно и полезно?! Эврика! Придумал! Сегодняшняя статья будет рассказывать о том, как создать простую всплывающую форму обратной связи для сайта , созданную на 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" "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>

Вот и все! Правда не сложно? Если сложно, вы можете скачать исходник:

Спасибо вам, что посетили мой блог, всего хорошего!

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

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: для сайта , форма обратной связи

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss