Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Создание контактной формы в PHP

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Независимо от типа веб-сайта, которым кто-то владеет или управляет, он, вероятно, нуждается в контактной форме. Контактная форма может помочь вашим посетителям запросить расценки, запросить информацию или поделиться любыми советами или проблемами, с которыми они сталкиваются при использовании веб-сайта.

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

Конечно, самый простой способ создать контактную форму - это загрузить профессиональный скрипт контактной формы из CodeCanyon.

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

Разметка нашей HTML контактной формы

Первым шагом к созданию нашей собственной контактной формы является написание разметки. Мы начнем делать это, как только у нас будет список всех элементов, которые мы хотим в нашей форме. Нам понадобится поле для ввода имени человека, который с нами связывается, и нам понадобится поле для его адреса электронной почты, чтобы мы могли отправить им ответ в случае необходимости. Нам также понадобится поле ввода для причины, по которой люди связываются с вами, и (поле для текста) textarea, где пользователи могут напечатать свое сообщение.

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

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

Давайте напишем HTML-код, чтобы добавить все поля, которые я только что упомянул, в нашу контактную форму.

Прежде чем продолжить, я хотел бы быстро обобщить значение некоторых важных атрибутов в приведенной выше разметке. Атрибут action в форме определяет, куда нужно отправлять данные формы. Если у вас нет атрибута action, данные отправляются обратно на тот же URL. Здесь мы использовали contact.php, поэтому данные формы будут отправлены в этот скрипт.

Атрибут name для различных элементов ввода в форме используется для доступа к значениям элементов на стороне сервера. Например, в приведенной выше форме вы можете получить имя посетителя, связавшегося с вами, используя $_POST['visitor_name'] в contact.php.

Мы используем атрибут placeholder, чтобы дать пользователям некоторую базовую идею ожидаемого ввода для каждого поля в форме. Атрибут required гарантирует, что ни одно важное поле не останется пустым до того, как пользователь нажмет кнопку отправки в форме. Атрибут pattern используется для обеспечения соблюдения некоторых правил в отношении значений, которые могут входить в определенные поля. В нашем случае мы разрешаем пользователям использовать буквы и пробел в именах, которые они отправляют. Мы также ограничиваем общее количество допустимых символов от 3 до 20 включительно. Шаблон, который вы используете, будет зависеть от типа поля, который вы хотите чтобы был заполнен пользователем.

Следующая демонстрация CodePen показывает нам, как выглядит наша контактная форма с разметкой выше а также CSS.

Создание вашей контактной формы HTML с использованием PHP

Прямо сейчас наша форма не делает ничего полезного. Посетители могут заполнить его и нажать кнопку «Отправить сообщение», но мы ничего не получим, потому что нет кода службы для обработки информации, представленной в форме. В этом разделе мы сделаем нашу контактную форму функциональной, используя PHP.

Начните с создания файла contact.php и вставьте в него следующий код.

Мы уже сделали некоторую проверку на стороне пользователя для пользовательского ввода. Однако всегда безопаснее выполнять проверку на стороне сервера. Мы используем функцию filter_var() для очистки имени, предоставленного пользователем. Аналогичным образом мы также очищаем значения $email_title и $related_department. Вы можете использовать функцию filter_var() для проверки или дезинфекции всех типов пользовательского ввода. Мы также используем функцию htmlspecialchars() для кодирования всех специальных символов HTML в отправленном нам гостевом сообщении.

Значение $recipient основано на значении переменной $related_department. Таким образом, мы гарантируем, что только люди, которые действительно должны разобраться в этом вопросе, получат электронную почту.

Наконец, мы используем функцию mail() для отправки электронного письма, которое включает информацию, которую посетитель хотел, чтобы мы знали. После успешной доставки электронной почты мы сообщаем посетителям, что мы получили их электронную почту и с ними скоро свяжутся.

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

Тем не менее, вы должны быть очень осторожны при избавлении от нежелательных символов при вводе пользователем. Например, вы можете решить использовать filter_var($user_input, FILTER_SANITIZE_STRING); чтобы на некотором поле убрать все теги и кодировать специальные символы. Однако этот флаг также удаляет безвредные символы введенные пользователями. Вот пример:

Если на вашем веб-сайте много тем, связанных с математикой, пользователи будут относительно часто писать < или > в контактных формах или сообщениях на форуме. Использование флага FILTER_SANITIZE_STRING с функцией filter_var() в этом случае удалит необходимую информацию из сообщения.

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

Заключительные мысли

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

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

Если у вас есть какие-либо вопросы, дайте мне знать в комментариях. В следующем уроке вы узнаете, как реализовать собственную CAPTCHA, чтобы контролировать спам в контактной форме.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.