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

Дата публикации: 2018-06-26

От автора: в этом посте я рассмотрю пять вариантов, с помощью которых может производиться обработка форм сайта: Google Forms, FormKeep, Netlify Forms, Formspree и FormPlug.

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

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

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

Google Forms

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

Google Forms предоставляет чистый, интуитивно понятный интерфейс для создания форм. Эти формы могут быть внедрены на сайт в теге iframe. Представленные данные отображаются в панели инструментов формы на вкладке «Ответы».

Основное преимущество: простой в использовании конструктор форм. Основной недостаток: не интегрируется с сайтом. Невозможно модифицировать существующие формы, необходимо повторно создать их в Google Forms.

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

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

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

У Google есть полезная библиотека адд-онов для форм, вы также можете добавлять функционал в формы с помощью Google Apps Scripts. Ответы легко экспортировать в таблицы Google для дальнейшей обработки.

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

Перейдите в панель инструментов Google Forms и выберите вверху форму, чтобы создать новую форму. Создайте через пользовательский интерфейс новую форму. Когда форма готова, нажмите кнопку «Отправить» и перейдите на вкладку <>, чтобы просмотреть код для вставки. Скопируйте этот код и вставьте его в любом месте документа, где вы хотите отображать форму.

FormKeep

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

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

Основное преимущество: множество вариантов интеграции. Основной недостаток: нет бесплатного плана, только ограниченные ознакомительные версии.

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

FormKeep использует стратегию фильтрации для автоматического обнаружения спама. Вы также можете добавить в формы поле reCAPTCHA. Дополнительные материалы: Как FormKeep защищает от спама?

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

FormKeep позволяет добавлять веб-хуки, которые будут вызываться при получении данных, и интегрируется с несколькими сервисами, включая Zapier.

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

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

До:

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

<label>Comments:

</label>

</form>

После:

<form method="POST" action="//formkeep.com/f/$UNIQUE_FORM_KEY">
  <label>Comments:
    <textarea name="comments"></textarea>
  </label>
</form>

<label>Comments:

</label>

</form>

Netlify Forms

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

Netlify предлагает уникальный подход к интеграции форм на сайт. JavaScript не требуется, ваша форма не публикуется на другом домене: вы просто добавляете атрибут netlify в тег

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

Основное преимущество: простая интеграция и высокая расширяемость. Основной недостаток: доступен только в том случае, если вы уже используете 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>

<label>Comments:

</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;
}

<label>Leave this field empty: <input name="hpfield"></label>

</div>

<label>Comments:

</label>

</form>

// style.css

.hpot {

display: none;

}

Formspree

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

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

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

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

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

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

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

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

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

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

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

До:

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

<label>Comments:

</label>

</form>

После:

<form method="POST" action="//formspree.io/you@example.com">
  <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;
}

<label>Leave this field empty: <input name="_gotcha"></label>

</div>

<label>Comments:

</label>

</form>

// style.css

.hpot {

display: none;

}

FormPlug

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

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>

<label>Comments:

</label>

</form>

После:

<form method="POST" action="//$API_GATEWAY_URL">
  <input type="hidden" name="_to" value="you@example.com" />
  <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;
}

<label>Leave this field empty: <input name="_honeypot"></label>

</div>

<label>Comments:

</label>

</form>

// style.css

.hpot {

display: none;

}

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

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

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

Netlify Forms — отличный вариант, если вы уже используете Netlify для развертывания и размещения статического сайта.

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

Если ваши потребности просты, и вы не хотите тратить на формы много времени и денег, Formspree поможет вам сделать все быстро и просто.

Ассы кодирования, которые предпочитают владеть своими сервисами, смогут получить это с FormPlug.

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

Автор: DJ Walker

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

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

Метки: form