Как создать HTML-форму. Часть 1

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

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

Что такое HTML-форма?

HTML-форма необходима для сбора информации, которой делятся ваши пользователи. Другими словами — это простые элементы управления HTML, которые применяются для сбора информации от пользователей веб-сайта. Это могут быть текстовые поля для ввода данных с клавиатуры, списки для выбора данных, а также флажки для установки параметров. 

С помощью HTML вы не можете создать форму, которая отправляет электронное письмо после отправки. Вместо этого вы можете использовать элемент действия формы для установки адреса mailto, который запускает почтовый клиент отправителя. 

Однако есть несколько сложностей с параметром mailto:

• mailto совместим не со всеми браузерами;
• Работа с этим параметром не очень удобна;
• Вы не можете контролировать форматирование данных, когда форма отправляется браузером;
• После отправки пользователем формы появляется окно с предупреждением, что информация, которую он собирается отправить, не будет зашифрована в целях конфиденциальности.

Способы создания HTML-формы  

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

Способ 1: создание формы с помощью HTML

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

Эта форма не отправляет информацию напрямую на адреса электронной почты, а открывает почтовый клиент или окно инструмента для отправки формы.

Способ 2: создание формы с помощью PHP

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

Например: 

form action=https://yourwebsite.com/myform-processor.php

Затем сервер передает данные сценарию, который указан в URL-адресе действия — в данном случае myform-processor.php. Используя эти данные, внутренний скрипт может создать базу данных отправленных форм, направить пользователя на другую страницу, а также отправить электронное письмо.

Если вы создаете форму с нуля — используйте шаги ниже.

Шаг 1: Используйте PHP для создания страницы;

Вам потребуется доступ к cPanel вашего веб-сайта на платформе хостинга. После создания веб-страницы, вместо расширения «.html» введите «.php». 

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

Шаг 2: Создайте форму с помощью кода;

Код для базовой формы:

<form method=»post» action=»subscriberform.php»>

<textarea name=»message»></textarea>

<input type=»submit»>

</form>

Этот код поможет вам создать имя для формы, а также область, в которой пользователи могут ввести данные и поделиться ими с вами. Важное отличие — это action=»subscriberform.php». Именно эта часть кода отправляет форму при отправке.

Шаг 3: Отправка e-mail письма.

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

<?php

if($_POST[«message»]) {

mail(«your@email.address», «Here is the subject line»,

$_POST[«insert your message here»]. «From: an@email.address»);

}

?>

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

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

^{Источник: hubspot.com}