Пошаговая инструкция создания сайта на html коде / Файл отправки данных из формы подписки на почту

Файл отправки данных из формы подписки на почту

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

Такому файлу чаще всего дают название "send", а расширение у него будет ".php".

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

Файл send.php

В папке "www" нашего сайта на локальном хостинге создадим новую папку, в которой будет находиться файл send.php. Назовем ее так же, как и сам файл "send".

В программе Notepad++ открываем новый файл и сохраняем его с именем "send" и расширением "php" в только что созданной одноименной папке.

Теперь заполним этот файл нужной информацией.

Файлы PHP всегда начинаются с открывающего тега <?php и заканчиваются закрывающим тегом ?>. Между ними будет находится вся необходимая PHP информация:

 <?php

 // Вся PHP информация  

 ?>

где:

// Вся PHP информация - комментарии и заметки в PHP коде

Сначала сделаем запись, с помощью которой будет осуществляться прием данных из формы подписки. Это будет прием email-адреса. Для наглядности и сравнения приведу первоначальный код html формы подписки (без его последующего редактирования), который мы сделали в начале предыдущего шага, посвященного самой форме подписки:

Запись приема email-адреса:

$email = $_POST['email'];

где:

$ - обозначение переменных в PHP;

email - значение атрибута name из записи поля для email-адреса в html коде формы подписки;

$email - имя переменной в PHP;

POST - массив PHP, осуществляющий прием переменных из формы, в данном случае - формы подписки. Был указан в значении атрибута method в html коде формы подписки;

$_POST - запись массива принимающего необходимую переменную.

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

if (mail("АДРЕС ВАШЕЙ ПОЧТЫ", "Подписка на новости блога", E-mail подписчика: $email \r\n"))

где:

if - оператор PHP, указывающий на условие, которое должно быть выполнено, - условный оператор. Само условие следует сразу за оператором и пишется в круглых скобках;

mail - функция в PHP, отправляющая указанные в скобках данные на указанную почту;

"АДРЕС ВАШЕЙ ПОЧТЫ" - адрес почты, на который будет отправлено сообщение с указанными данными;

"Подписка на новости блога" - тема сообщения;

"E-mail подписчика: $email " - тело сообщения, где вместо "$email", будет стоять электронный адрес подписчика;

"\r" - означает возврат каретки в PHP;

"\n" - означает новую строку в PHP;

Последние два символа "\r\n" просто создают пустые строчки для визуального удобства.

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

Дальше идет запись появления уведомления о том, что "сообщение успешно отправлено", если оно отправилось:

{ 
   echo "Ваше сообщение успешно отправлено. Спасибо за подписку!";
}

где:

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

И выглядеть это, пока что, будет так:

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

else
{ 
   echo "При отправке сообщения произошла ошибка";
}

где:

else - расширение функций оператора условий if, которое используется в случае необходимости выполнить одно из нескольких условий. В данном случае это, либо вывод текста об отправке сообщения, либо вывод текста о произошедшей при отправке ошибки.

И в заключении, сделаем возвращение пользователя обратно на сайт через 3 секунды, после показа одного из этих сообщений, с помощью специального скрипта JavaScript. Запись этого скрипта расположим после закрывающего тега PHP:

JavaScript - тоже язык программирования, специальный вспомогательный, встраиваемый, с помощью которого страницы сайта становятся более интерактивными.

Запись этого скрипта расположим после закрывающего тега PHP:

<script language="JavaScript" type="text/javascript">
function changeurl(){history.go(-1);}
window.setTimeout("changeurl();",3000);
</script>

где:

function - функция JavaScript, которая объявляет следующую за ней запись произвольной функцией;

changeurl - произвольное имя функции;

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

history - объект JavaScript, который отвечает за историю переходов со страницы на страницу в браузере;

go(-1) - команда перемещения на одну страницу назад;

window - объект JavaScript, указывающий на открывшееся окно в браузере;

setTimeout - фукция JavaScript, которая устанавливает в миллисекундах время задержки выполнения указанной в ней функции;

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

3000 - количество миллисекунд временной задержки;

Теперь файл send.php выглядит вот таким образом:

И осталось подключить его к нашей форме подписки. Для этого открываем в Notepad++ файл sidebar.html, который лежит в папке "include", и в атрибуте action элементе формы подписки:

<form action="название папки/название файла" method="post">

прописываем название папки и название файла:

<form action="send/send.php" method="post">

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

Оформление страницы уведомления об отправки сообщения

Поработаем немного над внешним видом страницы уведомления, которая пока что выглядит вот так:

Работаем в файле send.php.

Сделать оформление можно с помощью элементов html, которые пропишем внутри операторов PHP echo:

{ 
   echo "<html>
	<body style=`font-family:Arial,sans-serif;`> <br />
	<h1 style=`font-weight:bold;color:#819A32;text-align:center;`>
	Ваше сообщение успешно отправлено.</h1>
	<p><h2 style=`font-weight:bold;color:#1E90FF;text-align:center;>
	Спасибо за подписку!</h2></p>
	</body>
	</html>";
}

где:

<html>...</html> - элемент HTML, который определяет начало и конец кода, состоит из пары тегов, которые содержат в себе всю необходимую html информацию;

<body>...</body> - элемент HTML, состоит из пары тегов, которые определяют начало и конец видимой части документа;

style - атрибут описания стилей элементов HTML;

font-family - свойство стиля, которое определяет шрифт текста;

Arial - название шрифта;

sans-serif - указание на шрифт без засечек;

</br> - элемент HTML, состоящий из одного тега, который создает пустую строку;

<h1>...</h1> - элемент HTML, состоящий из пары тегов, предназначенный для написания заголовков, или просто крупного текста;

font-weight - свойство стиля, которое определяет толщину шрифта;

bold - жирный шрифт;

color - свойство стиля, которое определяет цвет шрифта;

text-align - свойство стиля, которое отвечает за горизонтальное выравнивание объекта;

center - выравнивание по центру;

<p>...</p> - элемент HTML, состоящий из пары тегов, предназначенный для создания абзацев и написания текстов;

<h2>...</h2> - элемент HTML, состоящий из пары тегов, предназначенный для написания подзаголовков, или средне-крупного текста.

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

Сюда можно добавить еще одну строчку с текстом "Через 3 секунды вы вернетесь на сайт.";

{ 
   echo "<html>
	<body style=`font-family:Arial,sans-serif;`> <br />
	<h1 style=`font-weight:bold;color:#819A32;text-align:center;`>
	Ваше сообщение успешно отправлено.</h1>
	<p><h2 style=`font-weight:bold;color:#1E90FF;text-align:center;>
	Спасибо за подписку!</h2></p>
	<p><h2 style=`font-weight:bold;color:#819A32;text-align:center;>
	Через 3 секунды вы вернетесь на сайт.</h2></p>	
	</body>
	</html>";
}

Вот, что в результате получилось:

Цвет текста и его размер, вы, конечно же, выбираете свои.

Точно также оформим вариант вывода уведомления в случае произошедшей ошибки. Просто скопируем предыдущий вариант, заменим в нем текст и его цвет, с зеленого на красный:

{ 
   echo "<html>
	<body style=`font-family:Arial,sans-serif;`> <br />
	<h1 style=`font-weight:bold;color:red;text-align:center;`>
	При отправке сообщения произошла ошибка.</h1>
	<p><h2 style=`font-weight:bold;color:#819A32;text-align:center;>
	Через 3 секунды вы вернетесь на сайт.</h2></p>	
	</body>
	</html>";
}

Окончательный вариант файла send.php на данный момент:

Следующий шаг -

Если вы хотите, чтобы я сообщила вам о выходе новой статьи, подписывайтесь на Новости блога.