Вёрстка: HTML формы обратной связи

Пример базовой формы обратной связи.

<form method="POST" action="/feedback/" class="form" enctype="multipart/form-data">
  <div class="group">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
  </div>

  <div class="group">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" placeholder="Введите ваш email" required>
  </div>

  <div class="group">
    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" placeholder="Введите ваше сообщение" required></textarea>
  </div>

  <div class="group">
    <label for="file">Прикрепить файл:</label>
    <input type="file" id="file" name="file">
  </div>

  <div class="group">
    <label>
      <input type="checkbox" name="agree" required>
      Я согласен на обработку моих персональных данных.
    </label>
  </div>

  <button type="submit">Отправить</button>
</form>

Базовые стили для этой формы:

/* Определение цветовой палитры Material Design */
:root {
  --mdc-theme-primary: #1976D2;
  --mdc-theme-secondary: #FFC107;
  --mdc-theme-background: #F5F5F5;
}

/* Стили для формы */
.form {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 24px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Стили для группы лейбла и инпута */
.group {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

label {
  font-size: 16px;
  margin-bottom: 8px;
}

input,
textarea {
  border: none;
  border-radius: 4px;
  background-color: #F5F5F5;
  padding: 12px;
  font-size: 16px;
  color: #333;
  resize: none;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
  font-style: italic;
}

textarea {
  height: 120px;
}

/* Стили для кнопки */
button[type="submit"] {
  background-color: var(--mdc-theme-primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button[type="submit"]:hover {
  background-color: #1565C0;
}

/* Стили для чекбокса */
input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  width: 22px;
  height: 22px;
}

label input[type="checkbox"]:checked::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--mdc-theme-primary);
  background-color: var(--mdc-theme-primary);
  border-radius: 4px;
  margin-right: 8px;
}

label input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #bbb;
  border-radius: 4px;
  margin-right: 8px;
}