Независимо от типа веб-сайта, которым вы владеете или управляете, вам, вероятно, понадобится контактная форма Контактная форма может помочь вашим посетителям запросить расценки, запросить информацию или поделиться советами или проблемами, с которыми они сталкиваются при использовании вашего сайта.
В этом уроке мы сосредоточимся на создании полнофункциональной контактной формы в PHP от начала до конца. Мы начнем с разметки всех полей, которые нам нужно добавить, и базового стиля контактной формы. После этого мы перейдем к коду PHP для реализации его функциональности.
Конечно, самый простой способ создать контактную форму — это загрузить профессиональный скрипт контактной формы из CodeCanyon .
-
PHP12 лучших контактных форм PHP-скриптов
Но если вы хотите узнать, как создается контактная форма, читайте дальше! Это может быть просто проще, чем вы думаете.
Разметка нашей HTML контактной формы
Первым шагом к созданию нашей собственной контактной формы является кодирование разметки. Мы начнем делать это, как только у нас будет список всех элементов, которые мы хотим в нашей форме. Нам понадобится поле для ввода имени человека, который с нами связывается, и нам понадобится поле для его адреса электронной почты, чтобы мы могли отправить ему ответ в случае необходимости. Нам также понадобится поле ввода для причины, по которой люди связываются с вами, и textarea где пользователи могут вводить свои сообщения.
Если веб-сайт, которым вы управляете, очень популярен, через контактную форму вы получите много писем. Чтобы убедиться, что нужные люди смогут прочитать эти письма и быстро ответить, вам нужно еще пару полей. Например, вы можете добавить поле, которое может определить, с каким отделом посетитель хочет связаться, например, отдел маркетинга, поддержки или выставления счетов. Эта информация впоследствии может быть использована для правильной маршрутизации электронной почты. В конечном итоге это может помочь вам быстрее отвечать и сортировать электронные письма более эффективно.
Сколько полей вы добавляете в контактную форму, зависит от типа веб-сайта, который вы используете, но убедитесь, что вы не переусердствовали. Принуждение посетителей к заполнению слишком большого количества данных может препятствовать их общению с вами.
Давайте напишем HTML-код, чтобы добавить все поля, которые я только что упомянул, в нашу контактную форму.
|
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
|
<form action=»contact.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=»department-selection»>Choose Concerned Department</label>
<select id=»department-selection» name=»concerned_department» required>
<option value=»»>Select a Department</option>
<option value=»billing»>Billing</option>
<option value=»marketing»>Marketing</option>
<option value=»technical support»>Technical Support</option>
</select>
</div>
<div class=»elem-group»>
<label for=»title»>Reason For Contacting Us</label>
<input type=»text» id=»title» name=»email_title» required placeholder=»Unable to Reset my Password» pattern=[A-Za-z0-9\s]{8,60}>
</div>
<div class=»elem-group»>
<label for=»message»>Write your message</label>
<textarea id=»message» name=»visitor_message» placeholder=»Say whatever you want.»
</div>
<button type=»submit»>Send Message</button>
</form>
|
Прежде чем продолжить, я хотел бы кратко изложить значение некоторых важных атрибутов в приведенной выше разметке. Атрибут action в форме определяет, куда нужно отправлять данные формы. Если у вас нет атрибута action , данные отправляются обратно на тот же URL. Здесь мы использовали contact.php , поэтому данные формы будут отправлены в этот скрипт.
Атрибут name для различных элементов ввода в форме используется для доступа к значениям элемента на стороне сервера. Например, в приведенной выше форме вы можете получить имя посетителя, $_POST['visitor_name'] с вами, используя $_POST['visitor_name'] в contact.php .
Мы используем атрибут placeholder чтобы дать пользователям базовую идею ожидаемого ввода для каждого поля в форме. Обязательный атрибут гарантирует, что ни одно важное поле не останется пустым до того, как пользователь нажмет кнопку отправки в форме.
Атрибут pattern используется для обеспечения соблюдения некоторых правил для типов значений, которые могут входить в определенные поля. В нашем случае мы разрешаем пользователям использовать буквы и пробел в именах, которые они отправляют. Мы также ограничиваем общее количество допустимых символов от 3 до 20 включительно. Шаблон, который вы используете, будет зависеть от типа ввода, который вы хотите от пользователей.
Следующая демонстрация CodePen показывает нам, как выглядит наша контактная форма с разметкой выше и немного CSS.
Делаем нашу контактную форму HTML функциональной, используя PHP
Прямо сейчас наша форма не делает ничего полезного. Посетители могут заполнить его и нажать кнопку «Отправить сообщение», но мы ничего не получим, потому что нет серверного кода для обработки информации, предоставленной формой. В этом разделе мы сделаем нашу контактную форму функциональной, используя PHP.
Начните с создания файла contact.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
|
<?php
if($_POST) {
$visitor_name = «»;
$visitor_email = «»;
$email_title = «»;
$concerned_department = «»;
$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[’email_title’])) {
$email_title = filter_var($_POST[’email_title’], FILTER_SANITIZE_STRING);
}
if(isset($_POST[‘concerned_department’])) {
$concerned_department = filter_var($_POST[‘concerned_department’], FILTER_SANITIZE_STRING);
}
if(isset($_POST[‘visitor_message’])) {
$visitor_message = htmlspecialchars($_POST[‘visitor_message’]);
}
if($concerned_department == «billing») {
$recipient = «billing@domain.com»;
}
else if($concerned_department == «marketing») {
$recipient = «marketing@domain.com»;
}
else if($concerned_department == «technical support») {
$recipient = «tech.support@domain.com»;
}
else {
$recipient = «contact@domain.com»;
}
$headers = ‘MIME-Version: 1.0’ .
.’Content-type: text/html;
.’From: ‘ .
if(mail($recipient, $email_title, $visitor_message, $headers)) {
echo «<p>Thank you for contacting us, $visitor_name. You will get a reply within 24 hours.</p>»;
} else {
echo ‘<p>We are sorry but the email did not go through.</p>’;
}
} else {
echo ‘<p>Something went wrong</p>’;
}
?>
|
Мы уже сделали некоторую проверку клиентского ввода на стороне клиента. Однако всегда безопаснее проводить проверку на стороне сервера. Мы используем filter_var() для filter_var() имени, предоставленного пользователем. Аналогичным образом мы также $email_title значения $email_title и $concerned_department $email_title . Вы можете использовать filter_var() для проверки или дезинфекции всех типов пользовательского ввода. Мы также используем htmlspecialchars() для кодирования всех специальных символов HTML в отправленном нам htmlspecialchars() сообщении.
Значение $recipient основано на значении переменной $concerned_department . Таким образом, мы гарантируем, что только люди, которые действительно должны разобраться в этом вопросе, получают электронную почту.
Наконец, мы используем функцию mail() для отправки электронного письма, которое включает информацию, которую посетитель хотел, чтобы мы знали. После успешной доставки электронной почты мы сообщаем посетителям, что мы получили их электронную почту и с ними скоро свяжутся.
Безопасность имеет первостепенное значение, когда вы имеете дело с пользовательскими данными или вводом. Нужно ли вам проверять или дезинфицировать пользовательский ввод, зависит от того, что это за ввод и как вы хотите его использовать. Валидация просто проверяет, соответствует ли введенный пользователем определенный набор правил. Например, проверка может проверить, что имя человека не содержит цифр. Санитарная обработка используется для удаления любых оскорбительных символов, которые представляют угрозу безопасности. Например, злоумышленник, пытающийся связаться с вами через форму, может добавить в script тег script чтобы вы могли загрузить вредоносный сценарий. Это особенно беспокоит, когда на вашем сайте есть общедоступные форумы, доступные всем.
Однако вы должны быть очень осторожны, когда избавляетесь от нежелательных символов при вводе пользователем. Например, вы можете решить использовать filter_var($user_input, FILTER_SANITIZE_STRING); на некотором входе убрать все теги и кодировать специальные символы . Тем не менее, этот флаг также отменяет ввод безвредных символов законными пользователями. Вот пример:
|
01
02
03
04
05
06
07
08
09
10
11
|
<?php
$string = ‘One of your posts about inequalities mentioned that when x < y and y < z then x < z.’;
// Output: One of your posts about inequalities mentioned that when x
echo filter_var($string, FILTER_SANITIZE_STRING);
// Output: One of your posts about inequalities mentioned that when x <
echo htmlspecialchars($string);
?>
|
Если на вашем веб-сайте много тем, связанных с математикой, пользователи относительно часто пишут <или> в контактных формах или сообщениях на форуме. Использование флага FILTER_SANITIZE_STRING с filter_var() в этом случае filter_var() необходимую информацию из сообщения.
Я хочу подчеркнуть, что, хотя вы всегда должны проверять или дезинфицировать пользовательские данные, убедитесь, что вы не удаляете важную информацию в процессе.
Последние мысли
Создать базовую контактную форму в PHP относительно просто, если вы знакомы с основами. Вы начинаете с написания HTML-кода, необходимого для создания элементов ввода для такой информации, как имя пользователя, адрес электронной почты, номер телефона и т. Д. Следующим шагом является написание CSS, чтобы убедиться, что форма контакта идеально вписывается в остальную часть веб-сайта. Последний шаг включает в себя написание PHP-кода, который возьмет информацию из контактной формы и отправит ее вам по почте.
Цель состоит в том, чтобы убедиться, что различные элементы формы размещены таким образом, чтобы не вводить людей в заблуждение, и что пользовательский ввод очищается и проверяется, прежде чем вы отправите его заинтересованным сторонам. Если все это для вас в новинку или если вы не хотите тратить много времени на создание профессионально выглядящей контактной формы, вам обязательно нужно проверить эти PHP-скрипты с контактной формой с самым высоким рейтингом .
Если у вас есть какие-либо вопросы, дайте мне знать в комментариях. В следующем уроке вы узнаете, как реализовать собственную CAPTCHA, чтобы контролировать спам в контактной форме.
Если вам интересны скрипты PHP-формы профессионального качества, которые вы можете начать использовать на своем сайте сегодня, ознакомьтесь с некоторыми другими нашими публикациями.
-
PHP20 лучших форм электронной почты PHP
-
PHP12 лучших контактных форм PHP-скриптов
-
PHP15 полезных форм входа в PHP на CodeCanyon
