Forms are one of the most important and most used components of any web application. Below, you can find couple of ready to use form layout examples which you can use as the base of your own forms.

Sectioned form with dividers

This sectioned form example uses dividers to separate the different sections of the form. Form fields uses placeholders and don't have separate labels for more compact look.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Country 1 Country 2 Country 3 Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

www.example.com/

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications

Sectioned form with dividers #2

This sectioned form example uses dividers to separate the different sections of the form, section title and description is horizontally aligned with the section fields. Form fields uses mat-label to have separate labels as well as placeholders for hints.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Email Address
Country / Region Country 1 Country 2 Country 3
Language Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

First name
Last name
Username www.example.com/
About

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications

Sectioned form with dividers #3

This sectioned form example uses dividers and colors to separate the different sections of the form. Form fields have labels and dense style.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Email Address Country / Region Country 1 Country 2 Country 3 Language Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

First name Last name Username www.example.com/ About

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications

Sectioned form with separate cards

This sectioned form example uses cards to separate the sections of the form. This kind of form layouts are more suitable for Settings or similar pages.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Country 1 Country 2 Country 3 Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

www.example.com/

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications

Sectioned form with separate cards #2

This sectioned form example uses cards and whitespace to separate the different sections of the form, section title and description is horizontally aligned with the section fields. Form fields have labels and dense style.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Email Address Country / Region Country 1 Country 2 Country 3 Language Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

First name Last name Username www.example.com/ About

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications

Sectioned form with separate cards #3

This sectioned form example uses cards and whitespace to separate the different sections of the form, section title and description is horizontally aligned with the section fields. Form fields have separate labels and dense style.

Basic information

Set your login preferences, help us personalize your experience and make big account changes here

Email Address
Country / Region Country 1 Country 2 Country 3
Language Language 1 Language 2 Language 3

Profile

People here will get to know you with this information

First name
Last name
Username www.example.com/
About

Notifications

We'll always let you know about important changes, but you pick what else you want to hear about.

By Email
Company News Featured Products Messages
Push Notifications Everything Just the good stuff No push notifications