Коротко: форма для записи на HTML — это тег <form> с полями input, select, textarea и кнопкой <button type="submit">. CSS оформляет поля и их состояния. Но важно понимать: одна вёрстка заявки не отправит — нужен обработчик на сервере (в WordPress это делают плагины форм).
Минимальная разметка формы
<form class="form" action="/send" method="post">
<label>Имя
<input type="text" name="name" required>
</label>
<label>Телефон
<input type="tel" name="phone" required>
</label>
<label>Услуга
<select name="service">
<option>Консультация</option>
<option>Ремонт</option>
</select>
</label>
<label>Комментарий
<textarea name="message" rows="4"></textarea>
</label>
<button type="submit">Записаться</button>
</form>Вкладки: разбор по частям
Тип поля подсказывает браузеру, что вводить, и включает проверку:
type="text"— обычный текст;type="tel"— телефон (на мобильном — цифровая клавиатура);type="email"— e-mail с проверкой;type="date"— дата с календарём;type="number"— число.
У каждого поля обязателен атрибут name — по нему сервер поймёт, что пришло.
label связывает подпись с полем: клик по тексту фокусирует поле. Это важно и для удобства, и для доступности.
<label for="phone">Телефон</label>
<input id="phone" type="tel" name="phone">Вариант с обёрткой (как в примере выше) работает без атрибута for.
.form { display: grid; gap: 16px; max-width: 480px; }
.form input, .form select, .form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 8px;
font: inherit;
}
.form input:focus {
outline: none;
border-color: #003F8F;
box-shadow: 0 0 0 3px rgba(0,63,143,.15);
}
.form button {
background: #003F8F; color: #fff;
padding: 12px 20px; border: 0; border-radius: 8px;
cursor: pointer;
}Обратите внимание на font: inherit — иначе поля получат системный шрифт, отличный от сайта.
Чтобы форма реально отправляла заявки, нужен обработчик:
- в WordPress — плагин форм (Contact Form 7, WPForms) с уведомлениями на e-mail;
- своя форма — скрипт на сервере, который принимает POST и отправляет письмо;
- внешний сервис форм — форма ведёт на их endpoint.
Только HTML+CSS без обработчика = форма «ничего не делает».
Практика: форма записи на услугу
- Разметьте поля: имя, телефон, услуга, дата, комментарий.
- Свяжите каждое поле с подписью через
label. - Добавьте кнопку
type="submit". - Оформите поля и состояние фокуса.
- Подключите обработчик (плагин или скрипт).
- Проверьте отправку и приход письма.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Форма ничего не делает | нет обработчика | плагин или серверный скрипт |
| Данные не приходят | нет атрибута name |
добавить name каждому полю |
| Поля разного вида | не задан font: inherit |
наследовать шрифт |
| Клик по подписи не фокусирует | label не связан | обернуть или задать for |
Проверьте себя
Вопросы и ответы
Атрибут required у поля: браузер не даст отправить пустую форму. Но проверять данные всё равно должен сервер.
Оба отправляют форму. button гибче: внутри можно разместить иконку или разметку.
Капчей (например, невидимой), скрытым «медовым» полем или проверкой на стороне сервера. В плагинах форм это настраивается в один клик.
Да, через JavaScript (fetch) и серверный endpoint. Тогда показывают сообщение «Заявка отправлена» прямо на странице.
Итоги
- Форма — это
form+ поля сname+ кнопка submit. - Подписи связывают через
label— это и удобно, и доступно. - Стили:
font: inherit, отступы, рамка, состояние фокуса. - Без серверного обработчика форма не отправляет заявки.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.