Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

MOCKPLUS

Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free

MOCKPLUS IDOC

Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free

50 Best Free Bootstrap Form Templates & Examples in 2019

Mockplus Team 104800 Views

Bootstrap form speed up building a website or web app. Top 50 bootstrap form templates for free download & form examples for inspiration.

Bootstrap has gained in popularity and is one of the most practical front-end web frameworks. Developers and designers are sharing free bootstrap forms to help each other save time when building a website or web app. However, these resources are everywhere! To save you some time, I have put them together for you - here are the best Bootstrap form templates and free resources.

In order to help navigate what you are looking for, I grouped the 50 bootstrap form templates and examples I have gathered as follows:

Part 1: 40 Best Free Bootstrap Form Templates in 2019

  • Bootstrap login form templates
  • Bootstrap registration form templates
  • Bootstrap contact form templates
  • Bootstrap subscription form templates
  • More Bootstrap form design templates

Part 2: 10 Best Free Bootstrap Form Examples in 2019

In this part, I’ve rounded up 10 of the best Bootstrap form design examples for your inspiration.

I will describe each of the templates and examples to help you know them better with information like the form layouts (vertical form, horizontal form or inline form) and the category of each one. In addition, I will review their usage patterns and special design features.

Let’s get started!

Part 1: 40 Best Free Bootstrap Form Templates in 2019

Best Bootstrap login form templates [Free download]

Bootstrap 4 has its default style that can apply to most form controls, making it very useful. Each of these Bootstrap 4 form templates are login forms and each of them has two input fields, one checkbox, and a submit button.

1. Bootstrap 4 Stacked Login Form Template

This is a very basic vertical form template for almost any kind of website login page. It’s easy to modify and can be used for more than log-in forms, such as contact forms and password-change forms, etc.

Bootstrap 4 Stacked Login Form Template

You can easily create a stacked form with two input fields, one checkbox, and a submit button using the following codes:

stacked-form-code

Try it yourself

2. Bootstrap 4 Inline Login Form Template

An inline form has unique features. True to its name, all of its elements are inline, left-aligned, and the labels positioned alongside. One thing you should pay attention to is that inline forms should only be used with forms within viewports that are at least 768px wide.

Bootstrap-inline-form

This is how you do it:

inline-form

Try it yourself

3. Bootstrap Inline Login Form with Utilities

This one has a tiny but important difference from the inline form discussed above. Thanks to this difference, which contains a right margin (.mr-sm-2) to each input and a margin-bottom class (.mb-2), the form takes up more screen space.

Inline-form-with-utilities

Check the codes:

Inline-form-with-utilities-code

Try it yourself

4. Bootstrap Horizontal Login Form Template

A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input). You can use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.

Bootstrap-horizontal-form.jpg

The following are the codes:

Bootstrap-horizontal-form-code

Try it yourself

5. Menu Form Template to Login

Menu-Form-Template

You can put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you need.

Menu Form Template code

Try it yourself

6. Custom Login, Registration & Forgot Password Form Template

This is a basic Bootstrap form that is suitable for log in, sign up and reset password pages. It has a cute interactive round icon that serves as the submit button.

Custom Login, Registration & Forgot Password Form Template

custom-login-code

Try it yourself

Best Bootstrap Registration/Signup Form Templates [Free download]

7. Sign Up Forms - Bootstrap 3 Registration Form with Validation

Designer: Juffrey Rodriguez

This is a long horizontal registration form with several input fields. There is a drop-down menu on the third line "Department/Office". In addition, the designer has added a small icon on each line to clarify the required input.

Bootstrap-3-registration-form-with-validation

Bootstrap-3-registration-form-with-validation-code

Try it yourself

8. Login & Signup Forms in Panel

Designer: Calvinko

This form contains 2 input fields, a checkbox, two login button, a password refound CTA on the right top corner and a signup CTA on the bottom. All these make it a functional signin form.

Login & Signup Forms in Panel

Login-signup-forms-in-panel-code

Try it yourself.

9. Check it out

Designer: Dipendra

This form is Google-friendly. You can sign up quicky with your Google account.

Sign-up-template

Sign-up-template-code

Try it yourself

10. Bootstrap Dual Design Registration Form

Designer: Kshiti06

Select Employee or Hirer to reach different forms. The signup form and the login form are displayed on the same screen. The asymmetrical layout design creates a balance between the two forms. This form is also a great website layout design example.

Bootstrap Dual Design Registration Form

Bootstrap Dual Design Registration Form code

Try it yourself

11. Login/Registration Form Transition

Designer: Nikolay Talanov

  • Highlight to emphasize
  • Nice picture

Login/Registration Form Transition

Login/Registration Form Transition code

Try it yourself

12. Material Login Form

Designer: Andy Tran

Material design has been a widely-adopted principle in web design. Andy used it here in this form and, as you see, it is really great with lovely interactive features. Hover your mouse on the input field or submit button and they will turn the red. The red icon with a pen is actually a switch button to change to the registration form.

Material Login Form

Material Login Form code

Try it yourself

13. Interactive Sign Up Form

Designer: Riccardo Pasianotto

This signup form has 3 layers to lead you through a registration process.

Interactive Sign Up Form

Try it yourself

Best Bootstrap Subscription form templates [ Free download ]

14. Subscription Cart

Designer: Msurguy

This is a typical subscription cart form for products purchasing.

Subscription Cart

Subscription-cart-code

Try it yourself

15. Subscription Form

Designer: Jeya Karthika

A basic subscription form with two input fields and a submit button.

Subscription Form

Subscription Form code

Try it yourself

16. Subscription Animation

Designer: Valery Alikin

This is a simplest but interesting form. It does require an email address.

Subscription Animation code

Try it yourself

17. Please Confirm Subscription

Designer: Really Good Email

This form has a nice header which makes your page stand out. In addition, you can use this as a landing page template.

Please Confirm Subscription

Please Confirm Subscription code

Try it yourself

Best Bootstrap Contact Form Templates [Free download]

18. Contact Form

Designer: Danlouis9701

This contact form based on Bootstrap can be used on any website. It has a special text input field to allow for open-ended comment.

Contact Form

Contact Form code

Try it yourself

19. Bootstrap Contact Form

Designer: Kshiti06

This form uses yellow and white to create a nice contrast. It looks more appealing than all-white contact forms.

Bootstrap Contact Form

Bootstrap Contact Form code

Try it yourself

20. Bootstrap Contact Form

Designer: Kshiti06

It uses gradient blue colour as the background, which is a perfect compliment to an all-white contact form. It uses placeholders to inform you what you should input.

Bootstrap Contact Form

Bootstrap Contact Form code

Try it yourself

21. Contact Form - One page

Designer: Kastya

It has a custom styled button with a nice icon. In addition, the rounded form spaces make it display perfectly on any web or mobile screen. The typography on the header is very powerful.

Contact Form - One page

Contact Form - One page code

Try it yourself

22. Contact Us Form with Validation

Designer: Mirchu

This is an all-white contact form with a custom styled button with a solid green color. Bootstrap form validation is used in this form.

all-white contact form

all-white contact form code

Try it yourself

23. Bootstrap 3 Contact Form with Validation

Designer: Jay

  • Built with Bootstrap 3
  • Field validation with Bootstrap validator

This is a powerful contact form with multiple items, including input fields, checkboxes, radio buttons and a submit button.

Bootstrap 3 Contact Form with Validation

Bootstrap 3 Contact Form with Validation code

Try it yourself

24. Elegant Contact Form

Designer: Mark Murray

This form features:

  • Round edges
  • Large textboxes
  • Custom styled submit button
  • Elegant Contact Form
  • Elegant Contact Form code

Try it yourself

25. Clean Contact Form

Designer: Nick haskell

This form features:

  • A fancy, concise, and delightful header
  • Custom styled submit button
  • The image and text encourages visitors to get in touch with you.
  • Responsive form design

Clean Contact Form code

Try it yourself

26. Contact Form

Designer: Stefan Rusu

Form features:

  • Interactive layout
  • Full-page contact form
  • Simple and useful

Contact Form

Contact Form code

Try it yourself

27. Quick Minimal Contact Form

Designer: Erlen

Form features:

  • Clean color scheme
  • Custom styled submit button
  • Placeholder to inform what you should input

Quick Minimal Contact Form

Try it yourself

28. Contact Form Template

Designer: Chris Holder

Contact Form Template

Try it yourself

29. Responsive Contact Form with Map

Designer: Lentie Ward 

Form features:

  • Map background to provide an accurate reference of where you are
  • Asymmetrical layout
  • Excellent color scheme
  • Large textboxes

Responsive Contact Form with Map

Try it yourself

30. Transparent Contact Form

Designer: Luis M Ruiz

Form features:

  • Large textboxes
  • Fully responsive contact form design
  • Support customization
  • Confiscated design

Transparent Contact Form

Try it yourself

If you need more resources, there are 12 Best Free Html5 Contact Form & Contact Us Page Templates you shouldn't miss.

More Bootstrap Form Templates for Free use

31. Responsive Shopping Car

Designer: Asanti82

Form features:

  • Functional form design
  • Fully responsive

Responsive Shopping Car

Try it yourself

32. Daily UI #007 | Settings

Designer: Julie Park

Form features:

  • Adaptable to any web-page sidebar
  • Nice color scheme
  • Interactive elements

daily-ui

Try it yourself

33. Step-by-Step Form Interaction

Designer: Bhakti Al Akbar

Form features:

  • Step by step guidance
  • Quickly get feedback from the user
  • Custom styled submit button

Step-by-Step Form Interaction

Try it yourself

34. Simple Payment Form Using Bootstrap

Designer: llgruff

Form features:

  • Fancy header with available cards

Simple Payment Form Using Bootstrap

Try it yourself

35. Animated feedback form

Designer: Caspian Seagull

Form features:

  • Consistent animation
  • Interactive layout
  • Large textboxes

Animated feedback form

Try it yourself

36. Sliding labels for Bootstrap forms (jQuery)

Designer: Alessandro Falchi

Form features:

  • Sliding label effect
  • Interactive layout

Sliding labels for Bootstrap forms (jQuery)

Try it yourself

37. Login Form - Modal

Designer: Andy Tran

Form features:

  • Material inspired login form
  • 2 panels: log in panel and registration panel

Login Form - Modal

Try it yourself

38. Multi-Step Form with Progress Bar Using jQuery and CSS3

Designer: Eric

Form features:

  • Smaller logic sections
  • Multiple-step form with a cool progress bar
  • Suitable for registration, checkout, profile fillups and 2-factor authentication logins

Multi-Step Form with Progress Bar Using jQuery and CSS3

Try it yourself

39. Sign-Up/Login Form

Designer: Eric

Form features:

  • Easy to switch from sign up to log in
  • Solid color buttons
  • Four input areas
  • Tabs and floating form labels

Sign-Up/Login Form

Try it yourself

40. Basic Hotel Booking Form

Designer: Andi Dysart

Form features:

  • All-white form
  • Interactive layout
  • Full-page form design
  • Large textbox

Basic Hotel Booking Form

Try it yourself

Part 2: 10 Best Free Bootstrap Form Examples in 2019

1. Mockplus - Contact Us Form Design

Mockplus is a rapid prototyping tool in China. The contact page is quite simple but useful with 3 input fields and a large textbox.

Mockplus - Contact Us Form Design

2. Casangelina- Contact Form

Casangelina is one of the top ten cliff hotels in the world. The booking form is elegant with nice animation.

Casangelina- Contact Form

3. Slack - Simple iSgnup Form with Nice Pictures

The entire page is aesthetically pleasing. You just need to provide your email address.

Slack - Simple iSgnup Form with Nice Pictures

4. Dropbox - Signup Form

This form uses an asymmetrical layout and it creates a contrast to strengthen the balance.

Dropbox - Signup Form

5. Thredup- Signup Form With Multiple Choices

This form is conveniently connected to your Amazon account.

Thredup- Signup Form With Multiple Choices

I like its login form a great deal. It has a cute hand waving at you, saying hello to you. The interactive design really invokes feelings.

Thredup- Signup Form With Multiple Choices1

6. Healthline - Subscription Form with CheckBox Settings

You are free to choose what content you would like to subscribe to with checkbox settings.

Healthline - Subscription Form with CheckBox Settings

7. Airbnb - Booking From Based on Where You Are

With a nice big picture as the background, this booking form is aesthetically appealing.

Airbnb - Booking From Based on Where You Are

8. Mint - Signin Form

One account with, everything in it. This form is really useful.

Mint - Signin Form

9. Dropbox - Purchase Dropbox Business Form

A powerful purchasing form worthy of consideration. This is a relatively long form, so you will learn Long Web Form Design Practices and Principles here too.

Dropbox - Purchase Dropbox Business Form

10. Medium - Upgrade Pay Form

This is a detailed paycheck form.

Medium - Upgrade Pay Form

Above are the 50 best free Bootstrap form templates and examples. If you find something you like, apply it to your next project!

More reading about form design:

5 Best Practices of Mobile Form Design Examples and Principles

Web Form Design: 35 Best Practices, Principles, Templates & Books

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com