Как добавить контактную форму на статический сайт

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

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

Мы собираемся создать контактную форму со следующими полями:

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

Интеграция

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

После регистрации добавьте новый веб-сайт и новую форму из панели инструментов Kwes.

Чтобы завершить интеграцию, вы должны добавить файл JavaScript внизу вашего body тег вашей страницы контактов.

<script src="https://kwes.io/js/kwes.js"></script>

Я использую генератор статических страниц Hexo для своего сайта, но он работает и с другими генераторами статических сайтов, такими как Hugo или Jekyll. Поскольку большинство генераторов статических сайтов поддерживают Markdown, вы можете вставить контактный код непосредственно в Markdown, и это тоже сработает. В противном случае вы можете создать отдельную страницу или макет и вставить туда код.

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

Затем мы добавим HTML-форму на нашу страницу контактов. Для этого добавьте обычные теги формы и атрибуты.

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

Теперь мы должны добавить атрибуты Kwes. Важно обернуть форму в div с kwes-from учебный класс. После этого добавьте action отнести к form элемент, а затем добавить rules атрибут для ваших полей ввода. Код должен выглядеть примерно так:

<div class="kwes-form">
  <form method="POST" action="https://kwes.io/api/foreign/forms/youruniqueid">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" rules="required">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email" rules="required|email|max:255">
    <label for="message">Message</label>
    <textarea name="message" id="message" rules="required"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

Вы можете увидеть все варианты правил на странице Официальная документация Kwes.

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

• указав тестовый домен в настройках сайта, или
• добавив атрибут HTML mode="test" к вашему элементу формы.

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

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

Вы можете настроить стиль уведомлений в соответствии с вашим брендом. Посмотрите пример настроенной контактной формы на моем сайте.

Квес особенности

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

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

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

Если вы хотите больше контролировать свою форму и интегрировать ее с другими сервисами, такими как Zapier, вы можете это сделать. Вы даже можете воспользоваться преимуществами Kwes API и самостоятельно управлять отправлениями.

Вывод

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