Как создать HTML-форму, которая отправляет вам электронное письмо

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

Здесь мы расскажем вам, как создать форму, которая отправляет электронное письмо вам, а также клиенту, чтобы убедиться, что форма была получена.

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

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

Есть несколько проблем с параметром mailto:. Например, он не на 100% совместим со всеми браузерами, не очень удобен для пользователя, и невозможно контролировать форматирование данных при отправке формы браузером.

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

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

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

Способ 1: создание формы отправки электронной почты с использованием HTML (не рекомендуется)

Используя только HTML? Начиная с нуля, вот пример кода для использования:

См. Pen How для создания HTML-формы, которая отправляет вам электронное письмо от HubSpot (@hubspot) на CodePen.

Этот код создаст форму, которая запрашивает имя контакта, сообщение и включает кнопку отправки (не отображается в CodePen). Обратите внимание, что этот код является базовым — он не будет выглядеть супер шикарно. Для более красивого вам придется добавить еще несколько строк кода, соответствующих вашим потребностям.

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

Итак, какой HTML-код позволяет отправлять формы непосредственно на адрес электронной почты?

Чтобы форма работала с вашим почтовым сервером и отправляла ее в почтовый ящик, ответом является PHP — давайте рассмотрим этот вариант сейчас.

Способ 2: создание формы отправки электронной почты с помощью PHP (расширенный)

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

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

Веб-форма имеет две стороны: внешний интерфейс, видимый посетителям в браузере, и внутренний скрипт, работающий на сервере.

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

Например: <form action=https://yourwebsite.com/myform-processor.php> .

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

Существуют и другие языки сценариев, которые вы можете использовать при программировании бэкэнда, такие как Ruby, Perl или ASP для Windows. Тем не менее, PHP является наиболее популярным и используется почти всеми поставщиками услуг веб-хостинга.

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

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

Для этого шага вам потребуется доступ к cPanel вашего веб-сайта на вашей платформе хостинга.

Когда вы создаете веб-страницу, вместо расширения «.html» введите «.php». Это похоже на то, что происходит, когда вы сохраняете изображение как «jpg», а не «png».

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

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

На этом шаге вы напишете код для создания формы.

Если вы не знаете, как создавать формы в HTML, обратитесь к ресурсу HTML Dog, чтобы получить базовые знания.

Следующий код необходим для базовой формы:

<form method="post" action="subscriberform.php">
<textarea name="сообщение"></textarea>
		


<тип ввода="отправить">
</форма>

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

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

Шаг 3: Сделайте так, чтобы форма отправляла электронное письмо.

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

Для этого вам нужно перейти к началу страницы (самому началу, даже до определения типа документа HTML). Чтобы включить отправку данных по электронной почте, мы должны добавить код, который будет обрабатывать данные. Скопируйте этот код или создайте что-то подобное:

<?php
если($_POST["сообщение"])
mail("[электронная почта защищена]", "Вот строка темы",
$_POST["вставьте сюда свое сообщение"]. "От: [электронная почта защищена]");

?>

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

Далее разбивая его, «почта» отправляет заполненную форму в виде электронного письма на «[электронная почта защищена]», а строка темы — это то, что следует. В следующей строке вы можете написать копию сообщения электронной почты внутри кавычек, которое будет отправлено с любого адреса электронной почты, который вы выберете.

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

При этом у вас есть базовый код, необходимый для создания формы.

Обратите внимание, что это только один из способов сделать это — в качестве альтернативы вы также можете создать форму с помощью конструктора, а затем встроить ее на свой веб-сайт.

Способ 3: создать форму отправки электронной почты с помощью конструктора форм

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

(Совет: редактор с перетаскиванием может значительно упростить и упростить создание формы для отправки по электронной почте. Попробуйте CMS Hub — это на 100 % бесплатно.)

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

1. HubSpot: лучший конструктор форм электронной почты в целом

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

Конструктор форм HubSpot связан с другими инструментами платформы, включая Marketing Hub и CMS Hub, и не требует каких-либо предварительных технических знаний. Если вы хотите расширить форму, включив в нее маркетинговые возможности, вы также можете сделать это.

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

Если вы хотите узнать, как получить электронное письмо после отправки формы, ознакомьтесь со статьей в нашей базе знаний.

2. Forms.io: лучший конструктор форм быстрой электронной почты

Forms.io позволяет быстро создать форму с помощью интерфейса перетаскивания, а затем встроить ее на свой сайт с помощью HTML-кода. Вы получите оповещение или уведомление, а затем сможете управлять ответами в бэкэнде инструмента. Это бесплатно для 10 пользователей, но если вашей компании потребуется больше мест, вы можете получить доступ за 14,99 долларов США в месяц.

3. Jotform: лучшая электронная почта для конструктора нескольких форм

Если вы предполагаете, что вам понадобится более одной формы, Jotform — отличный выбор. Он дает вам несколько вариантов встраивания форм на ваш сайт: JavaScript, iFrame или весь исходный код формы. У вас также есть возможность создать лайтбокс или всплывающую форму.

Jotform бесплатен благодаря своему брендингу. Цены начинаются от 24 долларов в месяц.

Ознакомьтесь с другими инструментами для создания форм здесь.

Способ 4: создать форму отправки электронной почты с помощью плагина

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

1. Плагин формы HubSpot: лучший для лидогенерации

Если вы планируете использовать свою форму в качестве инструмента для генерации потенциальных клиентов, мы настоятельно рекомендуем использовать плагин формы HubSpot. Он напрямую связан с вашей учетной записью HubSpot, что позволяет использовать его вместе с HubSpot CRM, Marketing Hub, Sales Hub и другими.

2. WPForms: лучше всего подходит для встраивания в любом месте

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

3. АРФормы

ARForms позволяет вам получать уведомления по электронной почте на основе установленных вами условий, но вы также можете получать уведомления по электронной почте обо всех отправленных материалах. Вы также можете интегрировать его с другими инструментами в своем техническом стеке, включая HubSpot, PayPal и Google Sheets.

Преимущества HTML-форм, которые отправляют электронные письма

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

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

Примечание редактора: этот пост был первоначально опубликован в декабре 2019 года и обновлен для полноты информации.