Создание контактной формы в PHP
Monty Shokeen Last updated Apr 15, 2021
Независимо от типа веб-сайта, которым кто-то владеет или управляет, он, вероятно, нуждается в контактной форме. Контактная форма может помочь вашим посетителям запросить расценки, запросить информацию или поделиться любыми советами или проблемами, с которыми они сталкиваются при использовании веб-сайта.
В этом уроке мы сосредоточимся на создании полнофункциональной контактной формы в PHP от начала до конца. Мы начнем с разметки всех полей, которые нам нужно добавить, и базового стиля контактной формы. После этого мы перейдем к коду PHP для реализации его функциональности.
Но если вы хотите узнать, как создается контактная форма, тогда читайте дальше! Это может быть проще, чем вы думаете.
Разметка нашей HTML контактной формы
Первым шагом к созданию нашей собственной контактной формы является написание разметки. Мы начнем делать это, как только у нас будет список всех элементов, которые мы хотим в нашей форме. Нам понадобится поле для ввода имени человека, который с нами связывается, и нам понадобится поле для его адреса электронной почты, чтобы мы могли отправить им ответ в случае необходимости. Нам также понадобится поле ввода для причины, по которой люди связываются с вами, и (поле для текста) textarea , где пользователи могут напечатать свое сообщение.
Если веб-сайт, которым вы управляете, очень популярен, через контактную форму вы получите много писем. Чтобы убедиться, что нужные люди смогут прочитать эти письма и быстро ответить, вам нужно еще пару полей. Например, вы можете добавить поле, которое может определить, с каким отделом посетитель хочет связаться, например, отдел маркетинга, тех.поддержки или бухгалтерия. Эта информация впоследствии может быть использована для маршрутизации электронной почты соответствующим образом. В конечном итоге это может помочь вам быстрее ответить и более эффективно сортировать электронные письма.
Сколько полей вы добавляете в контактную форму, зависит от типа веб-сайта, который вы запускаете, но убедитесь, что вы не переусердствовали. Принуждение посетителей к заполнению слишком большого количества данных может отговорить их вообще связываться с вами.
Давайте напишем HTML-код, чтобы добавить все поля, которые я только что упомянул, в нашу контактную форму.
action="contact.php" method="post"> type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z] required> type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> for="department-selection">Choose Concerned Department id="department-selection" name="concerned_department" required> value="technical support">Technical Support for="title">Reason For Contacting Us type="text" id="title" name="email_title" required placeholder="Unable to Reset my Password" pattern=[A-Za-z0-9\s] > for="message">Write your message id="message" name="visitor_message" placeholder="Say whatever you want." required> Прежде чем продолжить, я хотел бы быстро обобщить значение некоторых важных атрибутов в приведенной выше разметке. Атрибут action в форме определяет, куда нужно отправлять данные формы. Если у вас нет атрибута action , данные отправляются обратно на тот же URL. Здесь мы использовали contact.php, поэтому данные формы будут отправлены в этот скрипт.
Атрибут name для различных элементов ввода в форме используется для доступа к значениям элементов на стороне сервера. Например, в приведенной выше форме вы можете получить имя посетителя, связавшегося с вами, используя $_POST[‘visitor_name’] в contact.php.
Мы используем атрибут placeholder , чтобы дать пользователям некоторую базовую идею ожидаемого ввода для каждого поля в форме. Атрибут required гарантирует, что ни одно важное поле не останется пустым до того, как пользователь нажмет кнопку отправки в форме. Атрибут pattern используется для обеспечения соблюдения некоторых правил в отношении значений, которые могут входить в определенные поля. В нашем случае мы разрешаем пользователям использовать буквы и пробел в именах, которые они отправляют. Мы также ограничиваем общее количество допустимых символов от 3 до 20 включительно. Шаблон, который вы используете, будет зависеть от типа поля, который вы хотите чтобы был заполнен пользователем.
Следующая демонстрация CodePen показывает нам, как выглядит наша контактная форма с разметкой выше а также CSS.
Создание вашей контактной формы HTML с использованием PHP
Прямо сейчас наша форма не делает ничего полезного. Посетители могут заполнить его и нажать кнопку «Отправить сообщение», но мы ничего не получим, потому что нет кода службы для обработки информации, представленной в форме. В этом разделе мы сделаем нашу контактную форму функциональной, используя PHP.
Начните с создания файла contact.php и вставьте в него следующий код.
$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);
$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";
$recipient = "contact@domain.com";
$headers = 'MIME-Version: 1.0' . "\r\n"
.'Content-type: text/html; charset=utf-8' . "\r\n"
if(mail($recipient, $email_title, $visitor_message, $headers))
echo "Thank you for contacting us,
$visitor_name. You will get a reply within 24 hours.";
echo 'We are sorry but the email did not go through.
';
echo 'Something went wrong
';
Мы уже сделали некоторую проверку на стороне пользователя для пользовательского ввода. Однако всегда безопаснее выполнять проверку на стороне сервера. Мы используем функцию filter_var() для очистки имени, предоставленного пользователем. Аналогичным образом мы также очищаем значения $email_title и $related_department . Вы можете использовать функцию filter_var() для проверки или дезинфекции всех типов пользовательского ввода. Мы также используем функцию htmlspecialchars() для кодирования всех специальных символов HTML в отправленном нам гостевом сообщении.
Значение $recipient основано на значении переменной $related_department . Таким образом, мы гарантируем, что только люди, которые действительно должны разобраться в этом вопросе, получат электронную почту.
Наконец, мы используем функцию mail() для отправки электронного письма, которое включает информацию, которую посетитель хотел, чтобы мы знали. После успешной доставки электронной почты мы сообщаем посетителям, что мы получили их электронную почту и с ними скоро свяжутся.
Безопасность имеет первостепенное значение, когда вы имеете дело с пользовательскими данными или вводом. Нужно ли проверять или дезинфицировать пользовательский ввод, зависит от того, что является вводом и как вы хотите его использовать. Валидация просто проверяет, соответствует ли введенное пользователем определенному набору правил. Например, валидация может проверить, что имя человека не содержит никаких чисел. Санитизация используется для удаления любых опасных символов, представляющих угрозу безопасности. Например, злонамеренный пользователь, пытающийся связаться с вами через форму, может добавить тэг script в textarea , чтобы вы могли загрузить вредоносный скрипт. Это особенно опасно, когда на вашем сайте есть форумы, доступные всем.
Тем не менее, вы должны быть очень осторожны при избавлении от нежелательных символов при вводе пользователем. Например, вы можете решить использовать filter_var($user_input, FILTER_SANITIZE_STRING); чтобы на некотором поле убрать все теги и кодировать специальные символы. Однако этот флаг также удаляет безвредные символы введенные пользователями. Вот пример:
$string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.';