###
  • Интернет
  • Программы
  • Игры
  • Проблемы
  • Windows
  • Социальные сети
  • Android
  • Ios

    • Скрипт обратной связи html. Создание формы обратной связи

    08.03.2020 Сотовые операторы

    Добрый день, друзья! В этой статье я расскажу, с помощью php и ajax. Настроить и установить форму обратной связи без перезагрузки на Ваш сайт. А так же я записал подробный видео урок по этой теме.

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

    Сразу скажу, что это довольно сложная тема сама по себе, а рассказать нужно так, чтобы её смогли понять и усвоить и те люди, которые совсем не разбираются в программировании на PHP и JavaScript (ajax). Эта статья не для новичков, и если Вы плохо разбираетесь в HTML и совсем не знаете PHP, то разобраться Вам будет трудновато.

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

    Итак, давайте посмотрим, как же будет выглядеть и работать наша .

    Нажимая кнопку «Отправить» вверху над формой обратной связи появится подсказка «Сообщение обрабатывается…»

    Если посетитель Вашего сайта не заполнил форму или ввёл не корректные данные, то появится сообщение об ошибке.

    Если же всё было заполнено верно, то текст из формы обратной связи отправится на Ваш e-mail, а человеку будет показано сообщение об успешной отправке.

    Ну а теперь друзья переходим к коду.
    HTML-код формы обратной связи без перезагрузки будет выглядеть так:

    Задать новый вопрос:

    HTML- это скелет нашей формы. Давайте её немного украсим, добавив CSS-стилей:

    SidebarForm { background: #f6f6f6; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; width: 420px; } #cor5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .sidebarForm h4 { font: 14px Verdana; color: #333333; text-align: left; padding: 10px 10px 0 10px; } .sidebarForm label { font: 12px Verdana; color: #333; padding: 10px; } .sidebarForm .input { width: 170px; height: 20px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .input input { width: 165px; height: 26px; background: white; margin: -3px 0 0 -5px; padding: 0px 8px; border: none; background: transparent; } .sidebarForm .textarea { height: 70px; width: 320px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .sidebarForm .textarea textarea { width: 316px; height: 66px; background: white; border: none; resize:none; } .sidebarForm button { border: 2px #ccc solid; width: 150px; height: 25px; font: 12px Verdana; font-weight: 700; color: #FFFFFF; background-color: #cc0000; padding-bottom: 2px; margin: 5px 0 15px 135px; }

    Информация из нашей формы обратной связи после нажатия на кнопку «Отправить», отправляется на сервер (в обработчик) в фоновом режиме, без перезагрузки страницы в браузере. За это отвечает JavaScript-код:

    $(document).ready(function() { // Форма обратной связи................................./ var regVr22 = "

    Сообщение обрабатывается...


    "; $("#send").click(function(){ $("#loadBar").html(regVr22).show(); var posName = $("#posName").val(); var posEmail = $("#posEmail").val(); var posText = $("#posText").val(); $.ajax({ type: "POST", url: "../send.php", data: {"posName": posName, "posEmail": posEmail, "posText": posText}, cache: false, success: function(response){ var messageResp = "

    Спасибо, "; var resultStat = "! Ваше сообщение отправлено!

    "; var oll = (messageResp + posName + resultStat); if(response == 1){ $("#loadBar").html(oll).fadeIn(3000); $("#posName").val(""); $("#posEmail").val(""); $("#posText").val(""); } else { $("#loadBar").html(response).fadeIn(3000); } } }); return false; }); });

    В обработчике нам необходимо проверить что отправил посетитель, и если всё в порядке отправить письмо админу сайта. А посетителю сообщить, что его письмо успешно отправлено! Пишем php-код:

    header("Content-type: text/html; charset=utf-8"); //********************************************** if(empty($_POST["js"])){ $log ==""; $error="no"; //флаг наличия ошибки $posName = addslashes($_POST["posName"]); $posName = htmlspecialchars($posName); $posName = stripslashes($posName); $posName = trim($posName); $posEmail = addslashes($_POST["posEmail"]); $posEmail = htmlspecialchars($posEmail); $posEmail = stripslashes($posEmail); $posEmail = trim($posEmail); $posText = addslashes($_POST["posText"]); $posText = htmlspecialchars($posText); $posText = stripslashes($posText); $posText = trim($posText); //Проверка правильность имени if(!$posName || strlen($posName)>20 || strlen($posName) Неправильно заполнено поле \"Ваше имя\" (3-15 символов)!"; $error="yes"; } //Проверка email адреса function isEmail($posEmail) { return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|((?|||)\.){3}(?|||))$/i" ,$posEmail)); } if($posEmail == "") { $log .= "

  • Пожалуйста, введите Ваш email!
    • "; $error = "yes"; } else if(!isEmail($posEmail)) { $log .= "
  • Вы ввели неправильный e-mail. Пожалуйста, исправьте его!
    • "; $error = "yes"; } //Проверка наличия введенного текста комментария if (empty($posText)) { $log .= "
  • Необходимо указать текст сообщения!
    • "; $error = "yes"; } //Проверка длины текста комментария if(strlen($posText)>1010) { $log .= "
  • Слишком длинный текст, в вашем распоряжении 1000 символов!
    • "; $error = "yes"; } //Проверка на наличие длинных слов $mas = preg_split("/[\s]+/",$posText); foreach($mas as $index => $val) { if (strlen($val)>60) { $log .= "
  • Слишком длинные слова (более 60 символов) в тексте записи!
    • "; $error = "yes"; break; } } sleep(2); //Если нет ошибок отправляем email if($error=="no") { //Отправка письма админу о новом комментарии $to = "[email protected]";//Ваш e-mail адрес $mes = "Человек по имени $posName отправил Вам сообщение из формы обратной связи Вашего сайта: \n\n$posText"; $from = $posEmail; $sub = "=?utf-8?B?".base64_encode("Новое сообщение с Вашего сайта")."?="; $headers = "From: ".$from." "; $headers .= "MIME-Version: 1.0 "; $headers .= "Content-type: text/plain; charset=utf-8 "; mail($to, $sub, $mes, $headers); echo "1"; //Всё Ok! } else//если ошибки есть { echo "

    Ошибка!


    "; //Нельзя отправлять пустые сообщения } }

    В коде представлены необходимые комментарии и пояснения. Более подробно я рассказываю в видео ниже.

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

    Как Вам статья? Надеюсь, тема: «Как создать форму обратной связи без перезагрузки страницы » была Вам интересна, и Вы нашли здесь для себя что-то полезное. Не забудьте подписаться на обновление моего сайта по e-mail.
    Внимание! Всех приглашаю в свою

    Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.

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

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

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

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

    Онлайн заявка

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

    Код вставлен, что мы видим?

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

    /* Форма обратной связи */ #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; } /* Форма обратной связи */

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

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

    Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

    Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

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

    Для этого перед закрывающимся тегом вставьте следующий скрипт:

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

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

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

    Новое сообщение\r\n"; $msg .= "

    Имя: ".$username."

    \r\n"; $msg .= "

    Номер телефона: ".$userphone."

    \r\n"; $msg .= "

    Почта: ".$usermail."

    \r\n"; $msg .= "

    Сообщение: ".$content."

    \r\n"; $msg .= " "; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "true"; } else { echo "false"; } ?>

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

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

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

    Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

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

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

    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 .

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

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

    После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

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

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

    Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.

    Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

    Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.

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

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

    1. Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
    2. Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

    Первый способ уже был описан выше, поэтому сразу перейдем ко второму.

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

    X

    Давайте разберемся что есть что:

    • Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
    • Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
    • Блок callme будет содержать саму форму обратной связи.
    • X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
    • Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

    Обратите внимание на то, что у вас id и название формы могут отличаться от моих. Новый код добавлен, теперь задаем ему стили.

    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; }

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

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

    Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

    UPDATE 06.06.2018

    В последних версиях WordPress jQuery скрипты не работают с символом $ , поэтому это следует учесть и заменить $ на jQuery

    Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

    Url: "http://site.ru/sendmessage.php"

    А скачать исходники первых двух форм, вы сможете по

    UPDATE 04.07.2018

    По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

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

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

    Понятно, что при использовании Joomla и WordPress вопрос обратной связи или заказа можно решить использованием различных расширений или плагинов, но есть способы, которые подойдут абсолютно для любого проекта, построенного как на чистом Html, так и использующего (скрипты, cms, конструкторы и генераторы форм обратной связи).

    Хотя, существуют решения и не требующие поддержки Php, и о них тоже будет упомянуто в этой статье. Никаких особо подробных описаний по установке и настройке в этой статье не будет, ибо это лишь обзор имеющихся вариантов, которые сейчас можно найти в сети.

    Буду вам крайне признателен, если вы в комментариях приведете свой пример создания систем обратной связи (желательно оригинальный, красивый и функциональный) со ссылкой на описание и страницу с примером (я пока нахожусь в процессе поиска идеального решения).

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

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

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

    Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact , который может дать вам новые возможности и функционал (см. демо). Про настройку и возможности этого модуля сможете прочитать . К тому же, стандартный компонент в Joomla для реализации обратной связи не обладает достаточной гибкостью и не позволяет использовать защиту от спама (капчу), а также не позволяет создавать несколько разных контактных форм на сайте.

    Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev , который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.

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

    Этот компонент в своем составе имеет очень гибко настраиваемую капчу (ввод кода при отправке данных для зашиты от спама). Его можно бесплатно скачать для разных версий Джумла, а .

    Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать к обычному , то поток спама меня бы уже давно захлестнул с головой.

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

    В общем-то в этом и состоит основное преимущество формы обратной связи — она позволяет сохранить инкогнито вашего почтового адреса для спамеров. Ну и еще она обычно оформлена в довольно приятную оболочку, что может добавить плюсик в отношении к вашему проекту пользователей, особенно это актуально для коммерческих ресурсов, когда удобная форма заказа или обратной связи может повысить конверсию (доход).

    Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7 . Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA .

    Форму обратной связи можно будет вставить на любую страницу или в любой пост вашего блога на WordPress, а также в виджет. Фактически это своеобразный конструктор для WordPress, позволяющий обновлять информацию в форме без обновления страницы (на технологии ajax). Лично я испытывал этот плагин на сайт примерно пару лет назад, и тогда он мне показался очень тяжелым и неуместно громоздким для реализации стоящих передо мною целей (обратная связь).

    Понятно, что за это время Contact Form 7 мог стать уже гораздо более подходящим для реализации стоящих перед нами задач и поэтому предлагаю вам опробовать его в работе самостоятельно, опираясь на довольно подробное описание. Если вы пользуетесь каким-либо другим хорошим и легким плагином, то чиркните, пожалуйста, об этом пару слов в комментариях.

    Так, это мы говорили про реализацию обратной связи в Joomla и WordPress с помощью соответствующих расширений.

    Но существует еще несколько способов :

      Создание формы самостоятельно. Для этого нужно будет написать ее код и оформить внешний вид с помощью Css стилей, а еще написать на Php для нее обработчик (в принципе, знаний, полученных из видеокурса Попова по Php , будет достаточно) и затем , проверку правильность заполнения полей и что-то еще. Сразу скажу, что сделать это будет не просто.

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

      Конструкторы и генераторы форм обратной связи

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

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

      Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:

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

      Обратная связь для Html сайтов (без Php)

      Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится :

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

      После настройки внешнего вида и добавления нужных полей нажмите на кнопку «Просмотр», а затем на кнопку «Настроил» и скопируйте код. Вставьте его на страницу контактов и нажмите на расположенную под кодом кнопку «Вставил».

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

      Есть еще один очень похожий по функционалу генератор форм обратной связи . Созданные с помощью него конструкции тоже можно будет размещать на хостингах без поддержки Php (достаточно указать адрес страницы и E-mail, на который будут отправляться сообщения). Рассказывать про него много я не буду, ибо он по своей сути очень похож на описанный чуть выше конструктор.

      Удачи вам! До скорых встреч на страницах блога сайт

      Вам может быть интересно

      Google Forms - как создать интернет-опрос на сайте в Гугл Формах Онлайн HTML редакторы - визуальные, IDE и редакторы для установки на сайт
      SendPulse - Push уведомления для сайта и бесплатный вариант их подключения от СендПульс
      Ускорение и защита вашего сайта в облачном сервисе Айри.рф
      Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие) Вебинар - это дань моде или полезный инструмент коммуникации
      CoMagic - аналитика продаж или как привлекать посетителей на свой сайт и при этом не вылететь в трубу
      Викс - бесплатный онлайн конструктор сайтов Google Alerts - что это такое и как его использовать, примеры создания полезных оповещений

    Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.

    UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)

    Формат самой формы так же включает файл обработчик на языке php, дополнительно для работы понадобится библиотека jquery и скрипты, но обо всем по порядку, не буду долго грузить — переходим к обзору и разбору нашей обратной связи.

    Форма обратной связи html — структура работы

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

    В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))

    Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.

    Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:

    Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:

    Исходный код обработчика формы

    Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

    < 1) { $error .= "Введите ваше сообщение.
    <".$tel.">
    ".$error."
    "; } } ?>

    "; } // Проверка телефона function ValidateTel($valueTel) { $regexTel = "/^{7,12}$/"; if($valueTel == "") { return false; } else { $string = preg_replace($regexTel, "", $valueTel); } return empty($string) ? true: false; } if(!$tel) { $error .= "Пожалуйста введите телефон.
    "; } if($tel && !ValidateTel($tel)) { $error .= "Введите корректный телефон.
    "; } if(!$error) // Проверка сообщения (length) if(!$message || strlen($message) < 1) { $error .= "Введите ваше сообщение.
    ";// В этой строчке ставиться минимальное ограничение на написание букв. } if(!?utf-8?b?". base64_encode($name) ."?="; $message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n"; $mail = mail("[email protected]", $subject, $message, "From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion()); if($mail) { echo "OK"; } } else { echo "

    ".$error."
    "; } } ?>

    Работоспособность формы

    Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.

    Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .

    Заполненная форма с тестовыми данными

    Письмо на почтовом ящике

    Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php

    Все работает отлично, будет приятно услышать вашу обратную связь (конструктивную критику) в комментариях, если появились затруднения и с чем-то не справляетесь — смело пишите мне в VK (в контактных данных найдете). Надеюсь вам понравился и дизайн и функционал данного симбиоза формы обратной связи (заказа услуг, заявки) и триггера, призывающего к действию. Всем удачи в работе и позитивного настроя, пока))

    Подготовлено при поддержке,

    В ответ на такой вопросы первое, что приходит в голову: «Удобными и рабочими». И это в общем-то логично. Ведь в противном случае, какой смысл в наличие на сайте красивой формы обратной связи, которой не пользуются? Но обо всем по порядку.

    Множество форм - одна цель

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

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

    Отсюда логично вытекает вывод, который уже был озвучен выше - формы обратной связи должны быть удобными и должны работать!

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

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

    Семь подсказок на заметку

    Вспомним несколько простых правил, которые нужно учитывать при разработке и размещении ФОС на сайте.

      Форма должна располагаться так, чтобы посетителю было удобно ее найти.

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

      Традиционно формы можно разместить в хедере сайта или на странице контактов.

      Можно при необходимости продублировать в футере ключевые формы, чтобы не заставлять посетителей, просмотревших всю страницу, пролистывать ее снова вверх:

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

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

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

      Или кратко – проверьте кроссбраузерность и кроссплатформенность форм обратной связи на вашем сайте. Форма может быть заметной и удобной для заполнения с ноутбука или стационарного компьютера, но на планшете поле для ввода данных может оказаться слишком узким и неудобным для внесения в него текста с сенсорного экрана. Будет ли тогда клиент раз за разом пытаться внести свои данные, чтобы связаться с вами? Ответ очевиден.

      Форма должна быть краткой и понятной.

      Что это значит? Форма не должна состоять из большого количества полей или этапов заполнения. Если, конечно, в этом нет жесткой необходимости. Люди стремятся к простоте, они не хотят тратить много времени на то, чтобы разобраться и заполнить десять тысяч полей.

      Если услуга подразумевает получение довольно подробной информации, упростите задачу клиенту (если это, конечно, возможно). Выделите несколько ключевых полей, которые нужно заполнить:

      Выглядит более удобно, чем, например:

      Лучше перезвонить и устно уточнить все, что вам нужно, но облегчить посетителю заполнение формы. И повысить тем самым шансы на то, что он к вам обратиться!

      Продолжая тему понятности, обратите внимание на то, чтобы у формы был заголовок – «Заказать обратный звонок», «Заказ вызова замерщика», «Заказ бесплатной консультации» и т.д. Этот же заголовок лучше дублировать в электронных оповещениях, которые будут приходить с формы на вашу почту. Тогда не только посетитель вашего сайта не запутается и не забудет заявку, на что именно он оформляет. Но и вы сами получите четкие данные, какая именно информация интересовала посетителя, оставившего заявку. Это поможет быстро сориентироваться при дальнейшем общении с посетителем и корректно построить диалог.

      Форма должна обладать приятным и практичным дизайном.

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

      Лучше избегать сочетания темного на темном. Если, например, на темно-синем фоне вы сделаете темно-красную или темно-зеленую надпись «Ваше сообщение отправлено», его просто не будет видно.

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

      Небольшой штрих, призывающий посетителя совершить или завершить действие. В нашем случае отправить сообщение с сайта!

      Также кнопку лучше выделить контрастным цветом. Вместе с призывом к действию, это сделает ее заметной, и привлечет внимание посетителя.

      Форма должна легко сворачиваться.

      Итак, форму легко найти, она обладает приятным дизайном, удобна для заполнения. Что еще?

      Не забудьте попросить разработчиков добавить «крестик» на форму, чтобы можно было ее закрыть. Или настроить автоматическое сворачивание формы после ее заполнения.

      Кажется, что мелочь, а общую картину может подпортить.
      Например, посетитель оставил заявку на сайте и хочет вернуться к просмотру сайта. НО! Форма висит, не исчезает, как ее закрыть – непонятно. Или другой вариант – посетитель передумал писать заявку, а решил сам позвонить. Получиться может неприятно.

      Настройка ответного сообщения.

      Как-то вот так…

      Человек, отправивший сообщение, хочет быть уверен, что его сообщение будет получено вами и рассмотрено. Технически настройка автоматического оповещения много времени не отнимет, зато укрепит уверенность посетителя в том, что его сообщение не останется без ответа. Обычно это используется в тех формах, где при заполнении требуется указать свою электронную почту. Впрочем, современные сервисы позволяют настраивать автоматические оповещения и через SMS.

    Подводя итог

    Тонкостей и прочих деталей очень много: можно экспериментировать с формой и дизайном, можно дорисовать ненавязчивую графику по теме и т.д. Но базовые критерии не меняются. Ко всему сказанному выше хочется добавить большое, но немаловажное пожелание – периодически проверяйте работу форм обратной связи на сайте. Технические сбои не должны быть препятствие в работе вашего бизнеса!