Форма обратной связи на PHP с отправкой на e-mail. Создание формы обратной связи Скрипт обратной связи html

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

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

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

Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)

Рис.1. Простая форма обратной связи

Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.

1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.

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

Как видим, вся форма создаётся тегом

с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге </b> задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").</p> <p><b>3. </b> Создадим новую страницу <b>mail.php </b>, аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br> <title>Обратная связь</title><br> </head><br> <body><br><?php <br> if (isset($_POST["name"])) {$name = $_POST["name"];}<br> if (isset($_POST["email"])) {$email = $_POST["email"];}<br> if (isset($_POST["mess"])) {$mess = $_POST["mess"];}</p><p> $to = "pupkin@rambler.ru "; /*Укажите ваш адрес электоронной почты*/<br> $headers = "Content-type: text/plain; charset=utf-8";<br> $subject = "Сообщение с вашего сайта";<br> $message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";<br> $send = mail ($to, $subject, $message, $headers);<br> if ($send == "true")<br> {<br> echo "<b>Спасибо за отправку вашего сообщения!<p>";<br> echo "<a href=index.html> Нажмите,</a> чтобы вернуться на главную страницу";<br> }<br> else <br> {<br> echo "<p><b>Ошибка. Сообщение не отправлено!";<br> }<br>?> <br> </body><br> </html></p> <h5><i>Рис.2. </i> Код страницы обработки формы обратной связи</h5> <p>Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:</p> <ul><li>pupkin@rambler.ru - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. <b>CAPTCHA </b> - Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей. <br> Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую.</li> <li>a href=index.html - адрес главной (домашней) страницы сайта.</li> </ul><p>Созданную страницу <b>mail.php </b> необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.</p> <p>Проверьте работоспособность формы обратной связи. Если всё сделано аккуратно, то после заполнения формы и нажатия <b>Отправить сообщение </b> должен появиться следующий текст: "<b>Спасибо за отправку вашего сообщения. , чтобы вернуться на главную страницу </b>". После этого вы обнаружите в своём почтовом ящике (или другом, который вы указали при создании формы обратной связи) собственное послание себе любимому.</p> <blockquote> <p><b><i>Замечание: </i> </b> на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.</p> </blockquote> <p>Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку <b>charset=utf-8 </b>. Если вы используете программу <b>Adobe Dreamweaver </b>, то для этого надо выбрать раздел меню <b>Изменить - Свойства страницы - Кодировка </b>.</p> <p>Подробнее проблема с кодировкой файлов сайта рассмотрена в статье Проблемы с кодировкой в форме обратной связи .</p> <p>В описанном примере для простоты сообщение об отправке письма выводится на пустой странице. Конечно, вы можете разместить его на любой странице своего сайта, чтобы посетитель мог использовать навигацию (меню) для выбора дальнейших действий. Для этого поместите РНР-код (то, что расположено от <<b>?php </b> до <b>?> </b>) в нужное место страницы с меню и измените её название на mail.php.</p> <p>Кроме размещения самой формы обратной связи, желательно проверять правильность заполнения её полей посетителем. Это необходимо делать для того, чтобы вам не приходили пустые письма и ваш почтовый ящик не забивался хламом, отсылаемым шутниками, любящими просто понажимать кнопку <b>Отправить сообщение </b>. О методах проверки заполнения формы обратной связи и защиты от спама рассказано в статьях "</p> <p>Любой сайт должен иметь форму обратной связи, поэтому рано или поздно, каждый из нас задумывается о ее разработке. Вариантов в сети достаточно много, кто-то использует популярные плагины, кто-то свои личные наработки, но большая часть ищет готовые решения. В любом случае, наша <b>форма обратной связи для сайта </b> будет рабочей и функциональной и обо всем этом по порядку.</p><h2>HTML</h2><p>Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.</p><p> <form class="form"> <input type="text" name="mfbName" placeholder="Имя:" required/> <input type="text" name="mfbMail" placeholder="Email:" required/> <input type="text" name="mfbPhone" placeholder="Телефон:" required/> <input type="submit" value="Отправить" /> </form> </p><p>Каждый input у нас имеет свое уникальное имя name , оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input , но и select , textarea . Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required , благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.</p><h2>CSS</h2><p>Когда форма готова, можно ее немного преобразить. Тут все также зависит от ваших потребностей и фантазий. Я же, для наглядности набросал немного стилей для каждого элемента, чтобы не выглядело все столь плоским. Но если вам лень или не знаете как это делается, то можете использовать мой вариант:</p><p>Form{ max-width: 400px; width: 100%; margin: 0 auto; } input{ box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; width: 100%; margin: 10px 0; outline: none; } input{ background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border-radius: 5px; color: white; text-transform: uppercase; font-weight: 600; width: 200px; cursor: pointer; transition: 0.3s; } input:hover{ background: black; box-shadow: 0px 2px 0 1px black; } </p><h2>Клиентская часть</h2><p>Здесь уже стоит разобраться более детально, точнее выбрать для себя подходящий вариант. Для отправки сообщений на почту нам понадобится использовать язык php , т.е. создавать отдельный файл, в который мы будем передавать все эти данные. Но мы данный способ здесь не будем рассматривать, так как гораздо красивее, когда у нас все происходит без перезагрузки страницы. Поэтому мы рассмотрим отправку данных через ajax .</p><p>Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method (post или get). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action , который укажет путь к файлу php .</p><p>А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим <b>contact.php </b> и <b>custom.js </b>.</p><p>Первым делом не забываем подключить библиотеку <b>Jquery </b>, с ее помощью мы в несколько раз сократим код и сможем с легкостью производить любые действия используя готовые решения.</p><p> $(".form").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function(msg) { if(msg == "ok") { alert("Письмо отправлено"); } else { alert("Ошибка! Возможно вы неправильно заполнили поля."); } } }); return false; }); </p><p>Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.</p><p>If (trim($_POST["mfbPhone"]) == "") { echo "false"; } else { $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["mfbPhone"]); // от кого $fromMail = "test@test.ru"; // Сюда введите Ваш email $emailTo = "admin@mail.ru"; $subject = "Обратная связь"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Пример формы<$fromMail>\n"; $headers .= "Content-type: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s O") ."\r\n"; // тело письма $body = "Получено письмо с сайта ".$site." \n\nИмя: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСообщение: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; } </p><p>Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.</p><p>demo </p><p>файлы </p><h2>Готовые плагины</h2><p>Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин <b>Contact Form 7 </b> в нескольких проектах.</p><p>Он очень удобен в настройках и практически всегда работает безукоризненно. Если вам понадобится создать свой уникальный дизайн, вы это сможете сделать. Достаточно лишь в конструкторе добавить необходимые поля, перевести и изменить оповещения об ошибках и успешной отправке на свой лад и все готово. Дальше копируете шорткод и вставляете в нужном месте вывода формы.</p><p><br><img src='https://i0.wp.com/myfreelanceblog.net/wp-content/uploads/2017/05/form7.jpg' align="center" width="100%" loading=lazy></p><p>У меня проблем с плагином никогда не возникало и если вам необходимо быстрое и готовое решение, то это именно оно. Если же у вас к форме свои требования по функционалу и дизайну, то лучше использовать первый вариант, который требует знаний в этой отрасли.</p> <p>Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.</p> <p>К примеру, посетитель зашел на ваш сайт, просмотрел необходимую ему информацию, вроде бы уже готов заказать ваш товар или услугу, но вот звонить в другой город и тратить большие деньги ему совсем не хочется. Вот в такие моменты и приходит на помощь всплывающая форма обратной связи.</p> <h2>Создаем форму обратной связи на html</h2> <p>Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.</p> <p><u>Вставляем в нужное место на сайте следующий код: </u></p> <h2>Онлайн заявка</h2> <p>По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.</p> <p>Код вставлен, что мы видим?</p> <p>Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:</p><p> /* Форма обратной связи */ #inline { margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; } .txt { display:inline-block; color:#676767; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; } .txtarea { display:inline-block; color:#676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; } .txt:focus, .txtarea:focus { border-style:solid; border-color:#bababa; color:#444; } input.error, textarea.error { border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; } input.error:focus, textarea.error:focus { border-color:#973d3d; color:#a35959; } #send { color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; } #send:hover { background:#979797; } /* Форма обратной связи */ </p><p><img src='https://i1.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma2.jpg' align="center" width="100%" loading=lazy></p> <p>Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.</p> <p>Выглядит это вот так:</p> <p><img src='https://i1.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma3.jpg' align="center" width="100%" loading=lazy></p> <p>Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.</p> <p>Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.</p> <p>Подключаем скрипт перед закрывающимся тегом. Не забудьте поменять путь к файлу на свой. Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.</p> <p><u>Для этого перед закрывающимся тегом вставьте следующий скрипт: </u></p> <p><b>Как работает этот скрипт? </b></p> <ol><li>Производит проверку введенного e-mail.</li> <li>Указывает поля, с которыми будет работать.</li> <li>Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.</li> <li>Обрабатывает введенную информации и инициирует отправку уведомления на почту.</li> <li>Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.</li> </ol><p>Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.</p> <?php // Обязательно измените e-mail на свой $sendto = "mail@mail.ru"; $usermail = $_POST["email"]; $username = $_POST["name"]; $userphone = $_POST["phone"]; $content = nl2br($_POST["msg"]); // Формирование заголовка письма $subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; // Формирование тела письма $msg = " "; $msg .= "<p?>Новое сообщение\r\n"; $msg .= "<p><b>Имя: </b> ".$username."</p><p>\r\n"; $msg .= "</p><p><b>Номер телефона: </b> ".$userphone."</p><p>\r\n"; $msg .= "</p><p><b>Почта: </b> ".$usermail."</p><p>\r\n"; $msg .= "</p><p><b>Сообщение: </b> ".$content."</p><p>\r\n"; $msg .= " "; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "true"; } else { echo "false"; } ?> </p><p>Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.</p> <p>Добавляем всплывающую форму обратной связи на сайт</p> <p>Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней.</p> <p>Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.</p> <p>Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой.</p> <p>И придаем ей стили.</p><p>Modalbox { color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-decoration:none; text-align:center; margin:0 auto 20px; } .modalbox:hover { background:#979797; } </p><p>Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.</p> <p>После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.</p><p> #inline { display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; } </p><p>В итоге у нас получается вот такая кнопочка.</p> <p><img src='https://i0.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma4.jpg' align="center" width="100%" loading=lazy></p> <p>При нажатии на которую открывается всплывающее окно с обратной связью.</p> <p><img src='https://i0.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma5.jpg' align="center" width="100%" loading=lazy></p> <p>Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.</p> <p>Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл <b>sendmessage.php </b>.</p> <h2>Форма обратной связи для wordpress</h2> <p>В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.</p> <p>После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.</p> <p><img src='https://i2.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma6.jpg' align="center" width="100%" loading=lazy></p> <p>Вводите название новой формы, выбираете поля, которые должны быть в форме. Обычно вполне хватает стандартных, которые добавлены автоматически. Сохраняете форму.</p> <p>После сохранения на экране появится шорткод, который нужно будет вставить на страницу, где должна будет отображаться контактная форма, например, на странице Контакты.</p> <p><img src='https://i2.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma7.jpg' align="center" width="100%" loading=lazy></p> <p>Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.</p> <p><img src='https://i2.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma8.jpg' align="center" width="100%" loading=lazy></p> <p>Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:</p> <p><img src='https://i0.wp.com/seoblognik.ru/wp-content/uploads/2016/05/forma9.jpg' align="center" width="100%" loading=lazy></p> <p>Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.</p> <h2>Делаем всплывающую форму обратной связи для wordpress</h2> <p>Я сам не люблю добавлять лишние плагины на данный движок, так как они грузят сайт, замедляя его работу. Поэтому для всплывающей формы использую обычно 2 варианта.</p> <ol><li>Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.</li> <li>Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.</li> </ol><p>Первый способ уже был описан выше, поэтому сразу перейдем ко второму.</p> <p>Для начала, вставляем следующий код сразу после открытия тега body.</p> <p>X <?php echo do_shortcode(""); ??></p> <p>Давайте разберемся что есть что:</p> <ul><li>Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.</li> <li>Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.</li> <li>Блок callme будет содержать саму форму обратной связи.</li> <li>X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.</li> <li>Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.</li> </ul><p>Обратите внимание на то, что у вас id и название формы могут отличаться от моих. Новый код добавлен, теперь задаем ему стили.</p><p>Bg-b { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; } body { position:relative; } .callme { position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border-radius:4px; } .callme small { position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; } </p><p>Сохраняем код и проверяем. Теперь форма должна быть расположена по середине вашего экрана, а сзади нее полупрозрачный затемненный фон. Все хорошо, но осталось добавить последнее – скрипт, который будет открывать и прятать данную форму при клике на нужные кнопки.</p> <p>Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.</p> <p>Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.</p> <p>Мы рассмотрели с вами несколько вариантов создания формы для обратного звонка. Надеюсь, что у вас не возникнет проблем с внедрением формы на ваш сайт. Если же у вас возникнут проблемы или вопросы, вы всегда сможете получить консультацию в комментариях.</p> <h3>UPDATE 06.06.2018</h3> <blockquote><p>В последних версиях WordPress <b>jQuery скрипты не работают с символом $ </b>, поэтому это следует учесть и заменить $ на jQuery</p> </blockquote> <p>Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:</p><p>Url: "http://site.ru/sendmessage.php" </p><p>А скачать исходники первых двух форм, вы сможете по </p> <h3>UPDATE 04.07.2018</h3> <p>По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.</p> <p>Посмотреть пример, а также и скачать исходники обновленной формы обратной связи и всплывающей формы теперь можно online, по ссылкам.</p> <p>Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.</p> <h2>Почему форма на html и php?</h2> <p>Для CRM, таких как Wordpress, Joomla и других можно найти различные плагины, что бы установить форму обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это их низкая производительность и замедление сайта. Так как эти плагины все равно выдают в результате тот же код html, то предлагаю использовать простую но полностью функциональную форму, которую можно так же изменить под обратный звонок с сайта.</p> <p>Форма связи на html просто вставляется в админке Joomla, OpenCart, а если ваш сайт самописный или вы используете любой фреймворк то использовать представленный код не составит труда и главное, сайт будет загружаться так же быстро как и до вставки кода.</p> <h2>Структура, как организована обратная связь для сайта</h2> <p>Что бы все заработало, приведу структуру, что нужно что бы форма связи или звонка работала?</p> <ol><li>Код html вставленный на страницу + css стили.</li> <li>Php файл, который и выполняет посылку письма.</li> </ol><p>В коде html содержится содержится информация, какие поля для ввода нужно показывать и подписи к ним. Стили css отвечает за визуальное оформление самой формы и отображение данных. При нажатии на кнопку отправить вызывается php файл, который и отправляет письмо на указанную почту. Подробнее исходный код формы рассмотрим дальше.</p> <h2>Код формы обратной связи на html</h2> <p>Вначале приведем полный код формы обратной связи для сайта на HTML.</p><p> <form class="obratnuj-zvonok" autocomplete="off" action="http://site.com/email.php" method="post"> <div class="form-zvonok"> <div><label>Имя *</label> <input type="text" name="username" required></div> <div><label>Номер телефона (с кодом) *</label> <input type="text" name="usernumber" required></div> <div><label>Сообщение</label> <input type="text" name="question"></div> <input class="bot-send-mail" type="submit" value="Послать заявку"> </div> </form> </p><p>Сама форма находится между html тегами <form></form> . Самому тегу формы <form> присвоен css класс class="form-zvonok" который используется для задания отображения формы через css стили.</p> <p>Атрибуты формы autocomplete="off" - автозаполнение формы отключено. Атрибут формы action="http://site.com/email.php" , в нём указан адрес файла, который вызывается и которому передаются данные формы после нажатия кнопки «отправить».</p> <p>Атрибут method="post" , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод Get отправляет данные формы через адресную строку. Учитывая необходимость SEO оптимизации сайта, в случае формы обратной связи для сайта лучше отправлять данные методом Post, так как в случае метода Get у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими незначительными параметрами.</p> <p>Внутри этого дива, находятся дивы содержащие теги <label></label> и <input> , и в самом конце <input class="bot-send-mail" type="submit" value="Послать заявку"> - кнопка отправить, при нажатии на нее происходит отправка данных формы.</p> <h2>Отсылка письма php скриптом</h2> <p>Приведем простой скрипт для отправки письма</p><p> <?php $to = "email@tut.by";//Почтовый ящик на который будет отправленно сообщение $subject = "Тема сообщения";//Тема сообщения $message = "Message, сообщение!";//Сообщение, письмо $headers = "Content-type: text/plain; charset=utf-8 \r\n";//Шапка сообщения, //содержит определение типа письма, от кого, и кому отправить ответ на письмо mail ($to, $subject, $message, $headers); ?> </p><p>Чтобы отправить письмо на необходимый email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject - тема сообщения, показывается почтовыми программами при просмотре списков писем. $message - само тело письма, это и есть само сообщение. $headers - шапка письма, в ней указывается тип письма, например html, также кодировка письма, от кого доставлено письмо и на какой emal отправлять ответ.</p> <h2>Оформление формы обратного звонка для сайта css</h2> <p>Приведем код css оформления для формы обратной связи сайта.</p><p>Obratnuj-zvonok{ width: 100%; max-width: 350px; } .form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } .form-zvonok div{ padding: 15px 0; } .bot-send-mail{ box-sizing: border-box; width: 100%; } .form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } .form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } .form-zvonok label span{ color: red; } .form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } .form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; } </p><p>Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px, если шире, то форма html выглядит растянутой:</p><p>Obratnuj-zvonok{ width: 100%; max-width: 350px; } </p><p>Что бы упорядочить поля и кнопку отправить, обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:</p><p>Form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } </p><p>Подпись и поле ввода обернуты в div:</p><p> <div><label>Имя *</label> <input type="text" name="username" required></div> </p><p>Для этого дива присвоим отступы:</p><p>Form-zvonok div{ padding: 15px 0; } </p><p>Кнопке отправить делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box , что бы она не выходила за пределы родительского блока:</p><p>Bot-send-mail{ box-sizing: border-box; width: 100%; } </p><p>Аналогично для подписей и полей ввода:</p><p>Form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } </p><p>Настраиваем красивый внешний вид подписей и полей ввода:</p><p>Form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } </p><p>Звездочку делаем красной:</p><p>Form-zvonok label span{ color: red; } </p><p>Оформляем кнопку отправить:</p><p>Form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } </p><p>При наведении на кнопку настраиваем изменение цвета:</p><p>Form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }</p> <p>Здравствуйте дорогие читатели, сегодня хочу рассказать вам о том, как я создаю формы, для получения контактных данных пользователя.</p><p>На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.</p> <h2>Создание формы обратной связи – html разметка</h2> <p>Обычно мне хватает трех полей, и в большинстве случаев, я использую такую разметку для создания контактной формы:</p><p> <form id="application" action=" application.php" method="POST" name=" application "> <input name="name" id="applicationName" maxlength="20" placeholder="Введите ваше имя" required /> <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите ваш E-mail" required /> <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required/> <button class="applicationButton" type="submit" form="application">Получить прайс </button> </form> </p><p>Попробуйте открыть в браузере данный код и посмотрите что у вас получилось, в зависимости от того, какой интернет-обозреватель используете, должно выглядеть примерно так:</p><p>Если возникнут какие-нибудь вопросы по разметке, смело задавайте их в комментариях, постараюсь подробно ответить, а в статье не буду описывать каждый элемент, чтобы не увеличивать ее размер. Кроме того, элементы достаточно просты.<br> </p><h3>Создание формы обратной связи — css разметка</h3> <p>Давайте зададим стили нашей форме и приведем ее к читабельному виду:</p><p> /* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; } </p><p>Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:</p><p>Transition: .6s; </p><p>Где.6s — время анимации в миллисекундах.<br> Теперь наша форма приобрела красивый вид, сейчас она выглядит так:</p><p><br><img src='https://i0.wp.com/smartlanding.biz/wp-content/uploads/2014/07/forma-obratnoy-svyazi-dlya-saita1.png' align="center" width="100%" loading=lazy></p><h3>Создание формы обратной связи — php разметка</h3> <p>Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.</p><p>Структура у него, как у обычного html файла, это может быть страничка, на которой вы напишите «Спасибо, ваша заявка принята. После обработки заявки наши менеджеры свяжутся с вами»</p><p>То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.</p><p> <?php $sendto = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты // Формирование заголовка письма $subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; // Формирование тела письма $msg = "<html><body style="font-family:Arial,sans-serif;">"; $msg .= "<h2 style="font-weight:bold;border-bottom:1px dotted #ccc;">Cообщение с сайта</h2>\r\n"; $msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n"; $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n"; $msg .= "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n"; $msg .= ""; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "<center><img src='https://i0.wp.com/images/spasibo.png' loading=lazy></center>"; } else { echo "<center><img src='https://i0.wp.com/images/ne-tpravleno.png' loading=lazy></center>"; } ?> </p><p>Давайте немного поясню код:</p><p> $sendto = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты </p><p>Тут, думаю, — понятно.</p><p>Теперь давайте сформируем заголовок письма.</p><p> $subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; </p><p>Строка <b>$subject = «Новое сообщение»; </b> — отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.</p><p>Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:</p><p> $headers = "From: " . strip_tags($usermail) . "\r\n"; </p><p>То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.</p><p>Теперь зададим внешний вид письма. Вы можете оформить его как угодно, а я предлагаю следующую структуру:</p><p> $msg = "<html><body style="font-family:Arial,sans-serif;">"; $msg .= "<h2 style="font-weight:bold;border-bottom:1px dotted #ccc;">Cообщение с сайта</h2>\r\n"; $msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n"; $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n"; $msg .= "<p><strong>Телефон:</strong> ".$usertel."</p>\r\n"; $msg .= "</body></html>"; </p><p>Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.</p> <p>Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:</p><p>If(@mail($sendto, $subject, $msg, $headers)) { echo "<center><img src='https://i0.wp.com/images/spasibo.png' loading=lazy></center>"; } else { echo "<center><img src='https://i0.wp.com/images/ne-tpravleno.png' loading=lazy></center>"; } ?> </p><p>Я сделал так, что в любом из случаев выведется картинка с соответствующим текстом. Вы можете вместо картинки вывести полноценную страницу. Просто пропишите код, вместо картинки.</p><p>Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;</p><p> <meta http-equiv="Refresh" content="4; url=http://Адрес сайта/"> </p><p>То есть через 4 секунды пользователя автоматически вернет на главную страницу!</p><p>Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!</p><p>Кстати, если вам нужна форма обратной связи без перезагрузки страницы, то почитать о том как ее установить можно в </p><p>Может быть, кому-то не очень понятен материал, но если вы в точности повторите мои действия, то у вас обязательно будет работать контактная форма. Возникнут вопросы — пишите в комментариях, постараюсь ответить! До встречи на блоге!</p><p>P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:</p><ul><li>Тестируете форму не на сервере.</li> <li>Тестируете форму на бесплатном хостинге.</li> <li>Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.</li> </ul><p>В этих случаях письма не будут приходить к вам на почту.</p><p>Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .</p> <p>23/07/2014 12/07/2018</p> <p>dimadv7 </p></body></html> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> </main> </div> <div id="secondary" class="widget-area" role="complementary"> <aside id="execphp-3" class="widget widget_execphp"> <div class="execphpwidget"> </div> </aside> <aside id="execphp-2" class="widget widget_execphp"> <div class="execphpwidget"> </div> </aside> <aside id="categories-2" class="widget widget_categories"> <div class="widget-title">Рубрики</div> <ul> <li class="cat-item cat-item-24"><a href="/category/instructions/">Инструкции</a> </li> <li class="cat-item cat-item-24"><a href="/category/problems/">Проблемы</a> </li> <li class="cat-item cat-item-24"><a href="/category/firmware/">Прошивка</a> </li> <li class="cat-item cat-item-24"><a href="/category/installation/">Установка </a> </li> <li class="cat-item cat-item-24"><a href="/category/programs/">Программы</a> </li> <li class="cat-item cat-item-24"><a href="/category/navigation/">Навигация</a> </li> <li class="cat-item cat-item-24"><a href="/category/internet/">Интернет</a> </li> <li class="cat-item cat-item-24"><a href="/category/office/">Офисные</a> </li> <li class="cat-item cat-item-24"><a href="/category/tools/">Инструменты</a> </li> <li class="cat-item cat-item-24"><a href="/category/video-players/">Видеоплееры </a> </li> </ul> </aside> <aside id="execphp-4" class="widget widget_execphp"> <div class="execphpwidget"> </div> </aside> <aside id="execphp-5" class="widget widget_execphp"> <div class="execphpwidget"> </div> </aside> <aside id="execphp-6" class="widget widget_execphp"> <div class="execphpwidget"> </div> </aside> <aside id="execphp-7" class="widget widget_execphp"> <div> </div> </aside> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="sidebar-footer"> <div class="inner"> <div class="widget-wrap inner-wrap clearfix"> <div class="sfdiv"> <aside id="text-2" class="widget widget_text"> <div class="widget-title"><span>О Сайте</span></div> <div class="textwidget">ds427.ru - Инструкции. Прошивка. Интернет. Инструменты. Навигация<br> </div> </aside> </div> <div class="sfdiv sfdiv-last"> <aside id="categories-3" class="widget widget_categories"> <div class="widget-title"><span>Рубрики</span></div> <ul> <li class="cat-item cat-item-24"><a href="/category/instructions/">Инструкции</a> </li> <li class="cat-item cat-item-24"><a href="/category/problems/">Проблемы</a> </li> <li class="cat-item cat-item-24"><a href="/category/firmware/">Прошивка</a> </li> <li class="cat-item cat-item-24"><a href="/category/installation/">Установка </a> </li> <li class="cat-item cat-item-24"><a href="/category/programs/">Программы</a> </li> <li class="cat-item cat-item-24"><a href="/category/navigation/">Навигация</a> </li> <li class="cat-item cat-item-24"><a href="/category/internet/">Интернет</a> </li> </ul> </aside> </div> <div class="clear"></div> </div> </div> </div> </footer> <div id="back_top"><i class="fa fa-angle-up"></i></div> </div> <script type='text/javascript' src='https://ds427.ru/wp-content/themes/dream/js/navigation.js?ver=20120206'></script> <script type='text/javascript' src='https://ds427.ru/wp-content/themes/dream/js/skip-link-focus-fix.js?ver=20130115'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.5.13'></script> </body> </html>