32 Free Bootstrap Form Templates You Can Try Right Now

Web forms are a staple of websites today. From login and sign-up pages to orders to contact forms, websites need a way for users to submit their information, and forms are the best way to do it.

If you want to code up your own form, Bootstrap CSS is one of the best frameworks available to help. This framework prioritizes responsive design to make navigation easier for your site’s mobile users. Since half of all web traffic comes from mobile devices, it’s definitely worth considering.

Luckily, you don’t have to build your form completely from scratch — many developers have already built free, publicly available form templates for many different types of forms. To help you create an effective web form with Bootstrap, we’ve compiled over 30 of our favorites. Let’s get started.

Best Free Bootstrap Form Templates

In this list, we’ll share templates for the following form types:

• registration forms
• login forms
• contact forms
• checkout forms
• newsletter opt-in forms
• other useful form templates

Bootstrap Registration Form Templates

1. Simple Sign-Up Form (Bootstrap)

This first form comes from Bootstrap’s own documentation as a basic example of what a beginner can create for their sign-up flow.

See the code >>

2. Horizontal Form (Bootstrap)

This second template from the Bootstrap docs simply asks for email and password, with options to complete a radio button or checkbox field as well.

See the code >>

3. Register Form (vosidiy on Bootsnipp)

This professional registration form is one of our favorites made with Bootstrap, and resembles the look of many a popular web app. The accompanying icons for each form field make it a bit more user-friendly, plus the social login option is clearly visible.

See the code >>

4. Reg Form V1 (Colorlib)

Colorlib offers several free, quality Bootstrap templates, including this simple registration form. It features a blue background, a space for an image, and five text fields that you can modify.

See the code >>

5. Reg Form V2 (Colorlib)

Here’s another registration form template from Colorlib that positions the image beside the form instead of above it, if that’s the layout you’d prefer. Otherwise, all form fields are the same.

See the code >>

6. Wizard 1 (Colorlib)

Colorlib also offers several multi-step forms which you can use for registration, account creation, or checkout. This one takes you through the process of setting up an account and manages to look sleek while staying mobile-friendly.

See the code >>

7. Wizard 10 (Colorlib)

This wizard form from Colorlib appears as an overlay to a background image, making for a modern, minimal feel. Again, it’s great for sign-up, sign-in, and checkout flows.

See the code >>

8. Registration Form (Bootstrap 5 Validation) (Sam Norton on CodePen)

Another simple but effective registration, this Bootstrap template flips the colors and works well for any dark-themed website.

See the code >>

9. Registration Form With Photo (Epic Bootstrap)

This template incorporates a more prominent photo next to the form, a simple sign-up process, and a color scheme you may be familiar with if you’ve ever rented a stranger’s vacation home for the weekend.

See the code >>

10. Signup Page (Creative Tim)

If you want to include a social sign-up in your registration form, this Bootstrap template gives you that option. Plus, its bright orange background stands out against any background image.

See the code >>

11. Bootstrap Inline Form (W3)

It doesn’t get much simpler than this inline form template from W3, which you could use for a registration form or be adapted for a newsletter CTA. Either way, the single-line layout allows it to fit in a header or footer.

See the code >>

12. Sign-Up/Login Form (Eric on CodePen)

This form takes on a more boxy appearance, and works well as a modal. Also, note its dual purpose as a sign-up or sign-in form, toggled at the top.

See the code >>

13. Bootstrap Form (christian brill on CodePen)

White the bright blue might be a bit much for some, this layout is another great choice for a modal or pop-up.

See the code >>

14. Flat Bootstrap Form (Liliana Brissos on CodePen)

Flat layouts are very common in web design today. This template incorporates the aesthetic nicely, with the occasional hint of color to guide the eye from one step to the next.

See the code >>

Bootstrap Login Form Templates

15. Login Menu Form (Bootstrap)

Bootstrap’s own example of a login menu is straight-to-the-point. It’s a great starting point for building your own sign-in page.

See the code >>

16. Login/Registration Form Transition (Nikolay Talanov on CodePen)

This login form template is a bit more elaborate but still contains all the essentials: an email and password field, a sign-in button, a “forgot password?” prompt, and the option to sign up or log in with Facebook.

See the code >>

17. Login Form v1 (Colorlib)

Colorlib has a set of simple, stylish login form templates built with Bootstrap that are free and fully customizable. This one allows you to place any image to the left and keeps everything contained in one window.

See the code >>

18. Login Form Dark (Epic Bootstrap)

Fans of dark mode, give this form a try. It’s minimal, modern, user-friendly, and easy on your eyes.

See the code >>

19. Form Line (pablocorezzola on Bootsnipp)

Speaking of minimal, here’s one more login form template with a flat design. This form is so stripped-back that you could turn it into virtually any kind of form you want.

See the code >>

Bootstrap Contact Form Templates

20. Untitled (Sebastiao Solimenes on CodePen)

The fewer items you put in your contact form, the more likely users are to complete it. This super basic form template has only four options and a compact layout that can easily fit in the sidebar of your page.

See the code >>

21. Bootstrap 3 Contact form with Validation (Jay on CodePen)

This popular CodePen snippet provides all the forms your contact form will need to collect visitor information while validating user input to ensure it’s in the proper format before submitting.

See the code >>

22. Contact Form 1 (Colorlib)

Unsurprisingly, Colorlib has you covered with Bootstrap contact forms, too. There are four fields here, with a prominent image, a clear send button, and rounded sides on the input fields to make the form appear friendlier.

See the code >>

Bootstrap Checkout Form Templates

23. Address Form (Bootstrap)

Checkout forms can be tricky, since there are several necessary fields that accept different formats. Bootstrap provides a basic form template to get started — it includes the fields that users are used to when submitting a shipping address.

See the code >>

24. Bootstrap 4 Credit Card Form (Bootstrapious)

You can pair the last template with this one in order to accept both addresses and payments. We also like the toggle switch at the top that lets users choose their preferred payment method.

See the code >>

Bootstrap Newsletter Form Templates

25. Sliding Labels for Bootstrap Forms (Alessandro Falchi on CodePen)

This form features some cool animations with its form labels. Give it a try if you want to go the extra mile with your form design.

See the code >>

26. Inline Form Bootstrap (yoris on CodePen)

Or, opt for the simpler (but still effective) approach of a mobile-friendly inline newsletter form for collecting leads. Users just need to give their name and email address to get on the list.

See the code >>

Other Bootstrap Form Templates

27. Bootstrap Form (Stefan Pater on CodePen)

This button-triggered modal is ideal for placing a user’s focus entirely on your form, free from distractions. Just make sure the purpose of your form is worth pulling attention away from the rest of your site’s content for a moment.

See the code >>

28. Booking Form V1 (Colorlib)

Do you run an event or lodging website? This booking form template from Colorlib is perfect for your homepage or landing page, with simple fields that work perfectly well out of the box.

See the code >>

29. Meeting Booking Form (Chaiyachet on CodePen)

Meeting bookings are another common use for web forms. Adapt this form template for room bookings, meeting bookings, or even event bookings on your site.

See the code >>

30. Bootstrap 4 Request Quotation form Wizard (Omkar Bailkeri on BBBootstrap)

Allow visitors to request quotes with this user-friendly, mobile-friendly quote request form. A progress bar at the top keeps them engaged through each step of the process, ensuring more users actually reach the end.

See the code >>

31. Sample Bootstrap Form (Dendi Sunardi on CodePen)

This multi-column template is another option that can be adapted to your site, best for lengthier forms with more required fields.

See the code >>

32. Reset password Form (Ihor Sukhorada on CodePen)

Finally, this template lets users reset their passwords. The last thing users want to do after losing their password is fill out unnecessary fields, which is why this form has exactly one input and one button.

See the code >>

Build better forms with Bootstrap.

When building any kind of site, you need to consider mobile users alongside your desktop users, and this means considering responsive design from the start.

The Bootstrap framework ensures your pages are always mobile-friendly with little extra work required from you, the developer. And, with the right form, you can worry less about design and more about sign-ups, submissions, and conversions.