Делаем форму обратной связи на PHP. Форма обратной связи на PHP с отправкой на e-mail Легкая форма обратной связи html
В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных - имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки: $to = "[email protected]"; $subject= "Message from site.ru"; $header="From: site.ru";;
Написать письмо
* Все поля обязательны для заполнения
Отправить
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #d3dce1;
font-family: "Roboto", sans-serif;
font-size: 14px;
}
.outer {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
width: auto;
padding: 0 15px;
}
.login-wr {
position: relative;
margin: 0 auto;
background: #fff;
max-width: 550px;
box-shadow: 3px 3px 24px #999;
padding: 15px 15px 15px 15px;
}
h2 {
text-align: left;
font-weight: 200;
font-size: 1.6em;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #eeeeee;
color: #474747;
}
.form {
padding-top: 20px;
text-align: left;
}
input,
input {
margin-bottom: 25px;
height: 40px;
outline: 0;
-moz-outline-style: none;
}
button {
height: 40px;
outline: 0;
-moz-outline-style: none;
}
input {
background: url("img/user.png") no-repeat left 10px center;
}
input {
background: url("img/email.png") no-repeat left 10px center;
}
textarea {
background: url("img/pencil.png") no-repeat left 10px top 10px;
}
textarea {
width: calc(100% - 55px);
height: 120px;
border: 1px solid #bbb;
padding: 10px 10px 10px 45px;
font-size: 14px;
}
input,
input {
width: calc(100% - 45px);
max-width: 250px;
border: 1px solid #bbb;
padding: 0 0 0 45px;
font-size: 14px;
}
input:focus,
input:focus {
border: 1px solid #2196f3;
}
p {
padding-bottom: 10px;
}
button {
width: 100%;
max-width: 150px;
background: #e6ebee;
border:none;
border-bottom: 5px solid #d3dce1;
color: #333;
font-size: 14px;
font-weight: 200;
cursor: pointer;
transition: box-shadow .4s ease;
}
$(function() { $("#loader").hide(); $("form").submit(function(e) { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message; if(data) { $.ajax({ type: "POST", url: "./send.php", data: data, beforeSend: function(html) { $("#loader").show(); $("#submit").hide(); }, success: function(html){ $("#loader").hide(); $("#result").html(html); } }); } return false; }); });
Здравствуйте, уважаемые друзья и гости блога! Обратная связь для сайта — это одна из наиболее значимых функций, которая позволяет блоггеру общаться со своими посетителями. Но есть одна загвоздка — плагины выводящие обратную связь для сайта очень много весят!
Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте «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 вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!
Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!
На этом все!
Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!
Создание формы обратной связи Создание формы обратной связи на сайтеВ процессе продвижения сайта наряду с изучением статистики посещений, особое значение имеет информация о сайте от самих посетителей. Одним из самых простых способов получения такой информации является размещение на сайте странички с формой обратной связи . Посетитель оставляет сообщение, и оно придет на ваш адрес электронной почты или любой другой, который вы укажете. При этом посетителю не надо использовать свою почтовую программу, ему даже не обязательно иметь свой e-mail.
Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)
Рис.1. Простая форма обратной связиДля размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.
1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.
2. Выберем страницу, на которой хотим разместить форму обратной связи, и вставим в нужное место следующий код:Ваше имя:
Ваш e-mail (для ответа):
Ваше сообщение:
Как видим, вся форма создаётся тегом с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").
3. Создадим новую страницу mail.php , аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:
Обратная связь
Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:
- [email protected]
- адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. CAPTCHA
- Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей.
Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую. - a href=index.html - адрес главной (домашней) страницы сайта.
Созданную страницу mail.php необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.
Проверьте работоспособность формы обратной связи. Если всё сделано аккуратно, то после заполнения формы и нажатия Отправить сообщение должен появиться следующий текст: "Спасибо за отправку вашего сообщения. , чтобы вернуться на главную страницу ". После этого вы обнаружите в своём почтовом ящике (или другом, который вы указали при создании формы обратной связи) собственное послание себе любимому.
Замечание: на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.
Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку charset=utf-8 . Если вы используете программу Adobe Dreamweaver , то для этого надо выбрать раздел меню Изменить - Свойства страницы - Кодировка .
Подробнее проблема с кодировкой файлов сайта рассмотрена в статье Проблемы с кодировкой в форме обратной связи .
В описанном примере для простоты сообщение об отправке письма выводится на пустой странице. Конечно, вы можете разместить его на любой странице своего сайта, чтобы посетитель мог использовать навигацию (меню) для выбора дальнейших действий. Для этого поместите РНР-код (то, что расположено от ) в нужное место страницы с меню и измените её название на mail.php.
Кроме размещения самой формы обратной связи, желательно проверять правильность заполнения её полей посетителем. Это необходимо делать для того, чтобы вам не приходили пустые письма и ваш почтовый ящик не забивался хламом, отсылаемым шутниками, любящими просто понажимать кнопку Отправить сообщение . О методах проверки заполнения формы обратной связи и защиты от спама рассказано в статьях "
От автора: приветствую вас, друзья. Данная статья будет продолжением , в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.
Исходные файлы текущей статьи вы можете скачать по .
В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.
Начнем с синтаксиса функции mail . Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:
to — email получателя (также можно указать несколько адресов, перечислив их через запятую);
subject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:
