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

Этот пост был первоначально опубликован на Codementor. С появлением статических сайтов разработчикам нужен сервис, который мог бы обрабатывать формы. Статическая форма контакта с веб-сайтом является наиболее распространенным случаем, и в этой статье вы узнаете, как добавить ее с помощью конструктора форм Kwes. Добавление формы контакта на статический сайт может быть сложной задачей, поскольку на статическом сайте обычно нет &# x27; бэкэнд, который может обрабатывать отправку формы. В этом случае мы могли бы использовать сервис, который сделает это за нас. Существует множество сервисов, таких как формы Netlify или Typeform, но в этом случае мы собираемся использовать сервис Kwes. Мы собираемся создать контактную форму со следующими полями:| Form element     | Form field         | | --------------   | ----------------   | | Name             | Text input         | | Email            | Email input        | | Message          | Textarea input     | | Button           | Submit button      |Все поля ввода должны быть обязательными, а поле формы электронной почты должно быть проверено.

Интеграция

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

Чтобы завершить интеграцию, необходимо добавить файл JavaScript в нижней части вашbodyтег вашей страницы контактов.Я использую генератор статических страниц Hexo для своего сайта, но он работает с другими генераторами статических сайтов, такими как Hugo или Jekyll. Поскольку большинство статических генераторов сайтов поддерживают Markdown, вы можете вставить код контакта непосредственно в Markdown, и он тоже будет работать. В противном случае вы можете создать отдельную страницу или макет и вставить туда код. Совет: нет необходимости добавлять файл JavaScript на страницы, на которых нет контактной формы. Далее, мы добавим HTML-форму к нашему страница контактов. Чтобы сделать это, добавьте обычные теги и атрибуты формы. Совет. Не забывайте добавлять метки для атрибутов с соответствующими идентификаторами ввода, чтобы сделать вашу форму более доступной. Теперь мы должны добавить атрибуты Kwes. Важно обернуть вашу форму вdivсkwes-fromучебный класс. После этого добавьтеactionприписатьformэлемент, а затем добавитьrulesприписать ваши поля ввода. Код должен выглядеть примерно так:

        Name          E-mail          Message          Submit    Вы можете увидеть все варианты правил в официальной документации Kwes. Перед тем, как опубликовать форму, вы должны сначала проверить ее. С Kwes вы можете сделать это двумя различными способами: 

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

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

Kwes features

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

Заключение

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

Теги

Разработчики веб-разработок Программирование, программирование Html Css Javascript Serverless
Источник: https://hackernoon.com/how-to-add-a-contact-form-to-a-static-website-0e3dy3jq6

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння