Форма обратной связи на PHP с отправкой на e-mail
Вы здесь: Главная — PHP — PHP Основы — Форма обратной связи на PHP с отправкой на e-mail
На этом уроке мы познакомимся с функцией mail (), на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла — forma.php и mail.php. В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form — кнопка «Отправить» и атрибут action, который ссылается на обработчик — mail.php, именно к нему обращаются данные из формы при нажатии кнопки «Отправить». В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php». На этой странице прописан скрипт на PHP, который обрабатывает данные формы :
<form action="./mail.php" method="post">
Данные формы отправляются методом POST (обрабатывается как $ _POST). $ _POST — это массив переменных, переданных текущему скрипту через метод
Ниже вы видите содержимое файла forma.php, поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name, значения мы прописываем сами, исходя из логики.
<!DOCTYPE html>
<html>
<head>
<title>Форма обратной связи на PHP с отправкой на почту</title>
</head>
<body>
<h3>Форма обратной связи на PHP</h3>
<!--Данные введенные пользователем обрабатываются кодом в mail.php-->
<form action="./mail.php" method="post">
<!--Тег используется для группировки связанных элементов в форме-->
<fieldset>
<!--Тег задает заголовок для групповых элементов-->
<legend>Оставьте сообщение:</legend>
Ваше имя:
<!--Устанавливает однострочное текстовое поле ввода:-->
<input type="text" name="name">
<!--Используется для полей ввода, которые должны содержать адрес электронной почты.-->
E-mail:
<input type="text" name="email">
Номер телефона:
<input type="text" name="phone">
Сообщение:
<!--Тег разрешает многострочный ввод текста.-->
Текстовая область может содержать неограниченное количество символов-->
<textarea rows="10" cols="45" name="message"></textarea>
<!--Устанавливает кнопку для отправки данных формы в обработчик формы.-->
<input type="submit" value="Отправить сообщение">
</fieldset>
</form>
</body>
</html>
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php. Придумываем сами имена для переменных. В PHP переменная начинается со знака $, а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы — значение
<?php
$to = "[email protected]"; // емайл получателя данных из формы
$tema = "Форма обратной связи на PHP"; // тема полученного емайла
$message = "Ваше имя: ".$_POST['name']."<br>";//присвоить переменной значение, полученное из формы name=name
$message .= "E-mail: ".$_POST['Формы регистрации, обратной связи и другие (HTML)
На каждом сайте должны присутствовать формы. Без них невозможно сделать контактные формы, обратную связь и поля регистрации. С их помощью можно создать кнопки отправки, очистки и другие. Есть и множество других вариаций их использования, об этом поговорим в этой статье.
Создание формы. Поля тега Form
Давайте разберем все возможности, которые предлагает нам тег form. Ниже мы рассмотрим все элементы формы в HTML на примерах.
Чтобы создать форму нужно вписать в HTML документ парный тег form. Этот тег обязателен, без него поля не будут функционировать. Это контейнер, в котором и содержатся поля(регистрации — ввод логина и пароля, ввод комментариев, а также кнопки).
Тег имеет несколько атрибутов: <action>, <method>, <name> и другие.
Атрибут action указывает ссылку на документ, в котором будут обрабатываться значения формы. Вы можете создать ещё один HTML документ с названием form.html. Такой способ используется в примере ниже.
Ещё один важный атрибут — <method>. Он отвечает за то, как именно будет проходить обработка вводимых данных. Всего есть 2 значения атрибута: get и post. Не будем подробно вдаваться в их отличия, так как это тема изучения PHP.
Если же вы уже используете PHP, можно не указывать ссылку в атрибуте action. Это возможно только если документ, содержащий форму, написан на языке PHP, если он будет её обрабатывать.
Форма регистрации. HTML
Один из важных элементов любого сайта — поле регистрации. Рассмотрим стандартное поле, с вводом логина и пароля. Можно добавить ввод имени, даты рождения, каких-либо личных предпочтений и так далее.
Для того, чтобы создать поле ввода логина создаем тег input. Он является основой всех элементов формы. Создаем 2 одинарных тега input, вписываем туда 2 атрибута name и type. В первом задаем такие значения: name=»login» type=»text», а для второго: name=»password» type=»password».
Как видим, у нас получилось стандартное поле регистрации, с логином и паролем. Идем дальше.
Форма обратной связи для сайта. HTML
Создадим обратную связь для нашей страницы. Она может понадобится, если основателю сайта важно мнение клиентов. Иногда используется для связи с администрацией сайта, для обсуждения каких-либо вопросов.
Создаем 2 тега <input>, в них будет указывать имя пользователя и адрес электронной почты(на него должен приходить ответ от модерации). Затем создаем поле для ввода сообщения(может использоваться для создания комментариев)и кнопку отправки и очистки.
Поле имени: input name=»name» type=»text»
Поле E-Mail: input name=»E-Mail» type=»text»
Как видите, контактную форму в HTML создать сложнее чем поле регистрации, но не очень сложно. Формы особо не радуют глаз, но ниже мы поговорим о том, как сделать красивые формы
Теперь подробнее о поле сообщения и кнопках. Для сообщения используется двойной тег textarea. Он имеет атрибуты name, cols, rows и другие. Атрибут name вам уже известен, а cols и rows работают по принципу создания таблиц. То есть они указывают ширину и высоту поля, определяя количество колонок и линий для сообщения.
Кнопка — тег input с типом submit и reset. Первый тип используется для отправки данных в обработчик, а второй для очистки полей от введенных данных. В атрибуте value указывается название кнопки, которое будет отображаться на сайте. В нашем случае это «Отправить» и «Очистить». Тип submit считается формой отправки, тег button не сможет справиться с его функциями, поэтому используйте только его
Чтобы в поле было указано функция формы, вводим атрибут placeholder. В нем, в кавычках, указываем функцию формы. Например в поле «Имя», указано значение «Имя:»
Форма обратного звонка. HTML
Создается очень просто. Здесь нужно всего лишь 4 тега input — Ввод имени, номера, кнопки отправки и очистки. Вот пример:
Другие поля формы в HTML
Все остальные поля создаются через тег <input>, сейчас мы разберем их создание.
Первый тип — <radio>. Может использоваться для выбора каких-либо вариантов при информации. Например в поле регистрации может быть вопрос о том, какое у вас вероисповедание или политические взгляды. Создается с помощью тега <input>, и типа <radio>, в атрибуте <value> указывается выбранное значение.
Второй тип — checkbox. Очень поход на тип radio, но его отличие в том, что он позволяет выбрать несколько вариантов. Чтобы создать поле выбора укажите тип checkbox для тега <input>
Создание красивых форм. HTML & CSS
Простые HTML формы выглядят не презентабельно, поэтому мы воспользуемся CSS стилями. Мы придадим приятную форму самим полям, сделаем красивую кнопку отправки — зададим её цвет. Кроме этого будут присутствовать другие стили. Чтобы разобраться внимательно рассмотрите пример:
Теги:Простая форма обратной связи своими руками.
В этой статье мы расскажем о том, как сделать простую, работающую форму обратной связи на PHP.
Первым делом разберемся с файловой структурой, у нас будет главная страница index.html, папка со стилями — css, в которой будет один файл стилей template.css и файл PHP — send.php.
Первым делом создадим разметку нашей формы в файле index.html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Страница</title> <link rel="stylesheet" href="/../css/template.css" type="text/css" /> </head> <body> <form action="send.php" method="get"> <input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br> <input type="text" placeholder="Введите сюда ваше имя" name="name"><br> <input type="submit" value="Нажмите, чтобы отправить письмо"> </form> </body> </html>
Ключевыми тут являются атрибуты action и method у <form>, первый отвечает за путь до PHP файла обработчика отправления письма, а второй за тип передачи в этот обработчик данных.
- В нашем случае файл-обработчик send.php, который лежит в корневом каталоге, рядом с index.html, потому и путь такой.
- И мы выбрали метод GET, так же можно выбирать метод POST, просто получать данные потом в PHP файле вы будете по другому.
- Для <input> важен атрибут name, при помощи его значения потом мы будем доставать значения в PHP.
Добавим немного стилей, чтобы форма была по центру страницы:
form {
text-align:center;
}
form input {
margin:20px 0;
}Теперь остается только написать обработчик send.php, который будет отправлять сообщение на почту.
Немного о логике происходящего. Пользователь, попав на страницу index.html, заполняет поля формы и нажимает на кнопку Отправить (В нашем случае она будет с текстом «Нажмите, чтобы отправить письмо»), после чего страница переходи к файлу send.php, который будет выполнять, написанный нами скрипт, по его результатам выводить сообщение об успешной/не успешной отправке.
Немного о самом скрипте, чтобы продемонстрировать работоспособность примера, письмо будет отправляться на указанный в поле E-mail. Т.е. вы сможете ввести свой адрес и удостоверится в работе скрипта.
Вот сам скрипт, с комментариями строк:
<?php
//Получаем данные из глобальной переменной $_GET, так как мы передаем данные методом GET
$name = $_GET['name']; // Вытаскиваем имя в переменную
$email = $_GET['e-mail']; // Вытаскиваем почту в переменную
$message = "Поздравляем, $name, отправка сообщений на почту $email работает"; // Формируем сообщение, отправляемое на почту
$to = $email; // Задаем получателя письма
$from = "noreply-site.web.cofp.ru"; // От кого пришло письмо
$subject = "Письмо с примера простой формы сайта web.cofp.ru"; // Задаем тему письма
$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n"; // Формируем заголовок письма (при неправильном формировании может ломаться кодировка и т.д.)
if (mail($to, $subject, $message, $headers)) { // При помощи функции mail, отправляем сообщение, проверяя отправилось оно или нет
echo "<p>Сообщение успешно отправлено</p>"; // Отправка успешна
}
else {
echo "<p>Что-то пошло не так, как планировалось</p>"; // Письмо не отправилось
}
?>Чтобы понять, что тут происходит, вам нужны хотя бы базовые знания PHP или программирования на других языках. Комментарии помогут вам.
Там где мы вытаскиваем данные в переменные — используется глобальная переменная и значения атрибутов name, соответствующих полей.
Результат работы примера можно увидеть на демо-странице:
Скачать исходники примера ниже:
Как создать форму обратной связи для сайта
Форма обратной связи на сайт
Этот пост посвящён тому, как очень просто создать форму обратной связи для блога или сайта используя только HTML и CSS.Здравствуйте, уважаемый читатель. На связи Евгений Назаров.
Сразу должен сказать, что для меня это занятие оказалось совсем непростым, я перелопатил чуть ли не весь Интернет в поисках подходящей формы обратной связи, которая корректно работала бы на моём Блоге с моей темой.
Это было нечто, чего я только не попробовал, в итоге выходило так, что-либо ломался Блог и форма не работала либо всё было ок, красивая удобная форма, но не рабочая всё равно. Я не знаю почему так выходит, может тема не позволяет, может какие силы нечистые, может мои прямые руки. 😀
Некоторое время у меня стояла форма обратной связи от JivoSite, находилась она справа и раскрывалась при клике. Вариант замены конечно хороший, но он меня не устраивал, так как его скрипт несколько нагружал сервер и от этого скорость загрузки страниц была чуть дольше, несмотря на то, что код загружался асинхронно и стоял в самом конце footer.php. И всё же всплывающие окно с формой это далеко не страница, поэтому я продолжал искать и верить.
Читая комментарии на сторонних блогах, я понял что такая проблема существует не только у меня.
В тот момент я сказал себе, как только найдётся решение этой нехорошей проблемы, напишу пост.
Как создать красивую, рабочую форму обратной связи
Решение нашлось само собой, как раз в тот момент когда я перестал искать.
Мой друг делал себе лендинг и попросил меня оценить его работу. В тот момент я заметил у него форму обратной связи и спросил, как он её сделал.
Он ответил что форма не самописная, просто взял код со стороннего сервиса. (Я как вы знаете уже перепробовал кучу всяких сервисов и генераторов форм обратной связи, плагинов и прочих инструментов, всё было безуспешно.)
Но всё же попросил ссылку на сервис, вдруг прокатит. И знаете, прокатило, форма работала, единственный минус, в ней не было ни капли css, картинка ниже, как она выглядела изначально.
Но это было совсем не важно, самое главное что она, блин, рабочая, отправляет письма.
А вот как она выглядит сейчас. Кстати большинство кода, взял с блога Александра Борисова. Он писал пост на эту тему, но к сожалению его форма тоже не подошла. Но дизайн мне очень понравился, по этому я решил не выдумывать и взять уже готовый код.
Кстати попробуйте сначала установить форму по Сашиному методу, вот ссылка на статью форма обратной связи, реализация немного сложнее, но форма работает лучше, так как не отправляет ни каких лишних запросов на другие сайты. Если не получится, возвращайтесь ко мне.
В его коде тоже пришлось изменить некоторые моменты, так как они ломали блок с контентом и выглядело это не круто.
Как вставить форму обратной связи на блоге.
Ну что, давайте перейдём к созданию формы обратной связи на вашем блоге, сайте.
Для этого качаем архив с кодом и нужными нам картинками по этой ссылке.
1) Далее вставляем код HTML через редактор WordPress предварительно переключившись на «Текст», прямо на ту страницу, где вы желаете видеть форму.
Это картинка, код вы можете скачать по ссылке выше.
В коде нужно прописать адрес почты, на которую вы хотите получать письма, её нужно вставить во второй строчке вместо [email protected] без пробелов.
2) Сделали?! Хорошо. Теперь добавим ей стилей, вставив его в самый конец файла style.css вашей темы.
Это картинка, код вы можете скачать по ссылке выше.
3) Теперь перемещаем три картинки из скачанного ранее архива в папку images вашей темы, сделать это можно через FTP соединение либо напрямую через консоль управления вашим хостингом.
Если кнопка отправить находится не в том месте, где должна быть, то поиграйтесь в идентификаторе #contact_submit со значением margin-left: 470px; увеличивая или уменьшая число.
На этом всё, можете опубликовывать страницу. Если форма отображается не корректно или без стилей, попробуйте зажать сочетание клавиш ctrl+F5 или если у вас стоит плагин HyperCash или что-то подобное, удалите весь кеш через него.
Теперь всё должно работать.
Подтвердите вашу почту.
Единственное, осталось подтвердить вашу почту. Для этого заполните все поля в форме, напишите какой-нибудь текст и нажмите отправить. Далее вас перекинет на страницу, где будет сказано, что нужно подтвердить адрес, который вы указали в коде.
Перейдите на эту почту, вам должно прийти письмо от сервиса, нажимаете на кнопку и вуаля, форма обратной связи готова справляться со своей задачей.
Конечно у неё есть небольшие минусы, она отправляет сообщение даже если во всех полях ни чего не написано, я пробовал решить эту проблему, но опять столкнулся с неудачей.
На локальном сервере всё работало прекрасно, выдавались красивые всплывающие поля с ошибками в которых было написано, что-то типа «Вы не ввели имя», но залив код на сайт, форма перестала работать, я плюнул и оставил всё как было. Если найду решение и этой проблемы, обязательно сделаю дополнение к посту.
Пишите в комментариях, помог ли вам пост, очень интересно знать. А так же пишите, если решили для себя последнюю проблему и каким образом вы её реализовали.
Всегда с Вами,
Евгений Назаров.