wow-design-wiki/mobile/mobile-form-patterns.md

title, created, updated, type, tags, sources, confidence

title	created	updated	type	tags	sources	confidence
Mobile Form Patterns	2026-07-03	2026-07-03	system	mobile forms input validation UX conversion	https://www.formCreatorai.com/mobile-form-design-patterns-maximize-completion https://subux.pro/guides/article/input-field-types-and-usage https://askusers.org/en/blog/mobile-form-optimization-completion-rates https://www.getworkform.com/blog/mobile-form-design-tips https://tinyform.com/post/mobile-form-statistics-ux-trends https://www.reform.app/blog/10-mobile-form-design-tips-for-better-ux	high

Mobile Form Patterns — Формы и инпуты для мобильных

1. Mobile Form Statistics

• 63% мобильных форм бросают на полпути (мобильная форма для завершения)
• Оптимизированные формы увеличивают completion rate до 43%
• Мобильные формы имеют более высокий abandonment rate, чем десктоп
• Каждый дополнительный field = 10% снижение completion rate

2. Input Types & Keyboards

2.1 Correct Input Types

<!-- Email — shows @ and . on keyboard -->
<input type="email" placeholder="you@example.com">

<!-- Phone — shows numeric keypad -->
<input type="tel" placeholder="+7 (___) ___-__-__">

<!-- Number — shows numeric keypad with minus -->
<input type="number" placeholder="100">

<!-- URL — shows .com and / on keyboard -->
<input type="url" placeholder="https://example.com">

<!-- Text — default, full keyboard -->
<input type="text" placeholder="Иван">

<!-- Search — shows search button on keyboard -->
<input type="search" placeholder="Поиск...">

<!-- Password — hides characters -->
<input type="password" placeholder="Пароль">

2.2 inputmode for Custom Keyboards

<!-- Numeric keyboard without changing type -->
<input inputmode="numeric" pattern="[0-9]*" placeholder="1234">

<!-- Decimal keyboard -->
<input inputmode="decimal" placeholder="123.45">

<!-- Search keyboard -->
<input inputmode="search" placeholder="Искать...">

<!-- Tel keyboard -->
<input inputmode="tel" placeholder="+7 999 123-45-67">

<!-- Email keyboard -->
<input inputmode="email" placeholder="you@example.com">

2.3 Keyboard Hints

<!-- Enter key label -->
<input type="text" placeholder="Сообщение" enterkeyhint="send">

<!-- Search button -->
<input type="search" placeholder="Поиск" enterkeyhint="search">

<!-- Next (for multi-field forms) -->
<input type="text" placeholder="Имя" enterkeyhint="next">
<input type="text" placeholder="Email" enterkeyhint="next">
<input type="text" placeholder="Телефон" enterkeyhint="done">

3. Form Layout Patterns

3.1 Single-Column Form

.mobile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

3.2 Floating Label Pattern

.form-group {
  position: relative;
}

.form-input {
  min-height: 48px;
  padding: 16px 12px 8px;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  background: var(--surface-1);
  font-size: 16px; /* Prevents iOS zoom */
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  transition: all 0.15s ease;
  font-size: 16px;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
  top: 8px;
  font-size: 12px;
  color: var(--primary);
}

3.3 Multi-Field Row (When Appropriate)

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

Правила:

• Только для связанных полей (имя/отчество, город/индекс)
• Всегда single-column на экранах < 360px
• Never for unrelated fields

4. Validation Patterns

4.1 Real-Time Validation

.form-input.valid {
  border-color: #22c55e;
}

.form-input.invalid {
  border-color: #ef4444;
  animation: shake 0.3s ease;
}

.form-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-success {
  font-size: 12px;
  color: #22c55e;
  margin-top: 4px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

4.2 Inline Validation on Blur

// Validate on blur, not on every keystroke
input.addEventListener('blur', () => {
  const value = input.value;
  if (!validate(value)) {
    input.classList.add('invalid');
    showError(input, getMessage(value));
  } else {
    input.classList.remove('invalid');
    input.classList.add('valid');
    showSuccess(input);
  }
});

4.3 Validation Error Summary

<!-- Show at top of form -->
<div class="form-error-summary" role="alert">
  <p>Исправьте следующие ошибки:</p>
  <ul>
    <li><a href="#email">Введите корректный email</a></li>
    <li><a href="#phone">Номер телефона должен содержать 10 цифр</a></li>
  </ul>
</div>

5. Form UX Patterns

5.1 Progressive Disclosure (Step by Step)

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-progress {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 16px;
}

.form-progress__step {
  flex: 1;
  height: 4px;
  background: var(--surface-2);
  margin: 0 4px;
  border-radius: 2px;
}

.form-progress__step.active {
  background: var(--primary);
}

5.2 Autocomplete & Autofill

<input type="text" name="fname" autocomplete="given-name">
<input type="text" name="lname" autocomplete="family-name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="postal" autocomplete="postal-code">

5.3 Masked Inputs

// Phone mask
function formatPhone(value) {
  const cleaned = value.replace(/\D/g, '');
  const match = cleaned.match(/^(\d)(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})$/);
  if (match) {
    return '+7' + (match[2] ? ' (' + match[2] : '') +
      (match[3] ? ') ' + match[3] : '') +
      (match[4] ? '-' + match[4] : '') +
      (match[5] ? '-' + match[5] : '');
  }
  return value;
}

6. Form Component Patterns

6.1 Select/Picker

<!-- Use native select for mobile — triggers OS picker -->
<select name="country">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="by">Беларусь</option>
</select>

<!-- Custom picker for mobile -->
<div class="picker-trigger">
  <span class="picker-label">Выберите дату</span>
  <span class="picker-arrow">▼</span>
</div>
<div class="picker-overlay">
  <div class="picker-wheel">
    <div class="picker-scroll">
      <!-- OS-style scroll wheel -->
    </div>
  </div>
</div>

6.2 Checkbox & Radio

/* Large touch targets */
.form-checkbox,
.form-radio {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-1);
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

.form-checkbox::after,
.form-radio::after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.2s;
}

.form-checkbox.checked::after,
.form-radio.checked::after {
  opacity: 1;
}

6.3 Toggle Switch

.toggle {
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.toggle.active {
  background: var(--primary);
}

.toggle.active::after {
  transform: translateX(20px);
}

7. Form Anti-Patterns

❌ Плохо	✅ Хорошо
Автофокус на первом поле	Автофокус только на 1 поле за шаг
Валидация при вводе	Валидация при blur или submit
Email type для всех текстовых полей	Правильный inputtype + inputmode
Фиксированная клавиатура	Динамическая клавиатура
10+ полей в одну страницу	Прогрессивная подача (step-by-step)
Нет подсказок для форматов	Placeholder + подсказки
Только красная рамка при ошибке	Иконка + текст + анимация
Сложные пароли без указаний	Показ требований к паролю

8. Mobile Form Checklist

Category	Check
Input Type	Правильный type + inputmode
Keyboard	Правильная клавиатура для каждого поля
Touch Targets	Минимум 44×44px
Labels	Видимые labels (floating или above)
Validation	Inline, после blur, summary at top
Autocomplete	autocomplete attributes set
Progress	Step indicator для многостраничных
Submit	CTA всегда виден
Feedback	Success/error states
Zoom	16px font-size на iOS