Как реализовать формы на статических сайтах

Веб-сайты различаются по дизайну, назначению и сложности, но обычно они статичны или динамичны. Статические сайты предварительно визуализируются и предоставляют одинаковый контент всем посетителям. Их простая структура означает, что ими обычно легко управлять и они быстро загружаются. С другой стороны, динамические сайты генерируют контент «на лету», используя серверные языки программирования.

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

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

Выберите услугу обработки форм

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

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

Существует множество сервисов по обработке форм. Давайте рассмотрим самые популярные из них.

1. Формспрэй

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

2. Формбакет

FormBucket предоставляет удобный способ сбора отправленных форм и управления ими, сохраняя их в «корзинах», каждый из которых имеет уникальный URL-адрес. Вы можете определить поля и установить правила проверки для форм, которые соответствуют брендингу вашего веб-сайта, на удобной для пользователя странице панели управления Formbucket.

3. Получить форму

Getform — это серверная платформа форм, которая предлагает простой и безопасный способ обработки отправки форм. Getform предоставляет интуитивно понятный пользовательский интерфейс для управления отправкой форм, уведомлений по электронной почте и интеграции с популярными сервисами, такими как Slack и Google Sheets.

Сравнение сервисов Formspree, Formbucket и Getform

Для удобства сравнения ниже приведена таблица, в которой сравниваются три вышеуказанных сервиса и их ключевые особенности:

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

Настройте службу обработки форм с помощью Getform.

Использование службы обработки форм, такой как Getform, может значительно упростить управление отправкой форм на вашем веб-сайте. Когда пользователь отправляет форму, Getform берет на себя процесс, устраняя необходимость в серверном API для обработки и хранения этих отправок.

Эта бесшовная интеграция позволяет вам эффективно управлять всеми ответами в специальном почтовом ящике для сообщений. Для начала убедитесь, что у вас есть базовые знания HTML, CSS и JavaScript, и выполните следующие действия:

1. Зарегистрируйте учетную запись Getform.
2. Перейдите на панель управления своей учетной записью Getform и нажмите кнопку + Создать кнопка.
3. В появившемся диалоговом окне убедитесь, что Форма выбран. Укажите описательное имя конечной точки и выберите соответствующий часовой пояс. Затем нажмите Создавать.
   

   Getform сгенерирует URL-адрес конечной точки отправки формы, который вы должны добавить в свой элемент формы. action атрибут.

Создайте свою форму с помощью HTML и CSS

Теперь, когда вы настроили службу обработки форм, вы можете использовать HTML, CSS и JavaScript для создания формы.

1. В вашем терминале создайте папку проекта с именем формы и измените текущий каталог на каталог проекта:

   mkdir forms
   cd forms

2. Добавьте следующие файлы проекта:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. Далее создайте HTML-форму. Для целей данного руководства приведенный ниже код поможет вам создать форму, включающую поля ввода имени и адреса электронной почты, текстовую область для сообщений и кнопку отправки. Вы можете добавить этот код в свой index.html файл:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="https://kinsta.com/blog/static-site-forms/styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Перейдите на панель управления Getform и скопируйте URL-адрес конечной точки. Затем вставьте этот URL-адрес в action атрибут в открывающем теге вашей формы в HTML-коде.
5. Наконец, не стесняйтесь добавлять стили CSS в файл стили.css файл для настройки дизайна и внешнего вида формы.

Реализация проверки данных с помощью JavaScript

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

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

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

1. Сначала определите функцию проверки, добавив следующий код в скрипт.js файл:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

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

   Если поля пусты или формат электронной почты недействителен, функция сработает и отобразит предупреждающее сообщение. И наоборот, если все поля формы проходят эти проверки, функция возвращает true, и форма отправляется.

   Вы также можете добавить другие правила проверки, чтобы обеспечить точность и целостность отправленных данных. Например, вы можете проверить длину вводимых пользователем данных или запретить пользователям отправлять определенные символы в сообщении, помогая предотвратить потенциальные уязвимости безопасности, такие как атаки путем внедрения.

2. Затем вызовите функцию выше, чтобы включить проверку с использованием click обратный вызов прослушивателя событий. Этот обратный вызов запускает функцию каждый раз, когда пользователь нажимает кнопку представлять на рассмотрение кнопка. Чтобы вызвать функцию, добавьте следующий код в свой скрипт.js файл:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Обратите внимание, что preventDefault() Функция включена в код, чтобы предотвратить действие отправки формы по умолчанию. Таким образом, вы можете проверить форму перед отправкой информации в Getform.

   Кроме того, после успешной проверки и отправки resetFormAfterSubmission() срабатывает функция, сбрасывающая форму после задержки в полсекунды, чтобы можно было отправить больше заявок.

Разверните свой статический сайт с помощью Kinsta

Kinsta предлагает решение управляемого хостинга, позволяющее размещать различные веб-проекты и базы данных. Благодаря бесплатному плану вы можете разместить до 100 статических сайтов непосредственно из GitHub, GitLab или Bitbucket.

Чтобы развернуть свой статический сайт с помощью Kinsta, сначала отправьте свои коды предпочитаемому провайдеру Git. Далее выполните следующие действия:

1. Войдите в панель управления MyKinsta.
2. На панели управления нажмите кнопку Добавить услугу раскрывающееся меню и выберите Статический сайт.
3. Если вы впервые размещаете проект с помощью Kinsta, выберите и включите предпочитаемого поставщика услуг Git.
4. Выберите репозиторий вашего проекта.
5. Выберите ветку для развертывания и укажите уникальное имя сайта.
6. Укажите корневой путь к каталогу публикации, содержащему HTML-файлы и ресурсы для развертывания, добавив точку.
7. Наконец, нажмите Создать сайт.

В течение нескольких секунд MyKinsta развернет ваш сайт.

Чтобы легко интегрировать форму в существующий сайт, скопируйте и вставьте HTML-код формы непосредственно в нужный раздел сайта. Обязательно включите связанные свойства CSS и код JavaScript, чтобы обеспечить единообразие стиля и функциональности.

В качестве альтернативы, поскольку вы уже развернули форму отдельно, вы можете предоставить пользователям URL-адрес — в виде гиперссылки или кнопки — они могут щелкнуть, чтобы получить доступ к форме.

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

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

Чтобы просмотреть ответы в форме, перейдите на панель управления Getform и просмотрите отправленные сообщения в соответствующем почтовом ящике.

Краткое содержание

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

Наряду с услугой хостинга статических сайтов Kinsta также предлагает услугу хостинга приложений, предназначенную для более динамичных приложений, таких как веб-приложения, которым требуется обработка на стороне сервера, взаимодействие с базой данных и другие сложные функции.

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

Теперь вы можете превратить свой статический сайт в динамический с помощью сервисов обработки форм. Какую услугу вы предпочитаете или имеете опыт работы? Поделитесь в комментариях ниже.