5 способов обработки форм на статическом сайте

Основное преимущество: простая интеграция и высокая расширяемость. Основной недостаток: доступен только в том случае, если вы уже используете Netlify для хостинга и развертывания. Бесплатный план ограничен 100 заполнениями формы в месяц.

Защита от спама

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

У вас есть возможность заставить всех пользователей заполнять капчу, включая div с атрибутом netlify-recaptcha. Netlify заполнит этот div полем captcha.

Netlify также поддерживает поле honeypot. Вы можете добавить имя этого поля в свою форму через атрибут netlify-honeypot.

Расширяемость

Решение Netlify высоко расширяемо. Формы и представленные данные доступны через API, вы можете добавлять веб-хуки, и в настоящее время в бета-версии находится функция интеграции с Zapier.

Использование Netlify Forms

Просто добавьте в форму атрибут netlify и обеспечьте, чтобы форма содержала name. В следующем примере мы также продемонстрируем добавление поля honeypot.

До:

<form method="POST"> <label>Comments: <textarea name="comments"></textarea> </label>
</form>

После:

<form name="comments" method="POST" netlify-honeypot="hpfield" netlify> <div class="hpot"> <label>Leave this field empty: <input name="hpfield"></label> </div> <label>Comments: <textarea name="comments"></textarea> </label>
</form> // style.css
.hpot { display: none;
}

Formspree

Из всех вариантов, представленных здесь, Formspree предоставляет простейший способ добавления обработки предоставленных данных в существующую форму. Formspree работает, получая сообщения на https://formspree.io/$YOUR_EMAIL и пересылает данные по адресу электронной почты, в этом URL-адресе. К сожалению, единственный способ отслеживания сообщений — это ваш электронный ящик, хотя пользователи, которые регистрируются и обновляются до плана Gold, могут просматривать отправленные данные в панели инструментов Formspree.

Formspree также является проектом с открытым исходным кодом (см. на Github) и содержит инструкции относительно того, как запустить собственный экземпляр Formspree на Heroku.

Основное преимущество: открытый исходный код, может запускать собственный экземпляр на Heroku. Основной недостаток: отправленные данные остаются только в электронной почте (бесплатно).

Защита от спама

Formspree использует для выявления спама reCAPTCHA. Вы также можете добавить в форму поле honeypot с именем _gotcha.

Расширяемость

Formspree не предлагает возможности расширения из коробки.

Использование Formspree

Вы можете начать использовать Formspree, даже не посещая их веб-сайт. Просто укажите для своей форме https://formspree.io/$YOUR_EMAIL, где $YOUR_EMAIL — это электронный адрес, на который вы хотите получать отправленные ответы. После корректной настройки формы заполните ее один раз. Затем вы получите электронное письмо от Formspree с просьбой подтвердить свой адрес электронной почты.

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

До:

<form method="POST"> <label>Comments: <textarea name="comments"></textarea> </label>
</form>

После:

<form method="POST" action="https://formspree.io/[email protected]"> <div class="hpot"> <label>Leave this field empty: <input name="_gotcha"></label> </div> <label>Comments: <textarea name="comments"></textarea> </label>
</form> // style.css
.hpot { display: none;
}

FormPlug

FormPlug — это вариант для опытных пользователей, которым нужен полный контроль над кодом, который обрабатывает отправленные данные. FormPlug — это проект с открытым исходным кодом, созданный с использованием Serverless Framework. Код работает на AWS Lambda и использует для отправки электронной почты SAS Amazon.

Основные преимуществы: бесплатный с открытым исходным кодом. Использует Serverless Framework, поэтому его относительно легко установить в среду AWS. Основной недостаток: сообщения сохраняются на электронной почте, например, Formspree.

Защита от спама

FormPlug также предлагает поле honeypot с именем _honeypot. По моему опыту, поля honeypot достаточно эффективны сами по себе. Тем не менее, они не кажутся очень надежными, и я не удивлюсь, если в какой-то момент они станут совершенно бесполезными. FormPlug также позволяет шифровать адрес электронной почты, чтобы он не отображался на интерфейсе.

Расширяемость

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

Использование FormPlug

Чтобы использовать FormPlug, вам понадобится учетная запись AWS. Следуйте инструкциям по установке, чтобы установить FormPlug в среде AWS.

Чтобы связать форму с FormPlug, извлеките URL-адрес шлюза API для установки FormPlug из консоли AWS. Добавьте этот URL-адрес в качестве атрибута action для своей формы и вставьте адрес электронной почты, на который вы хотите получать сообщения, в скрытое поле с именем _to. И мы опять приведем пример использования поля honeypot.

До:

<form method="POST"> <label>Comments: <textarea name="comments"></textarea> </label>
</form>

После:

<form method="POST" action="https://$API_GATEWAY_URL"> <input type="hidden" name="_to" value="[email protected]" /> <div class="hpot"> <label>Leave this field empty: <input name="_honeypot"></label> </div> <label>Comments: <textarea name="comments"></textarea> </label>
</form> // style.css
.hpot { display: none;
}

Как найти решение, подходящее именно для вас

Каждое из этих решений имеет разные сильные и слабые стороны. Может существовать не одно решение, которое выглядит, как лучшее для вас; полезность каждого зависит от ваших потребностей. Если вы все еще не уверены, вот краткий обзор их сильных сторон:

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

Автор: DJ Walker

Источник: https://forestry.io/

Редакция: Команда webformyself.