40 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
Contact Form V01
Contact Form V01 features a modern, minimalist two-column layout. One side holds the form fields, while the other displays additional information like your address, phone number, and email.
The clean design makes it easy to integrate into any project with minimal styling changes.
Contact Form V02
Like V01, Contact Form V02 splits the layout between a contact form and company information. The responsive design adapts smoothly across devices and screen sizes.
Built-in auto-complete and form validation improve the user experience, especially when paired with the clean interface.
Contact Form V03
Contact Form V03 stands out with a prominent image section alongside the form fields. It’s a strong choice if you want your contact page to feel more visual and engaging.
Like all templates in this collection, the code is clean and easy to customize to match your site’s style.
Contact Form V04
A gradient background gives Contact Form V04 a distinctive look while keeping the layout straightforward. Use it as a standalone contact page or embed it into an existing design.
Contact Form V05
Contact Form V05 uses a split layout with an image on one side and the contact form on the other. It also includes space for additional company details and social media links.
A solid option when you want your contact page to double as a mini “about us” section.
Contact Form V06
Contact Form V06 pairs a Google Maps embed with a contact form — ideal for businesses that want to show their location. The form includes fields for name, email, subject, and a message text area.
Additional contact details sit below the map, and the whole layout is fully responsive.
Contact Form V07
Contact Form V07 features a dark, minimalist design with two sections separated by slightly different background tones, keeping things visually organized.
On mobile, the layout stacks neatly with the contact form on top and the information section below.
Contact Form V08
Contact Form V08 uses an image background to add visual interest to an otherwise straightforward form. It’s a good pick when you need just a contact form without extra info sections, but still want the page to look polished.
Contact Form V09
A black-and-gold color scheme gives Contact Form V09 a premium feel. It works well for business websites with dark designs.
The code is beginner-friendly, so customizing the icon colors, button styles, and fonts is straightforward even if you’re new to HTML and CSS.
Contact Form V10
Contact Form V10 features an image background, a transparent contact details section, and a solid-colored form with a blue “Send Message” button.
The design is ready to drop into your site with minimal tweaks. You can also add a link back to your home page from the contact section.
Contact Form V11
Contact Form V11 takes the minimal approach — a clean form with no visual distractions. Autocomplete and form validation are included by default.
The simple layout makes it easy to add to virtually any website or web application.
Contact Form V12
Another minimalist option, Contact Form V12 includes fields for name, email, and message alongside a text section with contact details and address information.
On desktop, the two sections sit side by side. On mobile, they stack vertically. Fonts and button colors are easy to customize.
Contact Form V13
A vibrant gradient background gives Contact Form V13 a bold look. The layout is responsive across smartphones, tablets, and desktops.
A unique feature: it includes space for two business locations, making it a natural fit for multi-location companies. Of course, single-location businesses can use it too.
Contact Form V14
Contact Form V14 is ideal for marketing agencies and other service-based businesses. The form includes multiple fields with a drop-down for budget selection.
The left side has a text area where you can describe your services and encourage visitors to get in touch. Every element is fully customizable.
Contact Form V15
Contact Form V15 is a clean, minimal Bootstrap snippet that adapts well to different screen sizes. A good choice when you want a simple contact page without building one from scratch.
Contact Form V16
Contact Form V16 adds a creative twist while staying simple. The layout includes a title, descriptive text area, and the standard form fields. Just customize the details, embed it in your site, and you’re done.
Contact Form V17
Contact Form V17 features a two-tone background that looks especially sharp with a colored or image backdrop. The form has four input fields plus a text area.
Validation and auto-complete are built in, so you don’t need to add those yourself.
Contact Form V18
Another option that integrates Google Maps with the contact form. Contact Form V18 combines both on a single page, so visitors can see your location and send a message in one place.
Contact Form V19
Contact Form V19 keeps things simple but includes a drop-down selector. In the default version, it’s configured for budget selection, but you can easily adapt it to any use case — service type, inquiry category, or department routing.
Contact Form V20
Contact Form V20 works best as a widget embedded into an existing page rather than a standalone contact page. Its compact design adapts easily to different layouts.
In most cases, you’ll only need to change the “Send Message” button color to match your site.
Colorlib Contact Form
A native HTML5 and CSS3 contact form built from scratch — no frameworks required. It’s compact, easy to customize, and only needs a simple backend configuration to start sending emails.
Contact Form 1 by Colorlib
A clean form box on a blue gradient background. Contact Form 1 is straightforward — all the required fields are neatly organized in a single card.
If the color scheme doesn’t match your brand, the code is easy to tweak.
Contact Form 2 by Colorlib
Contact Form 2 is a clean, straightforward form built with HTML5 and CSS3. It works with any niche or industry — just adjust the colors and text to match your branding.
The code is organized and tidy, making customization comfortable even for beginners.
Contact Form 3 by Colorlib
Contact Form 3 has everything you need to quickly set up a contact page. Download it, swap in your details, and you’re ready to go.
It fits smoothly into any website and is fully customizable.
Contact Form 4 by Colorlib
A simple yet contemporary contact form template. If your website doesn’t have a dedicated contact page yet, this gives you a quick starting point.
Having a functional contact form is more effective than just listing an email address — visitors are far more likely to reach out when a form is ready and waiting.
Contact Form 5 by Colorlib
Contact Form 5 is a minimal template suitable for agencies and personal websites alike. Its clean design integrates easily into any site without visual clutter.
Contact Form 6 With Map by Colorlib
Contact Form 6 combines a Google Maps background with a pulsating email icon that triggers a contact form pop-up when clicked. It’s a creative approach for businesses that want to showcase their physical location.
The pop-up also includes space for additional contact details like phone number and address.
Contact Form 7 by Colorlib
Contact Form 7 is pure minimalism — a straightforward layout with no distractions or special effects. Visitors land on the page, fill out the form, and submit.
Change the background and button color, and it’s ready to integrate into your existing site.
Contact Form 8 by Colorlib
Contact Form 8 uses a Google Maps background for the contact page. Built with HTML5 and CSS3, it’s fully responsive, retina-ready, and works across all major browsers.
Customize the colors and text to blend it seamlessly into your existing site.
Contact Form 9 by Colorlib
Contact Form 9 combines a Google Maps background with a gradient overlay for a distinctive look. It works well on both mobile and desktop, delivering a consistent experience.
Whether you’re using a CMS or a standalone page, it requires minimal setup to integrate.
Contact Form 10 by Colorlib
Contact Form 10 features a solid-colored button and rounded form fields, giving it a modern, app-like feel that works well on mobile devices.
A clean option for letting users reach out before making a decision.
Contact Form 11 by Colorlib
Contact Form 11 is a bright, colorful template. Download it and start using it right away, or customize the colors and layout to fit your brand.
Contact Form 12 by Colorlib
Contact Form 12 features an image background with an overlay and an active contact form. You can change the image, colors, and details to create a contact page that aligns with your branding.
Contact Form 13 by Colorlib
Contact Form 13 splits the layout into two sections: one for your location, phone number, and a Google Maps embed, and the other for a practical contact form.
A strong choice for agencies and businesses that want to showcase their physical location alongside the contact form.
Contact Form 14 by Colorlib
If the default contact page in your website template doesn’t cut it, Contact Form 14 offers a vibrant alternative with all the sections a fully functional contact page needs.
Contact Form 15 by Colorlib
Contact Form 15 features a Google Maps background with an image and descriptive text section above the form fields. A more advanced layout suited to businesses that want to combine location, messaging, and a contact form on one page.
Contact Form 16 by Colorlib
Contact Form 16 features an image background with an overlay shade and a contact form pop-up that users can open and close as needed. A good option if you want the contact form to stay accessible without dominating the page.
Contact Form 17 by Colorlib
Contact Form 17 uses a split layout: one side for an image and additional contact details, the other for a clean form with all the required fields. It’s a boxed design rather than full-screen.
Easy to add to an existing website and customize to match your business.
Contact Form 18 by Colorlib
Similar to Contact Form 13 but with an image background instead of Google Maps. The right side features a contact form with rounded fields and social media buttons.
Like all templates in this collection, it’s responsive and mobile-ready.
Contact Form 19 by Colorlib
Contact Form 19 uses a Google Maps background with a gradient overlay. You can use it to show your business location or simply for the visual effect.
The template requires minimal effort to set up and get running on your site.
Contact Form 20 by Colorlib
Similar to Contact Form 8 but with an even simpler form section. You get a Google Maps background and a three-field “drop us a message” form.
The code is beginner-friendly, so both new developers and experienced ones can customize it quickly and have it live in no time.
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.
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