Настраиваем форму обратной связи на сайтах

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

Форма обратной связи на сайте как сделать

Существует несколько способов реализовать данную фичу у себя. Фича (от английского feature – особенность, необычное свойство) – это определенная деталь или часть продукта, которая имеет специфические характеристики. Также фичами называются механизмы, позволяющие добавлять новые функциональности, веб-части и элементы дизайна в продукт. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.

1. Первый способ, форма обратной связи на html + css + php (функционален, расширяем, довольно сложный способ)
2. Второй способ, форма обратной связи только на html от стороннего сервиса (простота установки, функциональность)
3. Третий способ, форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи (просто, но и нет ни каких функций или возможностей).

 Рассмотрим более подробно каждый из способов.

Форма обратной связи на сайте как сделать всплывающий вариант

В том случае, когда нужна именно форма обратной связи со всплывающим вариантом, которая открывается при нажатии на кнопку. Сделать такую форму очень просто. В качестве примера давайте возьмем форму, созданную нами ранее и будет работать с ней.

Сначала нужно подключить jqury fancybox.

• <link rel=”stylesheet” type=”text/css” media=”all” href=”fancybox/jquery.fancybox.css”>
• <script src=”js/jquery-1.7.1.min.js”></script>
• <script src=”fancybox/jquery.fancybox.js”></script>

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.

<a href=”#inline” class=”modalbox”>Обратный звонок</a>

И придаем ей стили.

• .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}

Нюансы с кнопкой для всплывающего окна

Обращаем внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline». Без этого всплывающая форма не будет открываться на сайте. Далее прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые:

#inline {display:none; margin-left:30px; width:80%; margin:0 auto; background:#FFF; padding:10px 20px}

В итоге у нас получается вот такая кнопочка. При нажатии на нее открывается всплывающее окно с обратной связью. Стили, расположение полей и элементов можно менять так, как вам будет угодно. Например, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать. Не забудьте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.

Зарабатываем на сайтах: 10 самых популярных способов

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

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.

Вставляем в нужное место на сайте следующий код:

• <div id=”inline”>
• <h2>Онлайн заявка</h2>
• <form id=”contact” action=”#” method=”post” name=”contact”>
• <input id=”name” class=”txt” name=”name” type=”name” placeholder=”Ваше имя”>
• <input id=”phone” class=”txt” name=”phone” type=”phone” placeholder=”Ваш телефон”>
• <input id=”email” class=”txt” name=”email” type=”email” placeholder=”Ваш e-mail”>
• <textarea id=”msg” class=”txtarea” name=”msg” placeholder=”Ваше сообщение:”></textarea><button id=”send”>Отправить</button></form></div>

По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендуется использовать в подобных формах капчу, либо другие защиты от ботов. Это затруднит пользователю заполнение формы.

Код вставили, мы увидим:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:

Форма обратной связи:

*/

• #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}/*

Форма обратной связи

*/

Так выглядит гораздо лучше. Поскольку в любом случае, форму нужно будет подстраивать под общий дизайн сайта. Поэтому она, в конечном итоге, будет отличаться от примера Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.

Подключаем скрипт

Выглядит это вот так:

• Получается, посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны, что довольно удобно. Для чего, необходимо подключить скрипт маски.
• Подключаем скрипт перед закрывающимся тегом. Не забываем поменять путь к файлу на свой. Затем, когда форма обратной связи создана, стили настроены, необходимо повестить на нее обработчик, для того, чтобы уведомления приходили вам на почту.
• <script>function validateEmail(email) { var reg = /^(([^<>()[\]\\.,;:\s@\”]+(\.[^<>()[\]\\.,;:\s@\”]+)*)|(\”.+\”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;return reg.test(email);jQuery(document).ready(function() {jQuery(“.modalbox”).fancybox();jQuery(“#contact”).submit(function() {return false;});jQuery(“#send”).on(“click”, function() {var emailval = jQuery(“#email”).val();var namevl = jQuery(“#name”).val();var phonevl = jQuery(“#phone”).val();var msgval = jQuery(“#msg”).val();var msglen = msgval.length;var mailvalid = validateEmail(emailval);if(mailvalid == false) { jQuery(“#email”).addClass(“error”); }else if(mailvalid == true) { jQuery(“#email”).removeClass(“error”); }if(mailvalid == false) { jQuery(“#name”).addClass(“error”); }else if(mailvalid == true){ jQuery(“#name”).removeClass(“error”); }if(mailvalid == false) { jQuery(“#phone”).addClass(“error”); }else if(mailvalid == true){ jQuery(“#phone”).removeClass(“error”); }if(msglen < 4) { jQuery(“#msg”).addClass(“error”); }else if(msglen >= 4){ jQuery(“#msg”).removeClass(“error”); }if(mailvalid == true && msglen >= 4) {// если обе проверки пройдены// сначала мы скрываем кнопку отправки$(“#send”).replaceWith(“<em>отправка…</em>”); jQuery.ajax({ type: ‘POST’, url: ‘sendmessage.php’, data: jQuery(“#contact”).serialize(), success: function(data) { if(data == “true”) { jQuery(“#contact”).fadeOut(“fast”, function(){ jQuery(this).before(“<p><strong>Ваше сообщение отправлено</strong></p>”); setTimeout(“jQuery.fancybox.close()”, 1000); }); } } }); } });});</script>

Как работает скрипт

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

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

<?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 = “<html–>”; $msg .= “<h2 style=”font-weight:bold”>Новое сообщение</h2>\r\n”; $msg .= “<p><strong>Имя:</strong> “.$username.”</p>\r\n”; $msg .= “<p><strong>Номер телефона:</strong> “.$userphone.”</p>\r\n”; $msg .= “<p><strong>Почта:</strong> “.$usermail.”</p>\r\n”; $msg .= “<p><strong>Сообщение:</strong> “.$content.”</p>\r\n”; $msg .= “”;

// отправка сообщения

• if(@mail($sendto, $subject, $msg, $headers)) {echo “true”;}
• else {echo “false”}?>

Простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Инструкция для оптимизаторов по продвижению сайтов

Форма обратной связи на сайте как сделать несколько на одной странице

При желании, на одну страницу, возможно, добавить несколько форм обратной связи. Сделать это можно следующим образом. В HTML файле (index.html) нужно:

• скопировать имеющийся фрагмент формы обратной связи и расположить его в нужном месте страницы;
• установить форме новый идентификатор, т.е. значение атрибута id (например, feedback-form-2);
• указать атрибуту action формы путь к php-сценарию, который будет обрабатывать её на стороне сервера (например, /feedback/process/process-2.php);
• установить капче (элементу img) в атрибуте src и data-src get-параметр; его значение будет являться ключом, с которым будет связан её код на сервере (например, /feedback/captcha/captcha.php?id=captcha-2);
• изменить у формы значения атрибутов id и for так, чтобы они были уникальными на странице;
• установить ссылке с помощью, которой перезапускается форма значение атрибута data-reloadform (например, #feedback-form-2).

В JavaScript файле (main.js) необходимо добавить блок инициализации для второй формы:

var form2 = new ProcessForm({selector: ‘#feedback-form-2’});

form2.init();

Последнее что нужно сделать – это выполнить создание копии файла process.php. В новом файле (например, process-2.php) необходимо изменить код, посредством которого эта форма должна будет обрабатываться на сервере. В том случае, когда в форме не изменяется количество полей, то достаточно будет изменить только фрагмент кода, в котором проверяется код капчи. А именно, изменить ключ в суперглобальном массиве $_SESSION с captcha на тот, который мы установили (в данном случае на captcha-2).

Отправка почты по SMTP через Gmail в PHPMailer

По умолчанию в Google аккаунте отключена возможность отправлять почту по SMTP через Gmail в PHPMailer. Для того чтобы включить данную опцию, необходимо предоставить доступ к аккаунту для приложения. Но для того, чтобы определиться, что нужно настроить, необходимо узнать текущее состояние двухэтапной аутентификации. Для этого необходимо перейти в Google аккаунт и открыть раздел «Безопасность». В группе «Вход в аккаунт Google» найти настройку «Двухэтапная аутентификация» и посмотреть её статус.

Что делать при выключенной двухэтапной аутентификации Google

Если настройка «Двухэтапная аутентификация» выключена, то перейти к группе «Ненадежные приложения, у которых есть доступ к аккаунту» и нажать на «Открыть доступ (не рекомендуется)». После этого на открывшейся странице перевести переключатель «Небезопасные приложения заблокированы» в состояние включено. На этом действия по настройке Google аккаунта завершены.

Что делать при включённой двухэтапной аутентификации Google

Когда настройка «Двухэтапная аутентификация» включена, необходимо создать пароль для приложения. Потому что использовать пароль, который вы используете для обычного входа на почту, для SMTP аутентификации в соответствии с безопасностью Google в этом случае нельзя.

Как грамотно устранить или оформить ошибку 404

Чтобы создать пароль приложению нужно перейти в Google аккаунт, а затем в раздел «Безопасность». Далее на этой странице найти группу настроек «Вход в аккаунт Google» и кликнуть на ссылку «Пароли приложений». На открывшейся странице из раскрывающегося списка «Приложение» необходимо выбрать «Другое (введите название)» и написать, например, имя своего сайта, а затем нажать на кнопку «Создать». Созданный пароль необходимо скопировать, он нам нужен будет при настройке отправки почты через PHPMailer.

Настройка process.php для отправки через Gmail

В process.php для отправки почты через Gmail нужно выставить следующие настройки:

IS_SENDING_MAIL_VIA_SMTP = true, // выполняем отправку писем через SMTP

MAIL_SMTP_HOST = ‘ssl://smtp.gmail.com’, // SMTP-хост

MAIL_SMTP_PORT = ‘465’, // SMTP-порт

MAIL_SMTP_USERNAME = ‘*******@gmail.com’, // SMTP-пользователь

MAIL_SMTP_PASSWORD = ‘*******’; // SMTP-пароль

При включенной двухэтапной аутентификации Google в MAIL_SMTP_PASSWORD нужно установить пароль, созданный для приложения, а при выключенной – пароль от аккаунта.

Форма обратной связи для WordPress

Когда ваш сайт работает на движке wordpress, вы сможете использовать специальные плагины для добавления контактной формы. Один из самых распространенных плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины. После активации плагина в левом меню появится новая вкладка, открываете ее и нажимаете Add New.

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