Как создать простую контактную форму с использованием HTML, CSS и JavaScript

Контактные формы являются важнейшим компонентом веб-сайтов, позволяющим пользователям обращаться к вам с вопросами, отзывами или запросами.

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

Настройка проекта

Прежде чем приступить к написанию кода, убедитесь, что ваша среда разработки настроена. Откройте предпочитаемый вами текстовый редактор или одна из рекомендуемых интегрированных сред разработки (IDE) нравиться Код Visual Studio или Возвышенный текст.

Создайте папку проекта, чтобы систематизировать файлы HTML и CSS.

В этой папке создайте отдельные файлы для HTML (index.html) и CSS (стиль.css). Наконец, свяжите свой CSS-файл с HTML-документом. раздел с помощью ярлык.

Создание HTML-структуры

Основой любой контактной формы является ее HTML-структура. Вот как вы можете создать необходимые элементы HTML для вашей контактной формы.

<main>
<h1>Welcome to my Formh1>
<formid="form">
<divclass="input__container">
<labelfor="name">Namelabel>

<inputtype="text"id="name"name="name"required />
div>
<divclass="input__container">
<labelfor="email">Emaillabel>
<inputtype="email"id="email"name="email"required />
div>
<divclass="input__container">
<labelfor="message">Messagelabel>
<textareaid="message"name="message"rows="4"required>textarea>
div>
<button>Submitbutton>
form>
main>

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

На данный момент ваша контактная форма выглядит так:

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

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 font-size: 62.5%;
}
body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}
main {
 width: 40rem;
 box-shadow: 2px 3px 5pxrgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}
h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}
form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}
.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}
.input__containerlabel { font-size: 1.6rem; }
.input__containerinput,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1pxsolid#555;
 resize: none;
}
button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
}

Ваша контактная форма теперь выглядит так:

Реализация проверки формы

Обеспечение точности и полноты информации, предоставляемой пользователями, имеет первостепенное значение. Один из эффективных подходов предполагает использование JavaScript для проверки формы на стороне клиента. Для начала создайте тег сценария в конце вашего HTML-файла и настройте его на элемент формы.