Download Now: Free HTML & CSS Coding Templates

As a writer, I often need to collect data and input from my clients and audience to better understand them. However, creating forms manually from scratch or customizing them was always draining until I found Bootstrap form templates.

The templates are super simple to set up, yet they appear professional and don't require me to have high-tech knowledge.

Thinking about using a form to collect your customer's information? From my perspective, Bootstrap form templates are a versatile option, whether it's for contact or orders. So, if you want to code up your own form, Bootstrap CSS is one of the best frameworks available to help.

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, I've compiled over 30 of my favorites. Let's get started.

Best Free Bootstrap Form Templates

In this list, I'll share templates for the following form types:

• Registration Forms
• Login Forms
• Contact Forms
• Checkout Forms
• Newsletter Opt-in Forms
• HTML & CSS 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. You can watch the video below on creating a sign-up form Bootstrap to make it easier for you.

I like that you can easily copy the code to your website and modify as necessary to personalize this bootstrap template:

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. I think it's great that this template includes the bubbles and check boxes if you need those for your form - all you have to do is change the text!

See the code >>

3. Register Form (vosidiy on Bootsnipp)

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

I had fun changing the colors of the buttons with the CSS right on the Bootsnipp site:

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.

Note: You need to provide your email address to download the bootstrap form codes from Colorlib.

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 - which is a big plus, in my opinion.

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 while giving you the opportunity to personalize the backdrop.

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, which can encourage more users to sign up with the easy options, this Bootstrap template will give 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 call-to-action (CTA). Either way, I like that the single-line layout allows it to fit in a header or footer.

I found it was super easy to modify the code through W3 by simply pressing the "Try it Yourself" button. I simply changed the words from email to name and name to email, then pressed "Run":

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 login form, toggled at the top. I like that the CodePen page has the HTML, CSS, and JavaScript all laid out for you.

See the code >>

13. Bootstrap Form (Christian Brill on CodePen)

While the bright blue might be a bit much for some, this layout is another great choice for a modal or pop-up. However, I discovered you can quickly change the colors by updating the color codes in the CSS - you can easily adjust them to fit your brand colors!

See the code >>

14. Flat Bootstrap Form (Liliana Brissos on CodePen)

Flat layouts are very common in web design today. I like that 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. Conveniently, you can copy the code from Bootstrap by simply pressing the "Copy" button in the corner so you can paste it into the backend of your website - and modify it as you see fit.

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. I think this last feature is especially handy for users. Plus, the sidebar offers an option for new users to make an account.

For those who want to use this template but modify it for your brand, I experimented with changing the image. All I had to do was find the "image" description in the CSS and replace the old web address with the web address of the new image:

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. I like that 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. I appreciate the buttons on Epic at the top corner that allow you to toggle from the result to the HTML to the CSS:

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 by modifying any part of the code.

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. As a non-coder, I found it was easy to eliminate form fields so you can modify it for your purposes:

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)

In my experience, 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 need when submitting a shipping address.

I wanted to play around with this one, but I'd have to copy and paste the code into my terminal to do so. However, the code is all there and ready to be adjusted to meet your needs!

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. I 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. I found it super easy to play around on CodePen to change the wording, font, and color.

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 >>

HTML & CSS Bootstrap form templates

Since Bootstrap form templates serve as a framework, they often come with pre-defined HTML and CSS components, making it easier for developers and non-developers to build forms.

That's why I've come up with some of my favorite templates that you can use for your website:

27. Sortable Drag & Drop Multi-Select Form

Image Source

With this form template, you can easily move around the fields and place them according to hierarchy. Obviously, the drag-and-drop functionality allows you to pick and place your fields in the selected fields section. I found the form to be quite responsive, especially when I made changes to the fields within the code, as shown below:

These forms can be good for considering your users' choices so they can pick which options they want. Although the template has eight options for available fields, you can add more as you please.

See the code >>

28. Hotel Survey Form

As the name suggests, this form template can be used to gain insights from your hotel guests regarding their stay and other aspects of your hotel.

See the code >>

What I like: I like how this form already includes most of the fields you would require for such a form. This makes it easier for anyone looking to use a similar survey form. You can also change the colors to fit your branding.

29. Form Validation

This form template makes it easy for anyone to understand how the form works, regardless of their technical level. You can use this template for any surveys or as a feedback form so that users can return even when they haven't completed it the first time.

See the code >>

30. Bootstrap 4.1.3 Form Validation

Like the previous template, this form only submits data when the user fills in all the fields below. As you can see in the code, you can customize these fields, including the message that comes up when you put in a valid or invalid response.

What I like: I'm impressed seeing all the required fields in the form, especially if you're using it to collect visitor information.

See the code >>

31. Step Form

Since this is a step-by-step form, you can only move to the next step once you've completed the previous one. This template can be useful for a job or even a school application form.

See the code >>

What I like: In my opinion, since the steps are already set up, it becomes easier to define what each step would entail. You can use parts of code from previous form templates to set it up.

Other Bootstrap Form Templates

32. 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. I suggest you just make sure the purpose of your form is worth pulling attention away from the rest of your site's content for a moment.

I like that users have to click the button to get the form, and with the code in CodePen, it's simple to modify the wording of the CTA:

See the code >>

33. 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 >>

34. 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.

I think this is a great form to use as a framework if you need to ask for date and time.

See the code >>

35. Bootstrap 4 Request Quotation Form Wizard (Omkar Bailkeri on BBBootstrap)

Allow visitors to request quotes with this user-friendly, mobile-friendly quote request form. I like that the progress bar at the top keeps them engaged through each step of the process, ensuring more users actually reach the end. I also like that it has required fields so that users will provide all the information you need.

Note: I couldn't see or modify the code without making a pro account on BBbootstrap. If you want to make multiple forms using the templates on BBbootstrap, I think it's totally worth it. If not, I'd recommend going with a different free template on this list.

See the code >>

36. Sample Bootstrap Form (Dendi Sunardi on CodePen)

This multi-column template is another option that can be adapted to your site. It's best for lengthier forms with more required fields. Once again, with CodePen, I found it was easy to modify the field labels in the code to suit your needs:

See the code >>

37. 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. I appreciate that this form gets straight to the point!

See the code >>

Now that you've looked at these form templates, depending on your needs, you can pick and choose whichever works for you. You can also try merging some of the template code to see if that's feasible for you. Here are some more coding templates you can explore to understand how these forms work.

Build Better Forms With Bootstrap

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

What I found great about working with Bootstrap form templates is that there's a form for almost every scenario. You don't always have to create your form from scratch; all you need to do is add some customizations, and you should be good to go.

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.

Editor's note: This post was originally published in June 2022 and has been updated for comprehensiveness.

Topics:Form Templates

Don't forget to share this post!