43 Free HTML & Bootstrap Contact Form Templates 2026
These 43 free HTML contact form templates range from three-field cards to full contact pages with maps, social links, budget and service drop-downs, a callback request card and a contact-sales form. Each one has a live demo and a free download.
Every Colorlib form in the main list was rebuilt as dependency-free HTML, CSS and a few lines of vanilla JavaScript, and the two 2026 forms are built the same way. None of them loads jQuery, Bootstrap files or plugins, and each works on its own or inside a Bootstrap 4, 5 or 6 project. The map layouts use a keyless Google Maps embed, so there is no API key to set up. All of them are free for personal and commercial use under CC BY 3.0, as long as you keep the credit link.
Free tool by Colorlib · Form Workbench
Build your own contact form
Drag in fields, edit on the preview and match your site’s colors. Export HTML, React / Next.js, Vue or WordPress.
Completely free · No signup · Reopen saved forms
Connect your own endpoint to receive submissions. The templates below keep their existing licenses.
That makes this list a good place to start if you need a Bootstrap contact form: drop the markup and stylesheet into your Bootstrap page and the form keeps its own design. It also covers inquiry form templates, from general “get in touch” forms to structured enquiry forms with service and budget dropdowns (see V14, V19 and Contact Forms 3, 4 and 5).
These work with any static site or CMS. Just add the HTML and CSS files to your project, hook up a backend or form service, and you’re set.
Explore 2.5 Million Digital Assets, including 2026’s Best WordPress Themes
2M+ items from the world’s largest marketplace for HTML5 Templates, Themes & Design Assets. Whether that’s what you need or just after a few Stock Photos, all of it can be found here at Envato Market.
Best Free HTML5 and Bootstrap Contact Form Templates
Table of contents: all 43 templates
- Contact Form V01
- Contact Form V02
- Contact Form V03
- Contact Form V04
- Contact Form V05
- Contact Form V06
- Contact Form V07
- Contact Form V08
- Contact Form V09
- Contact Form V10
- Contact Form V11
- Contact Form V12
- Contact Form V13
- Contact Form V14
- Contact Form V15
- Contact Form V16
- Contact Form V17
- Contact Form V18
- Contact Form V19
- Contact Form V20
- Colorlib Contact Form
- Contact Form 1 by Colorlib
- Contact Form 2 by Colorlib
- Contact Form 3 by Colorlib
- Contact Form 4 by Colorlib
- Contact Form 5 by Colorlib
- Contact Form 6 With Map by Colorlib
- Contact Form 7 by Colorlib
- Contact Form 8 by Colorlib
- Contact Form 9 by Colorlib
- Contact Form 10 by Colorlib
- Contact Form 11 by Colorlib
- Contact Form 12 by Colorlib
- Contact Form 13 by Colorlib
- Contact Form 14 by Colorlib
- Contact Form 15 by Colorlib
- Contact Form 16 by Colorlib
- Contact Form 17 by Colorlib
- Contact Form 18 by Colorlib
- Contact Form 19 by Colorlib
- Contact Form 20 by Colorlib
- Appointment Form V10
- Pricing Table V11
Contact Form V01
Free HTML Bootstrap · Best for: a standard contact page with details beside the form
The baseline two-column layout: name, email, subject and message on one side, address, phone, email and website on the other. Validation now uses the browser’s built-in checks, styled to match the form, so there is no jQuery or validation plugin to load.
Contact Form V02
Free HTML Bootstrap · Best for: forms that need labels rather than placeholders
The same split as V01, but each field carries a visible label instead of relying on placeholder text that vanishes as you type. Auto-complete and form validation are included by default. It is plain HTML and CSS with a few lines of vanilla JavaScript, so it works on its own or inside a Bootstrap 4, 5 or 6 page.
Contact Form V03
Free HTML Bootstrap · Best for: visual contact pages
A photo column sits between the contact details and the four-field form, so the page carries an image without a full-screen background. Labelled fields and the browser’s own validation, styled to match, come as standard; nothing needs jQuery.
Contact Form V04
Free HTML Bootstrap · Best for: contact pages with no photography
A purple-to-indigo gradient replaces any background image, so nothing needs sourcing before you ship it. The white form card holds name, email, subject and message, with the address block alongside. The 257 KB download needs no framework.
Contact Form V05
Free HTML Bootstrap · Best for: contact pages that double as an about section
The only layout in the first ten that adds a follow-us social row under the address, phone and email details. A photo panel takes one half and the four-field form the other. No jQuery or Bootstrap files ship with it, so it looks the same with or without Bootstrap on the page.
Contact Form V06
Free HTML Bootstrap · Best for: businesses with a walk-in address
A Google Map sits in the column beside the form. It is a keyless embed, so there is no API key to set up; point it at your own address. Name, email, subject and message fields sit next to it, with the address, phone and website details below, and validation uses the browser’s built-in checks.
Free tool by Colorlib · Form Workbench
Like a layout, but need different fields?
Customize a form in the browser, test it and download code you can reopen later.
Completely free · No signup · Reopen saved forms
Connect your own endpoint to receive submissions. The templates below keep their existing licenses.
Contact Form V07
Free HTML Bootstrap Dark Mode · Best for: dark-themed sites
Two dark panels in slightly different shades separate the form from the contact details, with an orange accent on the button and icons. On mobile the form stacks above the information block. Its only script is a few lines of vanilla JavaScript for validation.
Contact Form V08
Free HTML Bootstrap · Best for: a contact form with nothing else on the page
A full-screen photo background with just the form on top and no address or phone block at all. Four labelled fields and a submit button are the entire page, which makes it quick to drop into an existing site. It carries its own styles, so it looks the same inside a Bootstrap 4, 5 or 6 project.
Contact Form V09
Free HTML Bootstrap Dark Mode · Best for: premium-feel business sites
A near-black page with a muted gold accent on the icons and button, which is unusual among free form snippets. Address, phone and email sit above the four-field form, so the details read first. Works well for dark business sites, and the download is 253 KB with no jQuery or plugins.
Contact Form V10
Free HTML Bootstrap · Best for: photo-led contact pages
A photo background shows through a transparent contact-details panel while the form itself sits on a solid card. The blue Send Message button is usually the only thing that needs recolouring. No jQuery or Bootstrap files are included; validation runs on the browser’s built-in checks.
Contact Form V11
Free HTML Bootstrap · Best for: simple standalone contact pages
First and last name are separate fields rather than one combined name box, which helps if you push submissions into a CRM. Email and message complete it, with a short intro column alongside and no contact-details block. The rebuilt download is 75 KB, down from 2.3 MB.
Contact Form V12
Free HTML Bootstrap · Best for: side-by-side form and address details
Labelled name, email and message fields sit beside a text column carrying the address and contact information. The two halves sit side by side on desktop and stack on mobile, and fonts and button colours are easy to swap. At 77 KB it carries its own styles, so a Bootstrap stylesheet on the page won’t change it.
Contact Form V13
Free HTML Bootstrap · Best for: companies with two offices
Two separate location blocks are built into the layout, one per office, rather than a single address. A blue-to-cyan gradient carries the background and the form itself stays at three fields. Validation relies on the browser’s built-in checks, shown in the form’s own style.
Contact Form V14
Free HTML Bootstrap · Best for: agencies qualifying project enquiries
The most detailed brief form here: name, organisation, email, project description, a budget dropdown from $2,000 up to $25,000-plus, and a target launch date. The left column explains your services before the visitor starts filling it in. It is now 76 KB instead of 1.3 MB, with no jQuery or plugins behind it.
Contact Form V15
Free HTML Bootstrap · Best for: compact contact pages
Three fields only, with a small contact-info card holding the address, phone and email. Nothing decorative gets in the way, which makes it one of the quickest here to restyle. At 110 KB with no framework files, it drops into a Bootstrap page or a plain one.
Contact Form V16
Free HTML Bootstrap · Best for: friendly, illustrated contact pages
An unDraw line illustration replaces the usual photograph or map, so the page stays light and there is no image licence to worry about. Name, email, subject and message sit beside it, built in plain HTML and CSS with a few lines of vanilla JavaScript for validation.
Contact Form V17
Free HTML Bootstrap · Best for: B2B enquiry forms
Adds phone and company fields to the usual set, with required markers on name, email and message. A two-tone background separates the form from the contact information column, and validation is built in, using the browser’s own checks rather than a jQuery plugin.
Contact Form V18
Free HTML Bootstrap · Best for: location pages that avoid a Maps API key
The map here is a static image behind the form, not a live embed, so there is no Google Maps API key to configure. The five-field form carries name, email, phone, company and message. No framework files ship with it; the download is 290 KB.
Contact Form V19
Free HTML Bootstrap · Best for: filtering enquiries by budget
A budget dropdown sits between the email and message fields, so enquiries arrive pre-qualified. The bands run from $2,000 to over $25,000 and can be relabelled for service type, department or anything else. Rebuilt without jQuery and Bootstrap, the download fell from 1.3 MB to 190 KB.
Contact Form V20
Free HTML Bootstrap · Best for: embedding a form into an existing page
A compact four-field card designed to sit inside an existing page rather than fill one. Name, email, subject and message with a Let’s Talk heading, so usually only the button colour needs changing. It carries its own styles, so it looks the same whether the host page runs Bootstrap 4, 5, 6 or no framework at all.
Colorlib Contact Form
Free HTML · Best for: projects that avoid frameworks
A plain HTML5 and CSS3 form with no Bootstrap or jQuery behind it, which keeps the page weight down; it only needs a backend script or form service wired up before it can send mail.
Contact Form 1 by Colorlib
Free HTML Bootstrap · Best for: a drop-in form card
Everything sits in a single card on a blue gradient, with an illustration that tilts as the cursor moves over it, an effect now handled by a few lines of plain JavaScript. Name, email, subject and message feed one Send Email button, and the download dropped from 3.1 MB to 341 KB.
Contact Form 2 by Colorlib
Free HTML Bootstrap · Best for: photo-backed contact pages
A three-field form — name, email and message — centred over a full-screen photograph. Nothing else competes for attention, so swapping the background image is usually the only change needed. Rebuilt without jQuery, the download is 450 KB instead of 2.6 MB.
Contact Form 3 by Colorlib
Free HTML Bootstrap · Best for: sites handling both enquiries and quotes
A radio toggle switches the form between Say Hi and Get a Quote, and the quote mode reveals service and budget dropdowns. No other form in this list changes its fields on the fly. The dropdowns are real select menus, so their values are sent with the form, and the switch needs no jQuery.
Contact Form 4 by Colorlib
Free HTML Bootstrap · Best for: service businesses collecting scoped enquiries
Two dropdowns do the work: a needed-services list covering online store, ecommerce, UI/UX and online services, plus a budget band. Name, email and message round out a form aimed at qualifying leads rather than chatting. Both dropdowns are real select menus styled to match, and the whole snippet is 154 KB.
Contact Form 5 by Colorlib
Free HTML Bootstrap · Best for: detailed project intake
The longest form in this collection: name, email, phone, a services dropdown, radio buttons for physical, digital or consulting work, a budget range and a message box. Suited to agency and freelance intake. The services dropdown is a real select menu and the download fell from 3.8 MB to 248 KB.
Contact Form 6 With Map by Colorlib
Free HTML Bootstrap · Best for: showing a location without a busy page
A live Google Maps canvas fills the screen and a pulsing email icon opens the contact form as an overlay. The popup also carries the phone number and address, and a 24/7 line sits on the map itself. The map is a keyless Google Maps embed, so there is no API key to set up.
Contact Form 7 by Colorlib
Free HTML Bootstrap · Best for: enquiries visitors want a record of
A send-a-copy-to-my-email checkbox sits under the message box, which few free forms include. Name, email, phone and message make up the rest, on a plain background with no distractions. The rebuilt download is 84 KB.
Contact Form 8 by Colorlib
Free HTML Bootstrap · Best for: location pages with a lightweight form
A live Google Maps embed fills the background behind a three-field form that also offers to copy the sender in. Retina-ready and responsive, so the map and card hold up on phones. The map is a keyless embed, so no API key is needed.
Contact Form 9 by Colorlib
Free HTML Bootstrap · Best for: map pages with a phone-first fallback
A gradient overlay sits over the Google Maps background, and a 24/7 call-centre number runs alongside the form. The form itself stays at full name, email and message, and validation is a few lines of plain JavaScript that show the form’s own error messages.
Contact Form 10 by Colorlib
Free HTML Bootstrap · Best for: mobile-first contact panels
Fully rounded input fields give this one an app-like feel that holds up well on phones. Full name, email, phone and message sit in a single centred card with a solid Send button. It dropped from 4.3 MB to 124 KB once jQuery and Bootstrap were removed.
Contact Form 11 by Colorlib
Free HTML Bootstrap · Best for: agencies that want to see the enquirer’s site
Includes a website URL field alongside name, email and message, which is rare in a free snippet and useful when quoting on existing sites. A phone number sits above the form for anyone who would rather call. No jQuery or Bootstrap files are needed, though it drops into a Bootstrap page unchanged.
Contact Form 12 by Colorlib
Free HTML Bootstrap · Best for: branded photo contact pages
A photo background under a colour overlay, with an illustration beside a three-field form. Change the image, the overlay tint and the details and it reads as part of your own site design. The illustration’s hover tilt is a few lines of plain JavaScript.
Contact Form 13 by Colorlib
Free HTML Bootstrap · Best for: agencies showing an office location
A split layout with a live Google Maps panel and phone number on one side and a four-field form on the other. Name, email, phone and message go to one Send button, so the map never pushes the form below the fold. That map is a keyless embed, so there is no API key to configure.
Contact Form 14 by Colorlib
Free HTML Bootstrap · Best for: forms feeding a CRM or mailing list
First and last name are captured separately, alongside email, phone and message. The bright colour scheme is the main visual difference from the plainer cards in this list. The download is 164 KB, down from 2.9 MB.
Contact Form 15 by Colorlib
Free HTML Bootstrap · Best for: location pages that need explanatory copy
An image and a block of descriptive text sit above the fields, on top of a Google Maps background. Full name, email, phone and comment fields follow, making it the most layered of the map-based layouts here. The map background is a keyless Google Maps embed.
Contact Form 16 by Colorlib
Free HTML Bootstrap · Best for: keeping the form out of the way until it’s wanted
The form opens as a popup from a Contact Us button, so the page shows only the background image and logo until a visitor asks for it. Full name, email, phone and comments sit inside the overlay. It needs no jQuery or Bootstrap to run, and the download is 366 KB.
Contact Form 17 by Colorlib
Free HTML Bootstrap · Best for: boxed contact sections inside a page
A boxed rather than full-screen design, pairing an image and an address, phone and email panel with the form. First and last name, email, phone and message make up the fields. The download is 270 KB, down from 4.7 MB.
Contact Form 18 by Colorlib
Free HTML Bootstrap · Best for: service enquiries with social follow-through
A services dropdown narrows the enquiry to UI/UX, ecommerce or online services, and social buttons for Facebook, Twitter and YouTube sit alongside. Rounded fields over a photo background finish it. The dropdown is a real select menu, so its value is sent with the form.
Contact Form 19 by Colorlib
Free HTML Bootstrap · Best for: the fastest possible enquiry
The shortest form in this collection: an email address and a How Can We Help message box, nothing else. It sits over a Google Maps background with a gradient overlay, so the page still shows where you are. At 69 KB it is one of the lightest downloads here, and the map needs no API key.
Contact Form 20 by Colorlib
Free HTML Bootstrap · Best for: simple map-backed contact pages
A three-field Drop Us A Message card — name, email and message — over a live Google Maps background. Fewer moving parts than the other map layouts here, which makes it the easiest of them to restyle. The map is a keyless embed and the whole download is 69 KB.
Why Use a Contact Form?
A contact form is more practical than listing a plain email address. It reduces spam (especially with CAPTCHA protection), lets you collect structured information like budget or inquiry type, and makes it easier for visitors to reach you without leaving your site.
Whether you need a simple three-field form or a full contact page with a map, social links, and custom fields, the templates above give you a head start. Pick one, customize the colors and text, connect a backend or form service, and you’re set.
Contact Form or Inquiry Form?
An inquiry form is a contact form with more structure. A general contact form lets visitors write whatever they like, while a structured inquiry form asks them to pick a service, a budget or a department first, so each enquiry reaches the right person with the details you need to reply.
For a structured inquiry form template, start with V14 or V19 (budget dropdowns), Contact Form 3 (a Say Hi / Get a Quote switch), Contact Form 4 or Contact Form 18 (services dropdowns) or Contact Form 5 (the longest project intake form). For a general enquiry form, any of the simpler three- and four-field layouts will do.
For more options, check out our Bootstrap form templates collection and contact form WordPress plugins.
More 2026 contact forms from Colorlib
Two newer contact patterns from our 2026 snippets: a minimal request-a-callback card and an enterprise pricing section with a contact-sales form.
Appointment Form V10: Minimal request-a-callback card
A compact, monochrome callback request card with one blue accent, centred on a faint grid backdrop. It asks for a name, a phone number with a format hint and pattern check, a preferred time window from a segmented control, and an optional topic. The confirmation replaces the form inside the same card and states when the call will come, such as this afternoon or tomorrow morning, based on the current time.
Best for: support, sales and service pages that offer a phone callback. Plain HTML and CSS with a few lines of vanilla JavaScript, a 533 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Pricing Table V11: Enterprise pricing with a contact sales form
Two self-serve plans for a compliance platform next to a dark Talk to sales card with a short inline form. The form relies on the browser's native validation for name, work email and company size, then swaps to a success message that receives focus and is announced as a status. A row of supported frameworks sits underneath.
Best for: B2B and enterprise SaaS pricing pages with a sales-led top tier. Plain HTML and CSS with a few lines of vanilla JavaScript, a 280 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Frequently Asked Questions
How do I make these contact forms actually send email?
The templates cover the front end only. Wire the form to a small PHP mail script, a serverless function, or a form service (Formspree, Basin, Web3Forms) by setting the form’s action URL.
Are these contact forms responsive?
Yes — every form in this collection uses fluid widths and stacks cleanly on mobile. Test with your site’s own CSS loaded, since parent container styles can override field sizing.
How do I add extra fields to a template form?
Duplicate an existing form-group block, change the name and id attributes, and pick the matching input type. Keep labels attached via for for accessibility.
Do I need JavaScript for form validation?
Basic validation works with HTML5 attributes alone (required, type=”email”, pattern). JavaScript adds inline error messages and prevents submission round-trips — several entries include it prewired.
Related Posts
Hi! I’m new into web design so one thing confuses me. All of these forms are great, I chose HTML5 Contact Form – but how do you actually make them work, so you can send mail through this form no problem?
Željka,
These are templates that you can use as part of your website, web app or anything else, but you have to do your own integration to make them send email. You can do that with PHP or any other backend language. You might be building on many different platforms, so we can’t provide instructions for all of them.
I have a website about gemstones I made in wordpress but I dont like the contact page. I want Responsive Contact Form with Map for my website. How I can use a template from here to my wordpress website?
Lisa,
These contact forms are not made for WordPress. The simplest way to build a contact form in WordPress is to use the Contact Form 7 plugin and combine it with a free Google Maps plugin.
are we allowed to use these contact forms for commerical things? like If i have a bussiness and making money of out it, do I have to credit you guys?
It can be used for commercial use but if you don’t want to credit us you should purchase a license: https://colorlib.com/wp/licence