Онлайн заявка html код. Создание формы обратной связи. Плагин jQuery «Contactable»

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

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

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

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

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

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

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

Привет ребята. На связи Серёга. Знаю, что давно не писал - дела, дела... Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого - Кротова Романа .

Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.

Мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.

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

Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал PHP.

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

Вот что получилось в итоге в файле index.php

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

Содержимое файла submit.php:

Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё "гуд" - письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.

If (!empty($_POST["name"]) AND !empty($_POST["email"]) AND !empty($_POST["message"])) { $headers = "From: Кротов Роман " . "Reply-To: [email protected] " . "X-Mailer: PHP/" . phpversion(); $theme = "Новое сообщение с сайта"; $letter = "Данные сообщения:"; $letter .=" "; $letter .="Имя: ".$_POST["name"]; $letter .=" Email: ".$_POST["email"]; $letter .=" Телефон: ".$_POST["phone"]; $letter .=" Сообщение: ".$_POST["message"]; if (mail("[email protected]", $theme, $letter, $headers)){ header("Location: /testform/thankyou.php"); } else { header("Location: /testform"); } } else { header("Location: /testform"); }

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

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

Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте «Contact Form 7 «, а ему в нагрузку еще требовался второй плагин выводящий капчу «reCaptcha «. Вот таким образом я решил избавиться сразу от двух, довольно весомых плагинов, используя форму обратной связи, которая не требует ни каких плагинов и легка в установке на сайт. Сейчас я вам о ней расскажу и конечно же дам скачать файлы для того, чтобы и Вы смогли себе создать аналогичную обратную связь для сайта …

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

Посмотреть и проверить работоспособность моей формы обратной связи для сайта Вы сможете на странице « «. Напишите в моей форме для связи на сайте и я вам отвечу!

Теперь давайте перейдем к самому главному и создадим свою собственную, не зависящую ни от каких плагинов обратную связь для сайта …

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

Вот вам код HTML самой формы обратной связи для сайта, который Вы сможете вставить на свой сайт или блог в любое место, у меня это страница для контактов:

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

Как вас зовут

Электронная почта

Тема сообщения

Отправить сообщение

Обратите внимание на некоторые важные вещи, которые вам нужно выполнить в этом коде:

Этот файл Вы должны залить на свой хостинг в корневую папку движка сайта! Но сначала проверьте исправили Вы его или нет!

В строке, где написан текст «АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ! «, вам нужно обязательно его исправить на свой Е-майл адрес, который у Вас на хостинге. Если у Вас нет почты на хостинге, то обязательно ее заведите. Это не сложно!

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

Вот этот скрипт:

Или можете добавить на WordPress в файл functions.php вот эту функцию:

Function my_jquery() { wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery"); }

Она заменяет скрипт и также подключает библиотеку jQuery на сайте WordPress.

Теперь подключаем на своем сайте скрипт, который будет с файлом mail.php совместно, отправляя ваши письма. Для этого нам нужно создать вот такой js файл contact.js и отправить его на ваш сайт в папку со скриптами вашей активной темы оформления, которая так и назвается js . Если ее нет у Вас на сайте, то создайте!

Вот этот скрипт:

JQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/mail.php", data: str, success: function(msg) { if(msg == "OK") { result = "Сообщение отправлено"; $("#fields").hide(); } else {result = msg;} $("#note").html(result); } }); return false; }); });

Почти закончили! Теперь нам осталось залить на наш хостинг стили в ваш файл CSS, который отвечает за стили темы сайта. Если этого не сделать, то наше вновь созданная обратная связь для сайта будет не красивой и однотонной.

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

Form#contact { border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; } #contact label { font-size: 14px; } #contact input:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; } #contact textarea:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; } #contact input:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid.png) no-repeat 98% center; } #contact textarea:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; } .err { border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; } .ok { border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center; border-radius: 3px; } #author, #email, #url { width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; } #comment { padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; } #submit { font-weight: 400; background: #393; font-size: 15px; color: #fff; padding: 10px 50px; border: none; cursor: pointer; }

Просто скопируйте их и отправьте в файл style.css вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!

Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!

На этом все!

Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!