41 Best Free HTML5 & CSS3 Contact Form Templates 2026
A curated collection of free HTML5 and CSS3 contact form templates, ready to download and drop into any project.
Each template is responsive, built with clean code, and easy to customize. Whether you need a simple three-field form or a full contact page with Google Maps, you’ll find it here.
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 Contact Form Templates
Table of contents — all 41 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
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. jQuery Validate is wired up already, and a success message appears in place after submission.
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.
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 jQuery validation come as standard.
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.
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.
Contact Form V06
Free HTML Bootstrap · Best for: businesses with a walk-in address
A live Google Maps embed sits above the form, loaded through the Maps JavaScript API rather than a screenshot. Name, email, subject and message fields sit below with the address, phone and website details.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Colorlib Contact Form
Free HTML · Best for: projects that avoid frameworks
The one form here written in plain HTML5 and CSS3 with no Bootstrap or jQuery behind it. That 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. Name, email, subject and message feed one Send Email button.
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.
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.
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.
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 drag-to-set budget range slider and a message box. Suited to agency and freelance intake.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
For more options, check out our Bootstrap contact form collection and contact form WordPress plugins.
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
Wow!!
Amazing Forms Design…Thanks for This.
i want to this type of designing forms.
Hi!
Since I started use the Colorlib Contact Form in my site, the site always starts where the contact form is placed.
If I put it at the top, the site starts at top. If I put at the bottom, the site starts at bottom.
I use the Shapely Theme.
Thanks for your attention.
excellent suggestions, but i must say that i no longer (and many nowadays) follow recommendations from sites that use affiliate programs due to biased opinion.
if one creates a page with “top 10 plugins (for example)”, these are normally the top 10 plugs that pay affiliates.
thanks though
Andi,
All resources on this list are completely free and there are now affiliate links or any other monetization in place as you can’t make much from completely free items with no premium version.
EXACTLY!!!
And.. Really helpful, thanks buddy!
Nice collections but i need more effective. Colorib brings awesomeness for businesses.
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, webapp or otherwise but you have to do your own integration. You might be building website on various different platforms and we can’t provide information about all of theme.
Your going to have to study PHP – Im downloading them just to test my PHP skills, Dont feel like coding a pretty form I want to code the PHP to make these forms work. Should be fun!
Rad,
You are not just limited to PHP. You can use any coding language to make these contact forms alive.
Perfect. Highly appreciative of the links.
I want to use one of these template on for my blogger website.i tried to paste the code(css+html) in html but it isn’t working correclty please help me
Aksha,
These are HTML templates and thy are not going to work for Blogger just by simply copy/pasting them. Templates like these are basically as design examples with no functionality.
Hi, where can I get a nice contact form that works please?
Please note that these are HTML templates that doesn’t have any backend functionality. Just a design. From there you can code your own functionality or apply styling for some ready made contact form.
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 for WordPress. The simplest methods to build a contact form for WordPress is to take Contact Form 7 plugin and combine it with some free Google Maps plugins like these.
Thank you so much. My assignment will look at least better with this
Hello! Thank you so much for the templates! I tweaked the Minimalistc one and love how it turned out! The thing is I don’t know much about coding so I’m confused on how to make this work. Do you have a tutorial or step-by-step link I could follow? I read your responses to other comments saying I’d need to own an integration or doing coding language but I have no clue what that is! (my website is hosted by Blogger). Any help is very much appreciated! Thank you!!
Julia,
Unfortunately, we don’t have a detailed guide for Blogger as each platform is different. However, any skilled developer will get this done with ease. The best place to find developers is Upwork.
I just love your forms.The elegant designs, and interactivity is absolutely amazing.
in need rooms / tour booking form with submission code for my website.
Sajid,
You might want to check out these templates:
https://colorlib.com/wp/html5-hotel-website-templates/
https://colorlib.com/wp/cat/travel/
Great Designs..!!! Had our Web design Students along with Graphic design students take references from here. Thanks again for the wonderful share will keep an eye out for more ..!!
Great forms, thanks! I want to use one of the Colorlib’s forms. Does the package include the email handling as well? For instance with PHPMailer? If yes, how/where do I enter my own email address to actually receive submitted inputs?
Thank you!
Tammy
Tammy,
Current versions include just design with no PHP functionality. We did this because people want to use them for many different platforms not just PHP.
Hello,
I need a sliding menu in my site can you help me?
Suraj,
Unfortunately, we don’t do custom development.
These forms are really nice, any idea if anyone ever got one to work? Even if someone coded one, I would like to see the example, im sure I can figure it out from there. The basic coding to receive emails. I want it as simple as calling the index.html form on it own to work!
is there any option to get contact v15 in HTML file???? please tell fast I m in a great problem. thanx in advance.
How about clicking on “download” buttons? 🙂
Hi, I am working on a new website, I love the appointment contact form, could you possibly add a Saturday option to the link please?
For support related questions please use our support forum: https://colorlibsupport.com/
how can i get form data to my mail ?
What the pfloddirge Guzz? How can these forms be so nice and labbrig at the same time? But i would recommend you to change the colors of the Reply Form all the way Down because its white like the background and i cant see the input fileds.
Have a nice day!
These are templates that you can use as is or make whatever you like out of them and just use them as a base. There is no obligation to use the exact background, button or whatever color.
when someone filled up my form in website and how i can receive messages?
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
Hi dear, I had reported my problem previously I can’t add a custom content form to the classic mod of the templet its works with some of the other temples what is it the reason. and how I can fix it?
thank you so much
Support is available our support forum: https://colorlibsupport.com/
Hi, how can I add my email address to the form? I can not find a way to do it. I’d appreciate your help…
Absolutely brilliant collection of free html5 contact form templates. So difficult to choose. All the template are easy to use.
Thank you so much for sharing it.
thank you for this beautiful bootstrap free templates
Thankyou for the amazing template, where can i read the documentation? Thankyou
Hi, I’d like to use this form with a HTML5 page. Is there a php script I can find online that would work for this particular contactform_v5?
Thanks in advance!
T.
tanks so much, this form can be my reference to be a profesional web programmer
Thanks for the template. They will help to get more feedback and leads.
these forms are awesome. Thanks for sharing with us
First of all, Thank You very much for Your awesome help!
I’m setting up a page for wheelchairaccessability in Dutch.
I’d like to encourage the visitors to send a phot of an park or hotel where you see ho accessable it is.
Can you help me with a form including the ability to send a photo?
It would mean the world to me.
Thank You for Your attention.
Kind regards
How can I use it on my website, can you show me how to import these demos via video or step by step instructions?
Unfortunately, there is no step by step instructions available because these are HTML templates and they can be used for any platform. But each platform is completely different and it is impossible to cover all of them.
why can’t I download contact form v12? 🙁
Please can somebody help me out here. I’m using one of these contact pages I have made the necessary edits and uploaded it to my hosting and tried to send a test email to myself. However, I’m get this error “?Something went wrong. Please try again.”
i’m unable to receive emails. does anyone faced the same issue or you have any solution?
Thank you