Красивые формы для сайта: Коллекция из 15+ красивых форм регистрации и авторизации

forms.app: Создавайте онлайн-формы

forms.app: Создавайте онлайн-формы

Скидка до 50 % на годовые платные планы forms.app во время ограниченной распродажи в Черную пятницу.⏰

Ценообразование

Нам доверяют многие организации по всему миру

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

Строить формы стало проще

от forms.app позволяет быстро создать красивую веб-форму. Если вам нужно создать контактные формы и регистрационные формы для целевой страницы или форму онлайн-заказа для вашего бизнеса, вам больше не нужно тратить часы на работу с формами.

Индивидуальные формы творят чудеса

Знаете ли вы, что красивые формы с большей вероятностью принесут больше откликов, чем обычные? В forms.app вы можете настроить дизайн своей формы до мельчайших деталей и сопоставить образ вашего бренда с вашими формами.

Делитесь своими формами где угодно

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

Просмотрите собранные данные

Вы можете просмотреть ответы на свои формы различными способами, например, в формате электронной таблицы или в формате почтового ящика. Кроме того, вы сможете увидеть множество полезных статистических данных о ваших данных благодаря разделу расширенной аналитики forms.app.

Вот что люди говорят о нас

forms.app признан лучшим программным обеспечением для создания форм и опросов ведущими программными платформами.

• Farah H.

  Travel agent

  Small-Business(50 or fewer emp.)

  Delightful experience using this website

  Mainly there’s a lot of stuff that I would like to talk about. Therefore, I’m going to start by describing the easy accessibility of the website. I mean, anyone can access it! you don’t actually require a degree or certificate to fill out that form, you just need a little knowledge about what you doing.

• Alice P.

  HR Assistant

  Mid-Market(51-1000 emp.)

  Wonderful!

  It is very easy to use and self-explicative. I love how we can personalize the form, and we can add as many questions as we want. Also, the final look is outstanding!

• Maria Josefa P.

  Teacher

  Mid-Market(51-1000 emp.)

  Very simple to use and fast to put up a survey within a sleek UI

  The statistics part is a plus, for sure! If you need to put up a survey in a matter of minutes, with a sleek interface and great statistics, forms.app is the best choice.

• Rafael V.

  Partner/CSO

  Small-Business(50 or fewer emp.)

  I used forms.app for customer satisfaction surveys

  It is easy to use. It also offers different templates of surveys to choose from. forms.app is very useful in all kinds of industries. It is so easy to administer.

• Daniel T.

  CEO

  Small-Business(50 or fewer emp. )

  Clean, beautiful, and functional

  UX is very nice. Functionalities are very good.

• Adrian K.

  Software Architect

  Small-Business(50 or fewer emp.)

  A modern solution for the current times

  Best Project Management Software: forms.app. Ease of editing is the best feature of the site. Everything moves at lightning speed.

• Thiago M.

  Designer

  Design, Self-employed

  Amazing software

  It’s essential to me, I used it to collect the briefing pieces of information from my clients. I love the design and the user experience.

Функции

Создавайте функциональные формы с мощными функциями

Интеграция с более чем 500 приложениями

Вы можете интегрировать forms.app с другими используемыми вами инструментами и автоматизировать большую часть своей работы.

Исследуйте приложения

Войти через

Как сделать Форму регистрации

❮ Назад Дальше ❯

---

Узнайте, как создать форму регистрации с помощью CSS.

---

Пожалуйста, заполните эту форму, чтобы создать учетную запись.

---

Email

Password

Repeat Password

By creating an account you agree to our Terms & Privacy.

Already have an account? Sign in

---

Шаг 1) добавить HTML:

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:

Пример

<form action=»action_page.php»>
  <div class=»container»>
    <h2>Register</h2>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for=»email»><b>Email</b></label>
    <input type=»text» placeholder=»Enter Email» name=»email» required>

    <label for=»psw»><b>Password</b></label>
    <input type=»password» placeholder=»Enter Password» name=»psw» required>

    <label for=»psw-repeat»><b>Repeat Password</b></label>

    <input type=»password» placeholder=»Repeat Password» name=»psw-repeat» required>
    <hr>

    <p>By creating an account you agree to our <a href=»#»>Terms & Privacy</a>. </p>
    <button type=»submit»>Register</button>
  </div>

  <div>
    <p>Already have an account? <a href=»#»>Sign in</a>.</p>
  </div>
</form>

---

---

Шаг 2) добавить CSS:

Пример

* {box-sizing: border-box}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* Full-width input fields */

input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.

9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the «sign in» section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

---

Совет: Пойдите к нашему учебнику формы HTML для того чтобы выучить больше о формах HTML.

Совет: Перейдите в наш CSS Form учебник, чтобы узнать больше о том, как стиль элементов формы.

❮ Назад Дальше ❯

20 потрясающих примеров форм, которые вдохновят вас

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

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

Дизайн и прототипирование форм для Интернета и мобильных устройств с помощью Justinmind.

Это бесплатно!

Формы — сложная область в дизайне взаимодействия с пользователем. В конце концов, сложно создать что-то, от одного взгляда на которое пользователи вздыхают.

Людям просто не нравится заполнять формы. Положительным моментом этой головоломки является то, что большинство дизайнеров склонны решать проблемы, что делает дизайн формы интересной задачей. Дизайнеры должны найти способ побудить людей заполнять их, иначе пользователи рискуют бросить форму на полпути.

К сожалению, то, что пользователи не отправляют информацию через форму, означает две важные вещи, которые всегда вызывают мурашки у UX-дизайнеров: низкие коэффициенты конверсии и в целом неудачный дизайн. Но хотя не существует универсального подхода к дизайну хорошей формы, наличие убедительных примеров, которым удалось попасть в голову, не повредит, верно? Давайте откроем наш любимый инструмент каркаса и углубимся!

Мы решили получить несколько примеров форм, которые справились с трудной задачей — предложить пользователям хороший опыт. В этом посте вы увидите, почему эти примеры форм работают и какие тактики были использованы для улучшения пользовательского опыта, который они предлагают. Давайте взглянем!

• 10 примеров веб-форм, которые вам понравятся (и пользователи не возненавидят)
• 10 примеров форм мобильных приложений для вдохновения

10 примеров веб-форм, которые вам понравятся (и пользователи не возненавидят)

1. Примеры контактных листов

Контактные листы находятся на переднем крае общения между организациями и общественностью, но у них есть свои хитрости и проблемы.

Хотя контактные формы, как правило, короткие и простые, они могут быть путем для потенциальных клиентов и новых клиентов, которые хотят узнать больше, или они могут быть способом для текущих клиентов обратиться за поддержкой. Это означает, что контактные формы можно разделить на две, в зависимости от цели каждого пользователя.

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

Yummygum

Голландская студия дизайна Yummygum делает замечательную работу, делая свою контактную форму простой и эффективной, а также предлагая пользователям хороший опыт. Это короткий пример формы, всего с 3 полями ввода и очень ограниченными визуальными элементами. Как следствие, поля ввода мало отвлекают — если не считать остроумного и беззаботного текста.

Нам в Justinmind нравится, что в этом примере контактной формы есть текст-заполнитель, который не исчезает, когда пользователь щелкает поле ввода, что позволяет пользователю перепроверить, если это необходимо. Под полем сообщения единственная кнопка с описательным микротекстом: «Отправить запрос».

Вы также можете найти больше вдохновения в нашем списке потрясающих примеров опросов.

Omada Health

Программное обеспечение для здоровья Компания Omada Health проделала замечательную работу по созданию функциональной контактной формы. Это один из немногих примеров форм в этом списке, в котором удается с такой легкостью разделять данные — при соблюдении всех лучших практик дизайна форм.

Все 3 формы учитывают метки, заполнители, встроенную проверку, маски и описательную микрокопию. Что не любить?

2. Примеры опросов и анкет

Опросы и анкеты — отличный способ проведения онлайн-исследований. Основная цель этих примеров форм, как и всех опросов, — собрать как можно больше достоверных данных. Эти данные позже будут проанализированы и помещены в отчет, чтобы помочь в принятии бизнес-решений.

Анкета относится к форме, которая собирает данные с помощью письменных вопросов. Напротив, опрос относится к сбору данных, их анализу, составлению отчетов и получению выводов.

Snappet

Этот пример формы от Ricardo de Zoete для Snappet — отличный способ продемонстрировать смелое использование цвета, при этом оставляя много пустого места для удаления глаз. Нам нравится, что форма была разбита на разные экраны, и что пользователь может видеть, на каком экране он находится в любой момент.

Брейнтри

Без суеты, без суеты. Этот пример формы опроса удовлетворенности от Braintree показывает нам, что форма все еще может быть эффективной, не предлагая визуальных отвлекающих факторов. С вопросами, которые обеспечивают визуальный выбор ответов, пользователям не нужно тратить время на ввод текста, они могут отвечать быстро и инстинктивно.

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

Дизайн и прототипы форм для Интернета и мобильных устройств с помощью Justinmind. Это бесплатно!

3. Примеры покупок, заказов и расчетов

Все эти примеры форм объединяют замечательные характеристики: они точны и просты для понимания. Когда дело доходит до онлайн-продаж, форма бронирования или оформления заказа имеет решающее значение, и когда она сделана плохо, это может иметь катастрофические последствия для конверсии и прибыли. Ключевым моментом в этих примерах форм является максимальное уменьшение трения, с которым сталкиваются пользователи.

Сайт бронирования

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

Эта красота была сделана Джорданом Хьюзом для Milkinside.

Это идеальный пример того, как длинные формы могут быть разбиты на удобоваримые части, а анимация добавляет процессу определенную степень геймификации. Нам особенно нравится индикатор выполнения внизу и экран состояния успеха. Это форма, которую пользователи не будут против заполнить.

Потрясающий пример формы, сделанный Yifan Ding n Dribbble.

Оплата кредитной картой

Этот пример формы короткий и приятный — именно такими, какими хотят видеть формы пользователи. Вы заметите группировку полей ввода и разбивку цен, а также хорошо продуманную кнопку под всем этим. Мы фанаты описательной микрокопии в этой кнопке, в частности.

Оригинальный дизайн, сделанный Анной Ванглер на Dribble.

4. Примеры регистрации и входа

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

Hotjar

Hotjar не мешкает, когда дело доходит до их веб-дизайна — их веб-сайт также был представлен в нашем блоге в разделе «Примеры отзывов, которые вы захотите скопировать». На этот раз мы пускаем слюни на форму регистрации. Только с двумя полями ввода в форме нет ничего, что могло бы отговорить пользователей. С тонкой, но безошибочной полевой фокусировкой, сообщающей пользователям, где именно они находятся.

Потрясающая форма от Matt Koziorowski для EL Pasion и Hotjar.

Vendimation

Несмотря на то, что мы любим короткие формы, мы знаем, что простая форма с двумя полями ввода иногда просто не подходит. Вот когда вы должны придавать особое значение контексту и пытаться сделать весь процесс максимально простым для пользователя. В этой форме отмечены все нужные поля, предлагаются заполнители, маски, фокус поля и описательный текст.

Пример формы предоставлен Jeet на Dribbble.

5. Пример регистрации событий

Даже регистрационные формы должны предоставлять пользователю контекст. Это означает, что формы должны выдавать некоторую ключевую информацию о событии, но не настолько, чтобы запутать пользователя и заставить его задуматься о своем интересе к нему.

AoMilo

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

Дизайн формы Ольги для Netrix в Aao Milo.

Дизайн и прототип Формы для веб и мобильных устройств с Justinmind. Это бесплатно!

10 Примеры форм мобильных приложений для вдохновения

1. Примеры контактных форм

Контактные формы на мобильных устройствах должны быть еще более упрощены. Вы можете рассмотреть возможность добавления дополнительных вспомогательных элементов, таких как маски и ограничители, чтобы быстро донести идею до пользователей.

Плавающая контактная форма

В этом примере гладкой контактной формы мы можем оценить заполнители, которые превращаются в плавающие метки, как только пользователь начинает печатать. Это помогает пользователю сохранять ясность того, о чем его спрашивают, если он теряет ход мыслей. Использование минималистичных линий для разделения полей, а также использование цвета в тексте для фокусировки поля делают контактную форму потрясающей.

Оригинальный дизайн Matthieu Souteyrand на Dribbble.

Контактная форма от Брента Уэйсона

Использование мятно-зеленого цвета в дизайне Уайсона почти мечтательно. Этот дизайн показывает, что вам не нужно много визуальных элементов, чтобы создать форму с хорошим опытом.

Придерживаясь основ, в этом примере формы используются плавающие метки и маска в поле номера телефона, что не оставляет места для путаницы. Нам также нравится экран подтверждения успеха, поэтому пользователи могут уйти, зная, что им удалось отправить свою информацию.

2. Примеры опросов и анкет

Когда дело доходило до примеров опросов, которые проводились на мобильных устройствах, мы обычно имели дело с удовлетворенностью клиентов или сотрудников – и не более того.

Анкеты и опросы не обязательно должны быть длинными, но они представляют большую проблему для дизайнеров, работающих с маленькими экранами. Сегодня мы знаем, что мобильные устройства используются для всего, поэтому стоит пересмотреть идею мобильных опросов.

Форма обратной связи

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

Поле подсказок, а также радиокнопки прямо под ним не оставляют места для сомнений – как и та чудесная микрокопия на кнопке! Дизайн формы Захир Пател на Dribbble.

Опрос сотрудников

Этот пример формы хорошо подходит для иллюстрации того, как сложные опросы могут быть разбиты на части, оставаясь при этом простыми для пользователя. Интеллектуальный интерфейс учитывает не только опрос, но и возможный случай, когда пользователи пытаются связаться с HR, в случае путаницы.

Проценты на главном экране — отличный способ мотивировать пользователей добраться до финиша, что делает этот опрос прекрасным дизайном. Сделано Амирулом Хакимом на Dribbble.

3. Примеры покупок, бронирований и касс

Согласно отчету Statista, колоссальные 44% всех покупок в электронной коммерции в США будут совершаться с мобильных устройств. С таким большим процентом бизнеса, совершаемого в Интернете, никогда не было более срочного времени, чтобы упорядочить процесс мобильной оплаты. И это, конечно же, классические формы, связанные с покупкой.

Приложение «Продовольственные товары»

Нам нравится, что дизайнер этого примера формы спланировал использование пространства в соответствии с высокими стандартами. Эти два экрана выделяют место для информации о доставке, краткой информации о заказе, способе оплаты и даже могут включать рекламную акцию. Стиль навигации в виде «хлебных крошек» и описательный текст на кнопках приносят дополнительные баллы за удобство использования.

Дизайн формы от JD на Dribbble.

Страница оформления заказа

Это отличный пример того, как работает простой дизайн. Благодаря простому интерфейсу нет отвлекающих факторов и сомнений. Нам нравится, что кнопка управления действиями работает с помощью свайпа, добавляя немного веселья в очень простую форму оформления заказа.

Дизайн Hasse Finderup на Dribbble.

Дизайн и прототип Формы для веб и мобильных устройств с Justinmind. Это бесплатно!

4. Примеры регистрации и входа

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

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

Создать учетную запись

Этот пример формы упрощает процесс регистрации. Обратите внимание, что требуется очень мало информации в сочетании с большим количеством контекста. У пользователей есть встроенная проверка и возможность увидеть пароль со значком глаза. Мы уверены, что пользователи ценят эти ярлыки социальных сетей — а кто нет, верно?

Оригинальный дизайн от Sergej Nawalnew на Dribbble.

Hotel App Войти

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

Дизайн формы Сайема Ахмеда для Team IronSketch на Dribbble.

5. Примеры регистрации на мероприятие

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

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

Дубайская опера

Нам нравится, насколько гладко проходит процесс бронирования в этом примере формы. Форма отвечает всем требованиям: проверка, маски, ступенчатые экраны и разнообразное использование элементов управления действиями — все это сделано с высоким коэффициентом геймификации. К тому времени, когда пользователь дойдет до состояния успеха, усилия, которые он приложил бы к форме, будут минимальными. Просто прекрасно!

Потрясающий дизайн формы от Валери Торф для Solvers на Dribbble.

Калиин — AI Календарь

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

Этот дизайн позволяет получить все важные детали, связанные с созданием события, и разбить их на несколько экранов, поэтому пользователю никогда не приходится сталкиваться с длинным списком вопросов.

Принёс Саша Максим для Tapptitude в Калиине.

Подведение итогов: вдохновляющие примеры форм

Эти крутые примеры форм — лишь некоторые из многих замечательных и функциональных дизайнов, представленных в виртуальной дикой природе. Не все формы одинаковы, и ваш творческий потенциал будет играть такую ​​же важную роль, как и ваше внимание к деталям — удобство использования здесь играет решающую роль.

Надеемся, что эти примеры форм вдохновят вас на создание следующей формы!

Дизайн и прототип Формы для веб и мобильных устройств с Justinmind. Это бесплатно!

Ребека Коста

Штатный SEO-менеджер, энтузиаст юзабилити и покровитель всех недосыпающих дизайнеров

25 Примеры стильных веб-форм

Веб-форма — это основной способ, позволяющий пользователям взаимодействовать с веб-сайтом. Будь то регистрация в службе, оставление комментария к сообщению в блоге или написание электронного письма через веб-клиент, такой как Gmail, — формы являются основным элементом современных веб-сайтов и веб-приложений. Дизайн формы веб-сайта может повлиять на то, как часто эти формы заполняются пользователями.

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

• Контактные формы
• Регистрация события
• Формы регистрации или входа
• Опросы и анкеты
• Кассы электронной торговли
• Запись на прием

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

1. Alexandru Cohaniuc

2. Приложение Tea Round

3. Grooveshark

4. Substrakt 90914

2

20042

6. Pixelight Creative

7. BallPark

8. Maquina Studio

9. NCLUD

10.

914191419141.

91419141.

9141.

9141.

9141.

914191.

914191.

914191.

10.

. . Alldevjobs.com

13. Connect

14. TVI

15. Веб -гранизы

16. Headscape

17. Digg

16. Headscape

17. Digg

16.0042

18. Graphik.fi

19. CollabFinder

20. Digitalmash

21. Kontain

22. SocialSnack

23.

Mint

24. BBC

25. Media Temple

Создайте новую веб-форму для вашего бизнеса!

Будь то контактная форма или подписка на рассылку новостей, мы надеемся, что этот список дал вам несколько креативных идей для новейшей формы веб-сайта вашей компании! Если вы думаете о внедрении новой или обновленной формы для своего веб-сайта, но не уверены, есть ли у вас время или навыки, чтобы завершить проект до уровня приведенных выше примеров веб-форм, обратитесь к профессионалам в WebFx! Наша команда квалифицированных и трудолюбивых веб-разработчиков будет рада помочь вам в создании любых веб-форм и помочь привлечь больше качественных лидов на ваш сайт!

Чтобы узнать больше о WebFX и наших услугах, посетите наш веб-сайт или заполните одну из наших контактных форм сегодня!

Связанный контент

• Пять типов эффективных заголовков в веб-дизайне
• 25 отличных примеров использования эффектов градиента в веб-дизайне
• Создайте красивое и доступное слайд-шоу с помощью jQuery
• Связанные категории: Демонстрация дизайна / Вдохновение и пользовательский интерфейс

Карьера в WebFX

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