Как создать простую контактную форму с использованием HTML, CSS и JavaScript
Контактные формы — важный элемент в Интернете, позволяющий пользователям отправлять запросы, отзывы или запросы от зрителей.
Вот как создать базовую контактную форму для вашего сайта. От настройки проекта до добавления проверки и оформления формы — убедитесь, что у вас есть красивая контактная форма.
Настройка проекта
Прежде чем приступить к написанию кода, обязательно настройте среду программирования. Откройте свой любимый редактор или одну из рекомендуемых IDE, например Visual Studio Code или Sublime Text.
Создавайте папки проектов, чтобы организовывать файлы HTML и CSS. В этой папке создайте отдельные файлы для HTML ( index.html ) и CSS ( style.css ). Наконец, свяжите файл CSS с телом HTML-документа, используя тег.
Создать HTML-структуру
Основой контактной формы является ее HTML-структура. Вот как можно создать необходимые HTML-элементы для контактной формы.
Приведенный выше HTML-код создает компонент формы и содержит поля ввода для получения данных пользователя для контактной формы. На данный момент ваша контактная форма будет выглядеть так:
Оформление контактной формы
Привлекательная и удобная контактная форма улучшит общее впечатление. В приведенном ниже коде CSS используются свойства flexbox и шаблоны блоков CSS, такие как отступы и поля, для стилизации контактной формы для лучшего взаимодействия с пользователем.
* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } HTML {размер шрифта: 62,5%; } body {font-family: “Mulish”, без засечек; высота: 100вх; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } Основная { ширина: 40рем; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); маржа: 0 авто; высота: 45рем; граница-радиус: 2rem; отступ: 2рем; } h1 {выравнивание текста: центр; размер шрифта: 3rem; отступы: 1рем 2рем; } Форма {маржа: 3rem 0; дисплей: гибкий; гибкое направление: столбец; междурядье: 2рем; } .input__container { display: flex; гибкое направление: столбец; междурядье: 0,5рем; } .input__container label { размер шрифта: 1.6rem; } .input__container input, textarea { дополнение: 1rem 2rem; радиус границы: 5 пикселей; граница: 1 пиксель, сплошная #555; изменение размера: нет; } Кнопка { align-self: flex-start; отступы: 1рем 2рем; радиус границы: 5 пикселей; граница: нет; фон: #333; цвет: #fff; курсор: указатель; }
Контактная форма будет выглядеть так:
Проверка контактной формы
Важно обеспечить точность и полноту информации, предоставляемой пользователями. Один из эффективных методов предполагает использование JavaScript для проверки формы на стороне клиента. Для начала создайте тег сценария в конце HTML-файла и укажите элемент формы.
Затем прикрепите к форме прослушиватель событий, чтобы пользователи могли отправлять информацию.
form.addEventListener(“отправить”, функция (событие) {});
Затем запретите действие перезагрузки страницы по умолчанию с помощью форм и выберите значение в поле электронной почты.
form.addEventListener(“submit”, function (event) { // Запретить перезагрузку страницы при отправке event.preventDefault(); // Выбор значения электронной почты, заполненного пользователем const email = document.getElementById(“email”).value; });
Наконец, используйте регулярное выражение, чтобы проверить подлинность электронной почты пользователя и отобразить уведомление в соответствии со значением электронной почты.
form.addEventListener(“submit”, function (event) { // Предотвращение перезагрузки страницы при отправке event.preventDefault(); // Выбор значения электронной почты, заполненного пользователем const email = document.getElementById(“email”).value; // Проверка действительного адреса электронной почты с использованием простого шаблона регулярного выражения const emailPattern = /^(^s@)+@(^s@)+.(^s@)+$/; if (!emailPattern.test(email)) { alert(“Неверный формат электронной почты”); return; } // Если всё прошло успешно, покажем сообщение об успехе alert(“Форма успешно отправлена”); });
Проверьте и исправьте ошибки в форме
Ни один проект не обходится без тестирования. Чтобы убедиться, что ваша форма работает правильно, введите необходимые значения, отправьте форму и проверьте ее на получение желаемых результатов.
Надеюсь, статья окажется для вас полезной.
В приведенной выше статье вы познакомились с «Как создать простую контактную форму с использованием HTML, CSS и JavaScript». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!
