От автора: в этом посте я рассмотрю пять вариантов, с помощью которых может производиться обработка форм сайта: Google Forms, FormKeep, Netlify Forms, Formspree и FormPlug.
Когда я впервые начал изучать потенциал статических сайтов, меня привлекла их скорость и простота. Тем не менее, я знал, что эти преимущества имеют свою цену: поскольку статические сайты не могут запускать бэкэнд-код, существуют ограничения относительно того, что вы можете выполнить с помощью статического решения. Больше таких ограничений я не вижу.
JAMStack позволяет не жертвовать функциями ради производительности, с его помощью легко поддерживать сайт. Скорее, речь идет о переоценке того, какая часть ваших функций должна быть делегирована веб-интерфейсу. Например, должно ли то же программное обеспечение, которое отображает контактную HTML-форму, обрабатывать представление из этой формы данных?
Представленные здесь решения представляют весь спектр вариантов от полностью управляемых решений до самообслуживаемых альтернатив для тех, кто хочет иметь полный контроль.
Google Forms
Google Forms предоставляет чистый, интуитивно понятный интерфейс для создания форм. Эти формы могут быть внедрены на сайт в теге iframe. Представленные данные отображаются в панели инструментов формы на вкладке «Ответы».
Основное преимущество: простой в использовании конструктор форм. Основной недостаток: не интегрируется с сайтом. Невозможно модифицировать существующие формы, необходимо повторно создать их в Google Forms.
Защита от спама
Google реализует reCAPTCHA для форм, которые запрашивают адреса электронной почты.
Расширяемость
У Google есть полезная библиотека адд-онов для форм, вы также можете добавлять функционал в формы с помощью Google Apps Scripts. Ответы легко экспортировать в таблицы Google для дальнейшей обработки.
Использование Google Forms
Перейдите в панель инструментов Google Forms и выберите вверху форму, чтобы создать новую форму. Создайте через пользовательский интерфейс новую форму. Когда форма готова, нажмите кнопку «Отправить» и перейдите на вкладку <>, чтобы просмотреть код для вставки. Скопируйте этот код и вставьте его в любом месте документа, где вы хотите отображать форму.
FormKeep
FormKeep — это еще решение SaaS для обработки форм. FormKeep легко интегрируется с существующими формами, вам только нужно изменить атрибут action в HTML-форме. Вы можете просматривать предоставленные через форму данные в панели инструментов FormKeep.
Основное преимущество: множество вариантов интеграции. Основной недостаток: нет бесплатного плана, только ограниченные ознакомительные версии.
Защита от спама
FormKeep использует стратегию фильтрации для автоматического обнаружения спама. Вы также можете добавить в формы поле reCAPTCHA. Дополнительные материалы: Как FormKeep защищает от спама?
Расширяемость
FormKeep позволяет добавлять веб-хуки, которые будут вызываться при получении данных, и интегрируется с несколькими сервисами, включая Zapier.
Использование FormKeep
После создания учетной записи FormKeep войдите в систему, чтобы просмотреть свои формы и представленные данные. Вы можете просматривать различные формы или добавить новую форму из выпадающего списка в правом верхнем углу. Перейдите на вкладку «Настройка», чтобы получить уникальный URL для этой формы. Вы можете привязать существующую HTML-форму к FormKeep, добавив этот URL-адрес в атрибут формы action.
До:
1 2 3 4 5 |
<form method="POST"> <label>Comments: <textarea name="comments"></textarea> </label> </form> |
После:
1 2 3 4 5 |
<form method="POST" action="//formkeep.com/f/$UNIQUE_FORM_KEY"> <label>Comments: <textarea name="comments"></textarea> </label> </form> |
Netlify Forms
Netlify предлагает уникальный подход к интеграции форм на сайт. JavaScript не требуется, ваша форма не публикуется на другом домене: вы просто добавляете атрибут netlify в тег