Формы на веб-сайтах могут использоваться для многих целей помимо того, что они являются местом, где можно связаться с администраторами веб-сайтов. В предыдущих статьях я рассказывал, как создать полнофункциональную контактную форму в PHP и как создать собственную капчу и интегрировать ее в свои контактные формы .
В этом уроке мы сосредоточимся на создании форм на PHP, которые предназначены для других целей, таких как сбор информации о соискателе, бронирование гостиничных номеров или получение информации о событиях брака от клиентов.
Выбор правильных полей для ваших форм
В руководстве по контактным формам мы узнали, что различные организации и веб-сайты, скорее всего, захотят получать конкретную информацию от людей, обращающихся к ним, чтобы помочь им наилучшим образом. Например, контактная форма на школьном веб-сайте может попросить родителей предоставить информацию о своих детях, зачисленных в эту школу. Аналогичным образом, контактная форма на веб-сайте покупок может собирать информацию о последних продуктах, которые люди купили, чтобы лучше обслуживать их.
Если контактные формы могут сильно различаться между различными веб-сайтами и организациями, разумно предположить, что формы, которые должны служить совершенно разным целям, имеют очень разные области. Например, вы, скорее всего, спросите людей, бронирующих номер в отеле, будут ли они сопровождаться другими взрослыми или детьми. Просить то же самое соискатель не имеет смысла.
Это важно помнить, когда вы будете следовать этому уроку. Основная концепция создания формы, сбора всей информации и отправки ее куда-либо по электронной почте останется прежней, но для работы с кодом почти наверняка потребуются изменения. Возможно, вы захотите добавить разные поля ввода в свои формы и назначить разные имена этим полям. Это тогда повлияет на код PHP в конце. Если вы вносите изменения в формы, убедитесь, что вы также обновили код PHP.
Вы можете взглянуть на этот список из 20 лучших почтовых форм PHP, чтобы получить представление о расположении элементов формы или различных полях ввода, которые вы, возможно, захотите добавить в свои формы.
-
PHP20 лучших форм электронной почты PHP
Создание формы HTML
В этом уроке мы создадим форму для бронирования гостиничных номеров в качестве примера. Для простоты мы не будем использовать никаких дополнительных библиотек JavaScript или PHP.
Имея это в виду, давайте напишем разметку нашей формы. Мы должны спросить людей, делающих бронирование, их имя, адрес электронной почты и номер телефона. После этого мы просим их предоставить подробную информацию о количестве детей и взрослых, которые будут сопровождать их, датах регистрации заезда и отъезда, а также типе номера, который они предпочитают. В конце мы спросим их, есть ли что-то, что мы покажем, знаем до их прибытия.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<form action=»reservation.php» method=»post»>
<div class=»elem-group»>
<label for=»name»>Your Name</label>
<input type=»text» id=»name» name=»visitor_name» placeholder=»John Doe» pattern=[AZ\sa-z]{3,20} required>
</div>
<div class=»elem-group»>
<label for=»email»>Your E-mail</label>
<input type=»email» id=»email» name=»visitor_email» placeholder=»john.doe@email.com» required>
</div>
<div class=»elem-group»>
<label for=»phone»>Your Phone</label>
<input type=»tel» id=»phone» name=»visitor_phone» placeholder=»498-348-3872″ pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required>
</div>
<hr>
<div class=»elem-group inlined»>
<label for=»adult»>Adults</label>
<input type=»number» id=»adult» name=»total_adults» placeholder=»2″ min=»1″ required>
</div>
<div class=»elem-group inlined»>
<label for=»child»>Children</label>
<input type=»number» id=»child» name=»total_children» placeholder=»2″ min=»0″ required>
</div>
<div class=»elem-group inlined»>
<label for=»checkin-date»>Check-in Date</label>
<input type=»date» id=»checkin-date» name=»checkin» required>
</div>
<div class=»elem-group inlined»>
<label for=»checkout-date»>Check-out Date</label>
<input type=»date» id=»checkout-date» name=»checkout» required>
</div>
<div class=»elem-group»>
<label for=»room-selection»>Select Room Preference</label>
<select id=»room-selection» name=»room_preference» required>
<option value=»»>Choose a Room from the List</option>
<option value=»connecting»>Connecting</option>
<option value=»adjoining»>Adjoining</option>
<option value=»adjacent»>Adjacent</option>
</select>
</div>
<hr>
<div class=»elem-group»>
<label for=»message»>Anything Else?</label>
<textarea id=»message» name=»visitor_message» placeholder=»Tell us anything else that might be important.»
</div>
<button type=»submit»>Book The Rooms</button>
</form>
|
Мы использовали два основных шаблона для проверки правильности предоставленных имени и телефонных номеров. Телефонные номера имеют разные форматы в зависимости от региона. Это означает, что вам придется соответствующим образом обновить значение атрибута pattern.
Мы также установили минимальное значение для взрослых и детей равным 1 и 0 соответственно. Таким образом, мы можем предотвратить ошибочное добавление людьми отрицательных значений.
Вы можете добавить дополнительные элементы в эту форму для других услуг, предоставляемых отелем, таких как пикап, обслуживание номеров и т. Д.
Прямо сейчас посетители могут установить даты заезда и выезда на прежнее значение. Мы можем избежать этого, просто установив значение атрибута min на даты заезда и выезда. В нашем случае мы установим минимально возможную дату регистрации на текущий день. Значением атрибута min даты выезда будет дата заезда.
Код JavaScript ниже будет обрабатывать всю логику для нас. Месяцы начинаются с нуля, поэтому мы добавляем 1 к возвращаемому значению, чтобы получить фактический месяц. Возвращаемое значение даты может быть любым целым числом от 1 до 31 в зависимости от текущего времени.
Когда значения даты и месяца представлены в виде одной цифры, они дополняются дополнительным 0, так что конечная строка остается в допустимом формате.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
var currentDateTime = new Date();
var year = currentDateTime.getFullYear();
var month = (currentDateTime.getMonth() + 1);
var date = currentDateTime.getDate();
if(date < 10) {
date = ‘0’ + date;
}
if(month < 10) {
month = ‘0’ + month;
}
var dateTomorrow = year + «-» + month + «-» + date;
var checkinElem = document.querySelector(«#checkin-date»);
var checkoutElem = document.querySelector(«#checkout-date»);
checkinElem.setAttribute(«min», dateTomorrow);
checkinElem.onchange = function () {
checkoutElem.setAttribute(«min», this.value);
}
|
Следующая демонстрация CodePen показывает нам, как ведет себя форма после добавления вышеупомянутой разметки и функциональности JavaScript.
Отправка данных формы по электронной почте с помощью PHP
Последний шаг включает сбор всех данных из нашей формы и отправку их соответствующим людям по электронной почте. Это на самом деле очень легко сделать. Сначала мы собираем всю информацию, используя переменные $_POST . Как только у нас есть необходимая информация, мы очищаем ее, чтобы удалить что-либо вредоносное. Наконец, мы создаем тело нашего HTML-письма и затем отправляем его с помощью функции mail () в PHP.
Следующий код войдет в файл с именем booking.php . Имя файла будет другим, если вы изменили значение атрибута действия формы в предыдущем разделе.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<?php
if($_POST) {
$visitor_name = «»;
$visitor_email = «»;
$visitor_phone = «»;
$total_adults = «»;
$total_children = «»;
$checkin_date = «»;
$checkout_date = «»;
$room_type = «»;
$visitor_message = «»;
if(isset($_POST[‘visitor_name’])) {
$visitor_name = filter_var($_POST[‘visitor_name’], FILTER_SANITIZE_STRING);
}
if(isset($_POST[‘visitor_email’])) {
$visitor_email = str_replace(array(«\r», «\n», «%0a», «%0d»), », $_POST[‘visitor_email’]);
$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
}
if(isset($_POST[‘visitor_phone’])) {
$visitor_phone = filter_var($_POST[‘visitor_phone’], FILTER_SANITIZE_NUMBER_INT);
}
if(isset($_POST[‘total_adults’])) {
$total_adults = filter_var($_POST[‘total_adults’], FILTER_SANITIZE_NUMBER_INT);
}
if(isset($_POST[‘total_children’])) {
$total_children = filter_var($_POST[‘total_children’], FILTER_SANITIZE_NUMBER_INT);
}
if(isset($_POST[‘checkin’])) {
$checkin_date = filter_var($_POST[‘checkin’], FILTER_SANITIZE_NUMBER_INT);
}
if(isset($_POST[‘checkout’])) {
$checkout_date = filter_var($_POST[‘checkout’], FILTER_SANITIZE_NUMBER_INT);
}
if(isset($_POST[‘room_preference’])) {
$room_type = filter_var($_POST[‘room_preference’], FILTER_SANITIZE_STRING);
}
if(isset($_POST[‘visitor_message’])) {
$visitor_message = htmlspecialchars($_POST[‘visitor_message’]);
}
$recipient = «booking@demo.com»;
$headers = ‘MIME-Version: 1.0’ .
.’Content-type: text/html;
.’From: ‘ .
$email_content = «<html><body>»;
$email_content .= «<table style=’font-family: Arial;’><tbody><tr><td style=’background: #eee; padding: 10px;’>Visitor Name</td><td style=’background: #fda; padding: 10px;’>$visitor_name</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Visitor Email</td><td style=’background: #fda; padding: 10px;’>$visitor_email</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Visitor Phone</td><td style=’background: #fda; padding: 10px;’>$visitor_phone</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Total Adults</td><td style=’background: #fda; padding: 10px;’>$total_adults</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Total Children</td><td style=’background: #fda; padding: 10px;’>$total_children</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Check-in Date</td><td style=’background: #fda; padding: 10px;’>$checkin_date</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Check-out Date</td><td style=’background: #fda; padding: 10px;’>$checkout_date</td></tr>»;
$email_content .= «<tr><td style=’background: #eee; padding: 10px;’>Room Type</td><td style=’background: #fda; padding: 10px;’>$room_type</td></tr></tbody></table>»;
$email_content .= «<p style=’font-family: Arial; font-size: 1.25rem;’><strong>Special Request from $visitor_name —</strong><i> $visitor_message</i>.</p>»;
$email_content .= ‘</body></html>’;
echo $email_content;
if(mail($recipient, «Hotel Room Reservation Confirmation», $email_content, $headers)) {
echo ‘<p>Thank you for booking a hotel room with us.
} else {
echo ‘<p>We are sorry but the booking confirmation email did not go through.</p>’;
}
} else {
echo ‘<p>Something went wrong</p>’;
}
?>
|
Мы начинаем с дезинфекции имени и адреса электронной почты посетителя. После этого мы очищаем дату регистрации, дату выезда, количество взрослых и количество детей, используя флаг FILTER_SANITIZE_NUMBER_INT . Этот флаг удаляет все символы из ввода, кроме цифр и знаков + или - . Он отлично подходит для санации наших дат, потому что мы ожидаем их в формате YYYY-MM-DD — только цифры и знак минус. Вы должны просмотреть документацию PHP, чтобы узнать обо всех флагах очистки и проверки .
Как только мы очистим все входные данные, мы начинаем готовить наши заголовки. Включив Content-type: text/html в заголовки писем, мы сможем использовать теги HTML внутри нашего письма. В этом уроке мы делаем его простым и показываем все пользовательские данные в таблице. Любое специальное сообщение, оставленное людьми, бронирующими номер в отеле, отображается под таблицей.
Последние мысли
В этом руководстве мы рассмотрели основы создания сценария электронной почты PHP, который отправляет данные из форм, заполненных людьми. При создании форм важно правильно расположить элементы и убедиться, что вы запрашиваете только ту информацию, которая действительно требуется. Создание излишне длинной формы с неправильно выложенными элементами не позволит пользователям заполнять форму. Вы также должны убедиться, что каждый элемент назван правильно. Правильная дезинфекция пользовательского ввода также важна.
Если вы никогда не создавали свои собственные формы и не знакомы с PHP, возможно, стоит подумать об использовании сценариев, созданных профессионалами. Мы создали этот список из 20 лучших форм электронной почты PHP, чтобы помочь вам начать. Эти формы поставляются с дополнительными функциями, такими как капча, планирование электронной почты и загрузка файлов.
-
PHP20 лучших форм электронной почты PHP
Если у вас есть какие-либо вопросы, связанные с этим учебником, пожалуйста, дайте мне знать в комментариях.