How do I send an HTML Form in an Email .. not just MAILTO
I have an HTML form for people to fill out, and I want it so when they click the submit button, it will just send the email, not bring up their email and ask them to send the message themselves.
All that does is open up a new window and populates the body of the email, but I want it to just send an email.
And is there a way to format the output of what the email will look like? Instead of just a list of the field names and the entered value.
3 Answers 3
> 2021 Answer = Easy Way using GMail (5 Mins)
We had a similar challenge to solve yesterday, and we solved it using a Google Apps Script!
Send Email From an HTML Form Without a Backend (Server) via Google!
Brief Overview
A. Using the sample script, deploy a Google App Script
Deploy the sample script as a Google Spreadsheet APP Script: google-script-just-email.js
remember to set the TO_ADDRESS in the script to where ever you want the emails to be sent.
and copy the APP URL so you can use it in the next step when you publish the script.
B. Create your HTML Form and Set the action to the App URL
Using the sample html file: index.html create a basic form.
remember to paste your APP URL into the form action in the HTML form.
C. Test the HTML Form in your Browser
Open the HTML Form in your Browser, Input some data & submit it!
Submit the form. You should see a confirmation that it was sent: 
Open the inbox for the email address you set (above)
Everything about this is customisable, you can easily style/theme the form with your favourite CSS Library and Store the submitted data in a Google Spreadsheet for quick analysis.
The complete instructions are available on GitHub:
https://github.com/nelsonic/html-form-send-email-via-google-script-without-server
You are making sense, but you seem to misunderstand the concept of sending emails.
HTML is parsed on the client side, while the e-mail needs to be sent from the server. You cannot do it in pure HTML. I would suggest writing a PHP script that will deal with the email sending for you.
Basically, instead of the MAILTO, your form’s action will need to point to that PHP script. In the script, retrieve the values passed by the form (in PHP, they are available through the $_POST superglobal) and use the email sending function ( mail() ).
Of course, this can be done in other server-side languages as well. I’m giving a PHP solution because PHP is the language I work with.
A simple example code:
Of course, the script should contain some safety measures, such as checking whether the $_POST valies are at all available, as well as additional email headers (sender’s email, for instance), perhaps a way to deal with character encoding — but that’s too complex for a quick example ;).
Простейшая форма отправки данных на почту при помощи HTML и PHP
Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.
Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.
Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.
Создаем форму отправки данных в html
На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.
Первая строка будет следующей
<form action=»send.php» method=»post»>
Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.
Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:
<input type=»text» name=»fio» placeholder=»Укажите ФИО»>
Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.
<input type=»text» name=»email» placeholder=»Укажите e-mail»>
Здесь практически все то же самое, но имя для поля указано email, а пояснении указано, чтобы пользователь в эту форму ввел свой адресс электронной почты.
Следующей строкой будет кнопка «отправить»:
<input type=»submit» value=»Отправить»>
И последней строкой в форме будет тэг </form>
Теперь соберем все вместе.
<form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО»>
<input type=»text» name=»email» placeholder=»Укажите e-mail»>
<input type=»submit» value=»Отправить»>
</form>
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
<form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО» required>
<input type=»text» name=»email» placeholder=»Укажите e-mail» required>
<input type=»submit» value=»Отправить»>
</form>
Создаем файл, принимающий данные из HTML формы
Это будет файл с именем send.php
В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.
Первая функция преобразует все символы, которые пользователь попытается добавить в форму:
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ «<» в ‘<’. Также он поступить с другими символами, встречающимися в html коде.
Вторая функция декодирует url, если пользователь попытается его добавить в форму.
$fio = urldecode($fio);
$email = urldecode($email);
Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:
$fio = trim($fio);
$email = trim($email);
Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того , насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.
Проверка данных, передаваемых от HTML формы в файл PHP
Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:
Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.
Отправляем полученные данные из формы HTML на почту при помощи PHP
Для отправки данных на почту нужно воспользоваться функцией mail в PHP.
mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);
Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.
Тема письма должна быть понятной, а сообщение письма должно содержать то, что указал пользователь в HTML форме.
mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»);
Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
<
echo «сообщение успешно отправлено»;
> else <
echo «при отправке сообщения возникли ошибки»;
>
Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:
<?php
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo «<br>»;
//echo $email;
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
< echo "сообщение успешно отправлено";
> else <
echo «при отправке сообщения возникли ошибки»;
>?>
Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.
Помещаем HTML и PHP код отправки формы в один файл
В комментариях к этой статье многие задают вопрос о том, как сделать, чтобы и HTML форма и PHP код отправки данных на почту находились в одном файле, а не двух.
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
<html>
<head>
<title>Форма заявки с сайта</title>
</head>
<body>
<?php
//проверяем, существуют ли переменные в массиве POST
if(!isset($_POST[‘fio’]) and !isset($_POST[’email’])) <
?> <form action=»send.php» method=»post»>
<input type=»text» name=»fio» placeholder=»Укажите ФИО» required>
<input type=»text» name=»email» placeholder=»Укажите e-mail» required>
<input type=»submit» value=»Отправить»>
</form> <?php
> else <
//показываем форму
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»)) <
echo «Сообщение успешно отправлено»;
> else <
echo «При отправке сообщения возникли ошибки»;
>
>
?>
</body>
</html>
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
Вместо example@mail.ru должен быть email адрес на который нужно отправить письмо, а вместо example2@mail.ru должен быть существующий email данного сайта. Например для сайта webriz.ru это будет info@webriz.ru . Только в этом случае письмо с данными из формы будет отправлено.
Читайте также статью про немного модифицированный вариант данной формы отправки.
Как сделать отправку формы на почту html
Нашей условной задачей будет отправка формы заказа обратного звонка на почту. Поля ввода вы можете использовать любые, главное чтобы отличались атрибуты name и id в теге input:
Создаем html форму для отправки предположим в файле index.html
Создаем обработчик формы — файл send.php. Чтобы было легко сориентироваться в скрипте, оставляю ключевые комментарии у нужных строк.
Обратите внимание, что данный скрипт после отправки выдаст сообщение с благодарностью и через 3 секунды вернет нас обратно к файлу index.html. При необходимости, можете использовать этот скрипт через AJAX запрос.
Всё готово. Скрипт 100% работает. Если письма не доходят, проверьте правильность ввода адреса почты и посмотрите логи на вашем хостинге.
Форма обратной связи на 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 — это массив переменных, переданных текущему скрипту через метод POST.
Ниже вы видите содержимое файла forma.php, поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name, значения мы прописываем сами, исходя из логики.
<!DOCTYPE html>
<html>
<head>
<title>Форма обратной связи на PHP с отправкой на почту</title>
</head>
<body>
<h2>Форма обратной связи на PHP</h2>
<!—Данные введенные пользователем обрабатываются кодом в 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 переменная начинается со знака $, а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы — значение name.
<?php
$to = «yourmail@gmail.com»; // емайл получателя данных из формы
$tema = «Форма обратной связи на PHP»; // тема полученного емайла
$message = «Ваше имя: «.$_POST['name'].»<br>»;//присвоить переменной значение, полученное из формы name=name
$message .= «E-mail: «.$_POST['email'].»<br>»; //полученное из формы name=email
$message .= «Номер телефона: «.$_POST['phone'].»<br>»; //полученное из формы name=phone
$message .= «Сообщение: «.$_POST['message'].»<br>»; //полученное из формы name=message
$headers = 'MIME-Version: 1.0' . «\r\n»; // заголовок соответствует формату плюс символ перевода строки
$headers .= 'Content-type: text/html; charset=utf-8' . «\r\n»; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных
?>
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail. Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Как видите создавать форму обратной связи на PHP с отправкой на e-mail не так и сложно. Хотите узнать как сохранить данные, полученные из формы в файл или в базу данных? Этому научит вас мой видеокурс «PHP и MySQL с Нуля до Гуру».