skip to Main Content
Our free WordPress themes are downloaded over 5 MILLION times. Get them now!
Bootstrap Contact Forms
Colorlib content is free. When you buy through links on our site, we may earn an affiliate commission. Learn More

37 Free Bootstrap Contact Form Templates 2021

We are always on the lookout for new snippets, but in the case of Bootstrap contact forms, we needed to create our own.

Even though we tested 100s and some were pretty solid, we still decided to take things into our hands.

With this, we promise you the most reliable, fresh and up-to-date templates that WORK FOR ANY blog or website.

A contact form is a must for every website, but you now don’t need to create it yourself.

We made sure to cover all sorts of styles with over 35+ different designs.

What’s best, our free contact forms are also easy to edit and configure. (Read: simple customization.)

Make the necessary contact section happen quickly.

Top 37 Free Bootstrap Contact Forms

Contact Form 1 by Colorlib

Contact Form 1 developed by Colorlib is a cool contact form designed with Bootstrap. This contact form looks COOL because of the excellent choice of colors.

The form title is ‘Get in touch’, which is a meaningful and suitable title for this kind of forms. On the left side of the form, there’s a beautiful message icon that has improved the look and feel of this form template.

This form template provides you with 4 text fields for name, email address, subject, and message. The user can stretch the message field if he/she prefers a larger text field for entering the message.

More info / Download Demo

Contact Form 2 by Colorlib

Contact Form 2 made by Colorlib is a beautiful, free contact form template designed using Bootstrap.

The form title is ‘Contact Us’. Although this title is appropriate enough, you may change this text to some other text. For example, you can replace this text with ‘Keep in touch’ or some other suitable text.

This form has only three text fields for name, email address, and message. You may also add more fields from the code. For instance, you may add a subject field so that the user can enter the subject of the message.

The user has to enter VALID text values. If he/she enters invalid texts, error messages are shown when the user hovers the mouse over the text fields.

More info / Download Demo

Contact Form 3 by Colorlib

This contact form by Colorlib has TWO options. For each option, a different contact form appears. One option is for just saying ‘hi’ while the other contact form is for getting a quote.

As this template provides you with two forms for two purposes, it will become very convenient for the user and will also be useful for you.

On clicking the budget field, a few sample budgets appear from which the user can select a budget. On clicking the ‘Needed Services’ field, a drop-down list comes up with a list of services.

More info / Download Demo

Contact Form 4 by Colorlib

Contact Form 4 by Colorlib is an awesome, free contact form template which can be added on any website.

If you need a contact form so that your potential customers can contact you, this form template will be a good choice for you. Using this form, your potential clients can enquire about the services you provide.

The user needs to choose a service about which he/she wants to know. He/she can select a service from the drop-down list with the caption ‘Needed Services’ in this form template.

From the budget field, the user can select their budget. When you can know about your potential client’s budget and when you can know which service they’re interested in, it will become EASIER for you to communicate with your potential customers.

More info / Download Demo

Contact Form 5 by Colorlib

Contact Form 5 built by Colorlib is a nice, free Bootstrap contact form.

There are placeholder texts in the text fields, which describe the fields. The form title is bold with the text ‘Contact Us’. The submit button is very wide, it’s as wide as the message field.

When you click on the ‘Needed services’ field, a drop-down list appears. It’s a list of services. Your potential customers can CHOOSE from these services. If you provide different services, you may change this list from the code.

More info / Download Demo

Contact Form 6 by Colorlib

This is one of the best Bootstrap contact forms developed by Colorlib. This template shows a map and an icon of a message over it.

When you click on the message icon, the contact form appears. In the contact form, there are three text fields. In these input fields, the user can enter his/her name, email address, and his/her message that he/she wants to send. There’s a beautiful submit button below the message field.

The submit button has an interesting hover EFFECT.

If you click on the submit button without entering any values in the text fields, error messages show in red.

The user has to enter the email address in the correct email format. If your user enters an invalid email address such as ‘jfghdf’, an error message will be shown.

More info / Download Demo

Contact Form 7 by Colorlib

Contact Form 7 is a very standard contact form developed by Colorlib. It has a very standard design. So if you use this contact form on your website, your site will look more professional.

The form title is ‘Get in Touch’. This form has four text fields. The user can enter his/her name, email address, phone number, and a message through this form.

In the text fields, there are proper placeholder texts and icons. These icons and the placeholder texts have made the form more USER-FRIENDLY.

There’s a checkbox below the message field with the caption ‘Send copy to my email’. So if the user wants to get a copy of the entered details, he/she can get them to his/her email address.

More info / Download Demo

Contact Form 8 by Colorlib

Contact Form 8 is an excellent, free Bootstrap contact form template made by Colorlib with a map as a background.

This form has interesting effects. When you click on the text fields, you can see cool visual effects. The overall quality of this form is very high.

There are appropriate placeholder texts so that the users can understand what to enter in a particular field. For example, the message field’s placeholder text is ‘Your message’.

By seeing this text, the user can quickly understand that he/she needs to enter a message in this field.

The button with the caption ‘SEND EMAIL’ looks great. Its background color is light green and the text color is white. When you hover your mouse over the button, the background color changes to dark green.

More info / Download Demo

Contact Form 9 by Colorlib

This is another awesome contact form template developed by Colorlib. This is a free template. So you don’t have to spend money for using it on your website.

And it’s also customizable at the same time, meaning you can make changes in this template according to your requirements and preferences.

When you click on the text boxes, you can see an interesting VISUAL EFFECT. Not entering any values in them will show error messages in red. If you enter an email address in the email form with an incorrect email format, an error message is shown.

Alternatively, there’s a phone number at the bottom but you need to change it to your actual contact number.

More info / Download Demo

Contact Form 10 by Colorlib

This beautiful, free Bootstrap contact form made by Colorlib is a very high-quality contact form template. Round text boxes, round button, and a GREAT color combination used in this template have made the form beautiful.

There’s a small icon placed in the ‘send’ button. Because of this icon, the button looks very interesting. There’s also a hover effect.

When you click on the text boxes, they grow a little in width. The user can enlarge the message field by dragging the right-bottom corner of this field.

So if the user’s message doesn’t fit into this text box, he/she can make the box larger.

Form validation has been implemented. So if the user leaves the required fields empty or enters invalid values and click the ‘send’ button, error messages will appear.

More info / Download Demo

Contact Form 11 by Colorlib

The background of this form is amazing. It will enhance the beauty of your website. This is a simple yet powerful Bootstrap contact form template. In this form, there are two mandatory text fields and the other two text fields are optional.

The mandatory fields are marked with a star. The website and the message fields are optional. So if the user doesn’t enter his/her website URL or if he doesn’t provide a message text in this form, no error messages will be shown.

But the user must enter his/her name and email address in the appropriate fields.

This beautiful contact form will be a QUICK WAY for your customers to get in touch with you.

More info / Download Demo

Contact Form 12 by Colorlib

Contact Form 12 is one of the most fantastic contact form templates developed by Colorlib. This form looks VERY COOL and has great visual effects. There’s a message icon on the left side of the form.

When you hover your mouse over this message icon, it will move a little.

You can see another great visual effect when you click on the text boxes.

Behind the form, there’s a picture of buildings. This has increased the beauty of this contact form. The color combination used in this template is really great.

There are three text fields in this form, which are name field, email field, and the message field. The corners of the text boxes and the button are round.

More info / Download Demo

Contact Form 13 by Colorlib

Contact Form 13 made by Colorlib looks very unique. On the left side, there’s a map, and you can see the form on the right side. A phone number is visible in the map section.

The contact form has all the necessary input fields but if you feel that you require more input fields, you can add more fields anytime from the code of this template.

Like the other contact forms developed by Colorlib, this form is also FREE and FULLY customizable, meaning you don’t have to spend any money for integrating it to your website and you can make necessary changes to it.

Although this form looks very standard, you may have to slightly change the design so that the form looks similar to your website’s design.

More info / Download Demo

Contact Form 14 by Colorlib

This contact form is one of the best contact forms made by Colorlib. There’s a nice background behind this form. Like the other templates mentioned in this blog post, this is also a free, fully customizable contact form template greatly designed with Bootstrap.

In this contact form, the name, email, and the message field are mandatory fields while the other ones are optional. The user must enter a value in the mandatory fields.

The user cannot send a message through this contact form leaving the mandatory fields empty.

Although this form looks great, you always have the option to enhance the design. You can make NECESSARY changes so that the design of this form matches with your website’s design.

More info / Download Demo

Contact Form 15 by Colorlib

Contact Form 15 by Colorlib is a FANTASTIC free contact form template designed with Bootstrap, which can be integrated to any website. You can see a map behind the form.

The text fields look modern because single lines have been used for the text fields instead of rectangular text boxes. For each text field, there’s a proper placeholder text, the text color of which is grey.

On clicking on the text fields, the placeholder texts disappear and the lines of the text fields become green, which enhances the user experience.

On top of the form, you can see a nice picture of a man working with a laptop. If you think this image is not appropriate for your website, you can REPLACE this image with a different one.

More info / Download Demo

Contact Form 16 by Colorlib

Contact Form 16 is also one of the most awesome contact form templates developed by Colorlib. It does not just look cool, it’s also simple, beautiful, and powerful.

If you’re looking for an amazing, free Bootstrap contact form for your website, you can consider using this form. This form is cool enough and can be integrated EASILY like any other contact form mentioned in this blog post.

If you know the very basics of web development, you can add this form to your site in just a couple of minutes.

Behind the form, there’s a great picture. There’s another image on top of the form which has enhanced the look of this form template.

And you can see SPECIAL effects on clicking the text fields.

More info / Download Demo

Contact Form 17 by Colorlib

Contact Form 17 is a beautiful, free, fully customizable Bootstrap contact form template designed by Colorlib. On the left side of the form, there’s a nice picture with contact information such as address, phone number, and email address.

So if the user wants, he/she can contact you through phone number and email, also. And he/she also has the option to physically go and visit your company office through the address provided in this section.

This form looks unique because the text fields are different from the traditional text fields used in other contact forms and other kinds of web forms.

For each of the text fields, there’s a CAPTION above the text field. Each caption is placed inside a rectangle with thin, grey lines.

More info / Download Demo

Contact Form V01

contact form 01
Contact Form V01 is a modern and free widget that you can insert on your website with ease. Let your users get in touch with you conveniently, without the need to pick up their phone.

Contact Form V01 also rocks a cool split design with the form on one side and additional company details on the other.

You can also add a link back to the home page in case they want to continue browsing your content and not leave JUST YET.

More info / Download Demo

Contact Form V02

contact form 02
Regardless of the type of website that you run, a contact section is pretty much mandatory. Contact Form V02 is here to sort things out with a clean design that also offers you to add extra detail.

Since it’s a Bootstrap contact form, the fluid design ensures great adaptability to smaller screens, too.

By the way, the widget ALSO supports autocomplete and validation.

More info / Download Demo

Contact Form V03

contact form 03
Contact Form V03 is a great free alternative if you would like to create a full-blown contact page on your website.

Not only do you get a functional form, but there are also an IMAGE section and EXTRA company details, like address, phone and email.

As for the form, it’s pretty basic with four fields and a button with a hover effect.

More info / Download Demo

Contact Form V04

contact form 04
There are multiple ways of spicing up the contact area – GRADIENT effect being one of them. If this is something you are into, Contact Form V04 is our free template based on Bootstrap Framework that does the trick.

Like in many of our other contact forms on this list, this one also comes with an extra section for adding address, phone, email and even link back to the home page.

More info / Download Demo

Contact Form V05

contact form 05
If you are super active on social media and it yields great results, you would want to have links to those spread all over your website.

INCLUDING the contact page/form.

Contact Form V05 is a great example of that, but with many additional features besides the social media links.

You can even check the live demo on different devices first before you proceed.

More info / Download Demo

Contact Form V06

contact form 06
Many dig the idea of displaying their company location on a MAP so that the user does not need to look it up manually.

Contact Form V06 rocks a great split layout with a form and Google Maps integration for your convenience.

You also don’t need to sort out form autocomplete and validation, as Contact Form V06 comes with both integrated by default.

More info / Download Demo

Contact Form V07

contact form 07
I am quite sure that many of you were looking for this exact alternative. The free Bootstrap contact form with a DARK design.

You are welcome to employ Contact Form V07 as is, but you can also take one step further and alter it.

For instance, you may be interested in changing the color of the “send message” button, even fonts.

More info / Download Demo

Contact Form V08

contact form 08
You can make your website contact widget pop more by adding an image background. But instead of making it happen FROM SCRATCH, you can now use Contact Form V08.

This free Bootstrap contact form is pretty straightforward but adds a nice touch to it with the background image.

Keep in mind, you can always improve things, making the snippet follow your branding regulations.

More info / Download Demo

Contact Form V09

contact form 09
I will say only one thing, let this free contact form template do all the talking instead of me. Dark background, gold details, gray and white text – WOW.

A tool that will let everyone enjoy filling out the missing information when in need of getting in touch with you.

The widget is also in perfect harmony with mobile devices and features autocomplete and validation.

What else you need?

More info / Download Demo

Contact Form V10

contact form 10
Full-screen image background, transparent design and solid color contact form – that’s what’s up when it comes to Contact Form V10.

While the additional details and form are side by side on the desktop, they move one on top of the other on mobile.

In case your website visitor needs your telephone number or your address only, this template ALLOWS you to include those as well.

More info / Download Demo

Contact Form V11

contact form 11
Contact Form V11 is one of the most minimalist contact form templates that we ever released. What’s cool about that is that it works with different website themes and styles out of the box.

Other than changing the color of the “send message” button, you can use it exactly as it comes out of the box.

But you can keep it entirely AS-IS, too.

More info / Download Demo

Contact Form V12

contact form 12
Do you need more minimalist Bootstrap contact form templates? Here we go.

Contact Form V12 is another superb tool that calls for a full-blown outcome realization in little to no time.

Contact Form V12 is very user-friendly, thanks to the organized and well-structured code. You can quickly perform improvements even as a beginner in the web development space.

More info / Download Demo

Contact Form V13

contact form 13
With the gradient background, Contact Form V13 stands out from the masses. With all the different free widgets and snippets that we release, we always make sure to bring you as many variations as possible.

The SAME applies to contact forms.

Contact Form V13 is great for businesses and agencies, as it also includes extra contact details and even a section to share a few compelling words.

More info / Download Demo

Contact Form V14

contact form 14
Here we have Contact Form V14, perfect for businesses and agencies by default. In fact, it works ideally for a marketing agency, but you can use it for something else, too.

For instance, if you run a news site and offer advertisements, that’s when this free contact form comes into play, too.

You can use the section on the left to further CONVINCING the potential client to work with you.

More info / Download Demo

Contact Form V15

contact form 15
Contact Form V15 is modern and minimal both at the same time. Due do to its clean and bold style, you can keep your contact section very bold yet straightforward.

Why even use too many distractions?

But that’s something that depends from business to business.

To follow the flow of your website’s simplicity, use Contact Form V15 and avoid building the contact page from scratch.

More info / Download Demo

Contact Form V16

contact form 16
Contact Form V16 is an ENGAGING contact form for agencies, businesses and freelancers. But really, even if you run a blog, you can include this catchy free Bootstrap template, too.

There are three fields for name, email and subject and a text area for the message.

Contact Form V16 also support form validation and autocomplete, which makes it even more practical.

More info / Download Demo

Contact Form V17

contact form 17
While you probably already have COMPANY DETAILS and contact info in the footer area, you can also add it beside the contact form.

To achieve a great result swiftly, that’s when you opt for Contact Form V17.

Name, email, phone, company and text area are the five predefined fields you can use as-is or improve further. Also, if you’d like to beautify it with a different colorway, go for it.

More info / Download Demo

Contact Form V18

contact form 18
Contact Form V18 is another take to a free Bootstrap contact form template with Google Maps. With the TWO-IN-ONE design, this widget offers you to quickly sort out a contact section on your website.

It’s a great alternative as you can use it on a separate page or even include it in your one-page website.

More info / Download Demo

Contact Form V19

contact form 19
If you want your site visitors and potential customers/clients to provide a little extra information, a contact form with a dropdown may come in very handy.

Contact Form V19 is the free tool that you can now employ regardless of your branding regulations. It works great out of the box, thanks to the extremely minimal look.

Another cool feature is the button click effect – go ahead, see it for yourself.

More info / Download Demo

Contact Form V20

contact form 20
You only really need four fields if you want to keep it straight to the point with a contact form. Contact Form V20 features fields for name, email and subject plus the text area.

The layout is also in perfect harmony with smartphones, tablets and desktops, ensuring a fantastic user experience.

More info / Download Demo
Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don't receive additional bonus for positive reviews.

Aigars Silkalns

Frontend web developer and web designer specialized in WordPress theme development. After graduating with BBA he self-though frontend web development. Currently, has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript (React, Vue, Angular) and PHP. Obsessed with application performance, user experience and simplicity.

Back To Top

If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at [email protected] We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.