Готові рішення: 20 мінімалістичних HTML‑форм для контактів

У більшості сайтів є контактна форма. Вона завжди базується на HTML, CSS та JavaScript і здається чимось простим. Але на практиці зробити її одночасно зручною для користувачів, акуратною в дизайні й простою в інтеграції не так вже й легко. Буває, що й ідей немає зовсім.

Щоб трохи полегшити життя фронтенд-розробникам, ми зібрали кілька сучасних і зручних HTML-сніпетів для створення контактних форм. Вони легко адаптуються під ваш дизайн і, що важливо, працюють однаково добре і на десктопах, і на мобільних пристроях.

Проста форма

Контактні форми не повинні бути складними як у дизайні, так і в реалізації. У цій формі немає нічого зайвого: лише поле для імені, пошти, типу звернення та, власне, повідомлення.

Джерело: And Studio на CodePen

Контактна форма для особистого сайту

На персональних сайтах — чи то портфоліо, чи блог — юзеру спершу пропонують ознайомитися з контентом, а далі — сконтактувати. Тому кнопка для переходу на контактну форму, яка відкриється у новому модальному вікні, підходить ідеально.

Джерело: Tim Robert-Fitzgerald на CodePen

Мінімалістична контактна форма

Прості контактні форми «без зайвого» зручні своєю гнучкістю. Їх легко адаптувати під свій дизайн: змінити шрифт, колірну гаму, додати віжуали тощо. Ось один такий сніпет.

Джерело: Matheus Marsiglio на CodePen

Контактна форма з фідбеком

Інтерактивні форми сильно покращують UX сайту і дають юзерам розуміння, що все функціонує. Схожим чином працює і цей сніпет. Після заповнення відтворюється анімація з подякою та додатковим текстом, який можна кастомізувати під себе. 

Джерело: CrocoDillon на CodePen

Контактна форма для лендингу

Часом форма не повинна займати місця та забирати увагу від основного контенту. Тому розмістити її внизу сторінки або збоку стає чудовим рішенням.

Джерело: Trevor L.J.M. McIntire на CodePen

Випадна контактна форма

Для економії місця та організації структури часто використовують drop-down меню. Ця форма створена саме для таких випадків.

Джерело: Greg Sweet на CodePen

Сучасна адаптивна форма з Material Design інтерфейсом

Завдяки Material Design форма має чистий, сучасний вигляд із плавними анімаціями, акцентом на простоті та зручності для користувача. Адаптивний дизайн дає їй змогу мати гарний вигляд на будь-яких екранах — від смартфонів до десктопів. Інтерфейс інтуїтивний: під час фокусу поля вводу виділяються кольором, а підписи до полів «плавають» угору, не заважаючи вводу. Така форма підходить для сайтів, які хочуть мати професійний та сучасний вигляд.

Джерело: Nikhil Krishnan на CodePen

Базова контактна форма

Через свою простоту цей варіант можна застосувати всюди: від вебсайтів до email-розсилок. Так, у ньому немає нічого лишнього й кожен елемент можна кастомізувати під власні потреби та стиль. 

Джерело: Zach Saucier на PenCode

Повноекранна покрокова контактна форма

У разі, коли контактна форма повинна забрати на себе всю увагу користувача, варто використовувати повноекранний формат. Ця форма поділена на кроки та пропонує review-екран після заповнення, щоб пересвідчитися, що всі дані вказано правильно.

Код для тестування цієї форми можна знайти на GitHub, а протестувати — на сайті розробника.

Джерело: Manoela Ilic на Codrops

Інтерактивна контактна форма

Інтерактивні контактні форми привертають увагу юзерів. Хоч у цьому прикладі анімація й проста, її можна легко видозмінити, адаптувати під інший дизайн або повністю прибрати. 

Джерело: Iulian Savin на CodePen

Як обрати HTML-сніпет: практичні поради

Не всі HTML-форми однаково корисні — особливо якщо ви шукаєте мінімалістичне рішення, яке не просто має гарний вигляд, а й легко інтегрується. Є кілька важливих критеріїв, на які варто звернути увагу під час вибору сніпета.

• Простота структури. Що чистіший HTML код, то легше форму адаптувати під свій сайт. Уникайте надто складних або застарілих рішень.
• Адаптивність (responsive design). Форма має коректно відтворюватися на мобільних, планшетах і десктопах. Перевірте, чи використовуються медіазапити або флекс/грід-сітки.
• Готовність до інтеграції з бекендом. Сніпет не обов’язково має містити повний функціонал відправки, але добре, якщо він підготовлений для цього: наприклад, через form action, AJAX або Formspree.
• Легка кастомізація. Подивіться, наскільки легко змінювати кольори, тексти, розміри полів. Гарні сніпети не прив’язані до конкретного стилю чи фреймворку.
• Немає зайвих залежностей. Якщо для простої форми потрібно підключати Bootstrap, jQuery та ще три бібліотеки — це ознака перевантаженості. Мінімалізм = легкість.
• Доступність (accessibility). Перевірте, чи пов’язані label з полями, чи є фокус-стилі та як форма поводиться з клавіатурою. Це важливо для UX і SEO.