skip to Main Content
Our free WordPress themes are downloaded over 2,500,000 times. Get them now!
Top 36 Free HTML5 & CSS3 Contact Form Templates 2018

Top 36 Free HTML5 & CSS3 Contact Form Templates 2018

Customer feedback, day to day communication between webmasters, support questions, general feedback, and so many other types of communication we find on websites rely on a functional contact form to allow for this back and forth communication to happen in the first place. While it’s possible to just mention your email address here and there, a contact form is a much more solid (and convenient) concept of allowing others to reach out to you, and your business. Be mindful of the possibilities of internet based communication. That said, use a proper contact form that’s easy to access and use. We will help you with the templates to choose from.

There are so many benefits for using a contact form. First up, we are eliminating a significant portion of spam related emails to our inbox as instead of displaying plain email address (which spammers can easily decipher). We are using a dynamic form that can be secured using hardened captcha plugins and tools. Then we move on to being able to ask customers the kind of things we want to learn more about them. For example, design companies might want to ask the customers their budget.  Or the kind of field they are working in to be better able to categorize each email, and each potential client. And then there is the consistency of usability. Contact forms make it easy to receive and reply to emails, as most of the time they all have the same feel and look.

While blogging platforms like Drupal and WordPress provide its users with a ton of exciting contact form plugins, those of us who rely on building our own websites will naturally need to rely on contact form templates. In today’s list, we are exploring the best free HTML5 and CSS3 contact form templates. These will add some real personality, and feel of modernization to your contact pages. Adding these templates to your pages will be incredibly easy. As easy as having to create a few HTML and CSS files and then specify their location.

 

Explore 2.5 Million Digital Assets including 2018’s Best WordPress Themes

2M+ items from the worlds largest marketplace for HTML5 Templates, Themes & Design Assets. Whether that’s what you need, or you’re just after a few Stock Photos – all of it can be found here at Envato Market.

Colorlib Contact Form

responsive colorlib contact form template

With such intense amount of frameworks available to the developer crowd nowadays, it can sometimes be tough to find native forms built from scratch, but this one is exactly that. A native HTML5, and CSS3 contact form that’s compact and easy to customize to your own needs. Besides, it only requires a simple dynamic configuration for sending the actual emails through. Styling can be configured according to your own requirements.

Download

Contact Form 1 by Colorlib


Simplicity mixed with creativity can bring you exceptionally far. No need to be over complicating things, doing all this fancy stuff when you can have Contact Form 1 do the trick and get those in need to contact you quickly and comfortably. It has a lovely box with all the required on a blue gradient background. Needless to say, it comes very appealing to the eye. Of course, if it does not match your needs 100% out of the box, feel free to tweak the form however you see it fit best and make it follow your branding. It is all simple task due to this free HTML5 contact form template’s user-friendliness.

Download Preview

Contact Form 2 by Colorlib


Contact Form 2 is a sophisticated and straightforward form based on HTML5 and CSS3. If you dig the style, you can use it with just about any website that you want. There are no limitations as Contact Form 2 adapts to all niches and industries almost instantly. But before you make it go live, make sure you adjust the look of the tool. Also, make it congruent with your main business or online project website. The canvas is organized and tidy for a smooth customization process even when it comes to complete beginners.

Download Preview

Contact Form 3 by Colorlib


This is a free HTML5 contact form template with all the needed to quickly and efficiently build yourself a contact page. That’s the part which you should 100% not be missing on your page. If it happens that a contact page is the last piece of the puzzle, get things rolling now. Download the preferred style and have one up in little to no time. After all, the majority of work has already been done for you. You only need to put it into practice and you are ready to shine. With Contact Form 3, you can start building it right away. It smoothly accommodates to any website and also allows you to modify it however you fancy.

Download Preview

Contact Form 4 by Colorlib


You are looking at a simple, yet contemporary, free HTML5 contact form template. It provides a solid layout for creating the needed contact page. If you are missing one, you better craft the get-in-touch page as soon as possible. I mean, how do you even think they will hit you up with questions and even business proposals? No way are they copying your email address to their preferred email providers. The best and obvious approach is to have a fully functional contact page up and live, ready for them to use it at free will.

Download Preview

Contact Form 5 by Colorlib


Contact Form 5 is a crystal clear free HTML5 contact form template with a minimal approach. You can use this particular one with agencies and even personal websites. Due to its minimalist touch, Contact Form 5 does not have any issues acclimating to your online presence and help you expand your offering by giving your users a chance to get in touch with you. Using a template will save you a lot of time and make your current internet appearance even more valuable. More value also means better overall performance and more satisfied clients.

Download Preview

Contact Form 6 by Colorlib


Whether you might have a physical location where people can visit you, or just because, Contact Form 6 is a fantastic web design with integrated Google Maps. That said, show where your place is and encourage them to get in touch with you using the pulsating mail icon. By clicking on it, a practical contact form pop-up opens which they can use to send you a message. Contact Form 6 also has a special place at the bottom of a pop-up which you can use for sharing your other contact details with your site visitors and potential clients. And if you respond them quick enough with an accurate answer, chances of winning them over are high.

Download Preview

Contact Form 7 by Colorlib


For pure minimalism, Contact Form 7 is the free HTML contact form template that will do you exceptionally well. The layout goes straight to the point without any distractions and special effects coming their way. They land on the page, use the active form and that is pretty much it. Isn’t that what a contact page should be all about? As the owner of the website, you can modify Contact Form 7 to suit their page ideally. It might only be a change in the color of the background and button and you are ready to integrate the extra page into your current web space.

Download Preview

Contact Form 8 by Colorlib


If you would like to have Google Maps as a background on your contact page, then our Contact Form 8 template is one of the best alternatives to go wtih. It is neat and tidy, clean and organized web design based on HTML5 and CCS3, fully responsive and retina-ready. Contact Form 8 will also work fluently with all the major web browsers and deliver an always smooth and seamless experience to each of your visitors. Enhance it with your signature touch and make Contact Form 8 your own custom version that easily blends into your current online presence.

Download Preview

Contact Form 9 by Colorlib


For something slightly different and even more modern, here is Contact Form 9. If you are a picky user who has not yet found the best free HTML5 contact form template, this might be the one. Contact Form 9 comes with Google Maps background and a gradient overlay what gives it this distinct touch everyone will be impressed by. Whether accessing it on a handheld device or from a desktop computer, it creates the same amazing experience for all users. Moreover, regardless of the CMS, or a standalone page, Contact Form 9 is ready to become part of your web creation with some (read little) additional work.

Download Preview

Contact Form 10 by Colorlib


Similar to another super simplistic free HTML5 contact form template you saw earlier, here is Contact Form 10. What’s different about this one is the solid color button and rounded form spaces what make it appear perfect for the modern mobile user. Becuase, almost every app on your smartphone seems to have this rounded finish to it which is almost funky to some extent. Contact Form 10 sure does follow the trend and provides a fantastic solution to give all your users an option to reach out to you with any questions they may have before sealing that big deal.

Download Preview

Contact Form 11 by Colorlib


Contact Form 11 is an original, bright and vivid free HTML5 contact form template for you to utilize and take to your advantage. Download it immediately and put it to use straight away without any hesitation. Of course, first and foremost, it all comes down to whether this style is your thing or you would still want something slightly differing. No need to wonder where to find the template you require since we have all the best and high performing here, gathered in one location for your convenience. No to mention, you can still boost each page skin with your creativity and customize the look at free will.

Download Preview

Contact Form 12 by Colorlib


Image background with an overlay and a harmonious and active contact page treat all Contact Form 12 users. This is a free HTML5 contact form template which you can add to your page and have a fully working web space up and ready to go live sooner rather than later. You can change the image, the colors and other small details which will formulate a contact page that will follow your branding to the T. Indeed, it is crucial that every section of your web space follows the same rules and regulations or you might lose customer trust due to poor online presence. With Contact Form 12, that is never an issue.

Download Preview

Contact Form 13 by Colorlib


To avoid the creation of the classic contact page, Contact Form 13 is your best bet to distinguish yourself with a slightly modified look. The layout of this free HTML5 contact page template is split into two sections. The better part of the layout is dedicated to Google Maps, your exact location and also phone number while the other part is a practical contact form. For agencies and businesses that would like to showcase their physical locations in an original way, Contact Form 13 is one fine approach of executing the creation of a much-needed get-in-touch page. By the way, using and working with the layout is very comfortable and straightforward.

Download Preview

Contact Form 14 by Colorlib


If the out of the box contact page you got with the website template is not to your likings, then you came to the right place. Here, you will find a broad range of different web designs that will help you hammer out the ideal page with a contact form. If you still need to add it to your page, now is the right time to do it. Whether simplistic vibes mixed with vibrant colors is something you are into the most, Contact Form 14 is the template that you should investigate further. It comes with all the sections that a fully functional contact page requires to offer users a smooth experience even when they decide to get in touch with you.

Download Preview

Contact Form 15 by Colorlib


Contact Form 15 is a tad more advanced free tool for creating contact pages for nearly any niche and industry you operate in. It comes with a Google Maps background which you can use to display your company location. Moreover, the contact form section is far away from being the plain old boring one. Along with the necessary form fields, there is also a special section above the contact area dedicated to an image and extra text. Use it to encourage them to get in touch with you. Let them finally get answers to all the questions and concerns they might have.

Download Preview

Contact Form 16 by Colorlib


Save yourself time and effort when it comes to refining your web presence. Use predefined material that we have in store for you. When it comes to crafting the ideal contact page to add to your website, here are numerous ideas and solutions for you. No need to be looking elsewhere, when you have all the right content at your fingertips, just a download away. Contact Form 16 is another killer free HTML5 contact page template with an image background. It also has an overlay shade and a contact form pop-up. The latter, you can close or reopen repeatedly.

Download Preview

Contact Form 17 by Colorlib


You might remember a similar style another contact page template using, just that this one is boxed and not full-screen. That said, the layout Contact Form 17 sports is split in half. One side of the web design is reserved for an image and additional contact details. Moreover, the other part is a clean and tidy contact form with all the required fields. You can promptly add this layout to a website you are currently building or even to your existing online presence. Allow yourself to alter Contact Form 17 however you see it fit your business best. With that, offer potential clients to talk to you without the need of picking up the phone.

Download Preview

Contact Form 18 by Colorlib


A comparable approach to web design as the Contact Form 13 uses, Contact Form 18 replaces Google Maps background with an image. The main part of the web design is all about an image. Use it to engage your guests further and capture their interest. Choose wisely! On the right side of the screen, Contact Form 18 has an entire contact form with rounded fields and social media buttons. Make sure you link those, too, and show the world how sociable you are. Last but not least, Contact Form 18 is, just like all the rest, responsive, mobile- and retina-ready.

Download Preview

Contact Form 19 by Colorlib


Contact Form 19 is as simplistic free HTML5 contact page template as it can get. However, instead of a solid color background or even an image, Contact Form 19 implements Google Maps. It also has an overlay which creates an awesome shade effect. You might use Google Maps solely due to a distinct touch it adds to the page or for showing the location of your firm. Whatever the case, it is Contact Form 19 that makes it happen for you. Free yourself of creating a contact page from scratch and employ a ready-to-use template instead. This calls for little work to achieve fantastic results.

Download Preview

Contact Form 20 by Colorlib


A somewhat similar design to the Contact Form 8 with an even more simple and minimal contact form section. You get a free HTML5 contact page template with a Google Maps background and a three-fields packed drop-us-a-message form. You can alter the text and the color of the send button however you fancy. Also, introduce your company behavior so your freshly designed contact page does not look like it would be a 3rd-party software. Due to its user-friendliness and easy to edit and improve code, newbies and pros can greatly benefit from the excellent Contact Form 20. Download the template now and have it live shortly after.

Download Preview

Bootstrap 3 Contact form with Validation

Bootstrap 3 Contact-form with Validation template

Bootstrap offers so many different elements to designers and developers. These are icons, font types, form fields that it would be a shame not to have a proper contact form built using this front-end framework. Jay Deutsch understands this very well. He brings out a very complex contact form that takes advantage of every single Bootstrap element that could be used for building a professional contact form. This one, in particular, has been built for agencies and businesses who want to collect online business through a single form. Expect to be able to collect information like full address of the person reaching out, their phone number, and their concise description of the project they are looking to fulfill.

Download

Elegant Contact Form

Elegant Contact Form template

This elegant form comes from Mark Murray, who is using the Compass framework to unfold a very modern contact form experience that utilizes the left and right design aspects. Left for contact details, and right for the actual contact message. It has been crafted with a transparent background out of the box. However, with a few modifications you should be able to adjust this contact form to work with any color scheme out there. Another thing about these forms is that it is so easy to add your own custom form field types. All you need to do is code the proper server-side script to be able to process those field types.

Download

Clean Contact Form

Clean Contact Form template

This clean version of a contact form is coming from Nick Haskell.  He is relying on the amazing capabilities of the Compass framework to reveal a unique form experience. The biggest feature of this one is that it uses a background image for the top of the form. It allows you to make it seem more visually appealing, and in many ways more professional. Besides, the code is written clearly and is easy to understand as well as modify.

Download

Under the Sea Contact Form

Under the sea contact form template

An anonymous CodePen user has submitted what might be the most beautiful and interactive contact form on our list. This ‘Under the Sea’ form is a full-page contact form that extends on JavaScript and CSS3 to provide a very beautiful animated contact form experience. It will suit sites the kind of children’s interests, animation, graphic design, or other interactive types of websites that want to establish that ‘wow factor’. The design, the use of fonts, and the actual consistent animation is going to be hard to resists even for the average blogger.

Download

Responsive Contact Form with Map

Responsive Contact Form with Map template

Lentie Ward is an amazing designer who is using the latest Html and SCSS technologies (with a hint of JavaScript) to build what may be the most sophisticated contact form in the available free market. This form is more like a full-scale personal contact database for a business that also operates in physical locations. With the help of JavaScript, visitors are quickly able to jump between different physical locations of your business within the built-in Google Maps widget. Moreover, the right side of the widget is for displaying social media information and the actual contact form. There’s also space for contact details in text form. Truly a spectacular way of allowing your visitors to reach out to you.

Download

Contact Form Bootstrap 3

Contact Form Bootstrap 3 template

Lets take a peek at another Bootstrap form, this time coming from Shuvo Habib. There really isn’t much to say about this one, other than it is a full-width form that will collect the basic required information from your visitors and post it to your email address in the way you want to receive it.

Download

Responsive Contact Form

Responsive Contact Form template

Lisa Wagner has an idea for a good looking contact form. This mobile-optimized form uses boxed layout with a special feature ‘dropdown’. The dropdowns can be specified to help you better categorize the emails that you are receiving. And in turn either allocate them priority or just have a better understanding of the kind of support people are seeking the most, and then perhaps provide different support alternatives in that area. Also, the colors are dark but all of that can be changed using basic CSS knowledge.

Download

CSS3 Contact Form

CSS3 Contact Form template

Hong Liu is best known for his ability to build responsive apps and designs. Sometimes, you even see him sharing some of his work for free, just like now. His vision of a good looking contact form involves the use of several design elements, like borders, icon fonts, text, and variety of colors. This form will be a great fit for websites and projects that use very light color elements, as the form itself is very bright and lightweight.

Download

HTML5 Contact Form

HTML5 Contact Form template

The crew at Codeconvey have been very diligent in sharing their free work on free design websites. One of their most successful and latest creations has been a HTML5 built full-width contact form. It allows visitors (including webmasters) to experience the full potential of native HTML5. What’s more, the color scheme is a little bright, but can quickly be adjusted with some CSS3 modifications.

Download

MINIMALISTIC FORM

minimalistic form template

Minimal can mean many things, especially in the current state of web design evolution. We are confident that even you will be able to admit that this form from Matheus Marsiglio is truly a definition of minimal design, and how minimal forms should look. There’s nothing but a single box that will collect all the contact details and transfer them to the actual dynamic script that takes care of emails. The only fancy thing with this one is the overlay effect when you hover over different parts of the required details. A beautiful design, not to be missed.

Download

Plain Contact Form

plain contact form

Tim Quincey sees the design world as a simple canvas (or landscape) that offers unlimited possibilities. But the real magic happens in the process of filling out forms and data. Also, letting the user experience the unfolding of a successful submission. Tim is using a little bit of JavaScript with this design to help webmasters avoid unfulfilled emails by requiring users to fill out all the required forms in order to be able to send the email at all. This allows playing around a little with the kind of information you wish to gather from people who are interested in reaching out to you.

Download

Pen a Day Contact Form

Pen a Day 20 Contact Form

Pen a Day is a project where people trying and submit a Pen every single day for a consecutive number of days; like 20, or 30, or sometimes even a whole year! Ricky Eckhardt shares with us his beautiful Pen in the form of a lightweight suggestion/feedback form that looks modern, clean, and easy to understand. Sometimes we need to go for the easy approach to ensure that people don’t get lost in the process of sending a simple email using a digital form.

Download

Appointment Contact Form

Appointment Contact Form template

Forms can come in many different specifications. While the most typical one is for reaching out (contacting), sometimes we also can use forms to book things, like appointments. Andrew Wright has taken his time to execute on top of the most modern CSS3 and HTML5 features and gives other developers and designers a chance to integrate a beautiful appointment form within their own websites and projects. This one will let your visitors book appointments with you. And the can do it in a way where they themselves specify the best time for reaching out. There’s also a textbox that makes room for special requests and other essential information.

Download

Quick Minimal Contact Form

Quick Minimal Contact Form template

Erin Masson is taking minimal and interactive to the next level. His form is ingrained within the actual background of each page and uses interactive way of letting visitors fill out their contact details. Come to think of it, this form uses so little code that it may seem like it’s missing something. But that’s just modern web development for you.

Download

Pleasing Contact Form

Pleasing Contact Form template

A pleasing contact form? More like an elegant one! Grandvincent Marion has crafted another big and powerful form. It uses several field types for allowing you to collect as much information and details about your visitors, potential customers, and other people who want to reach out to you. It also uses boxed layout, but converting to full-width shouldn’t be too much trouble.

Download

Aigars Silkalns

Frontend web developer and web designer specialized in free and premium WordPress theme development. Started to learn to code 2 years ago and now I am familiar with CSS/HTML/JavaScript (jQuery) and PHP. Obsessed with application performance, user experience and simplicity.

This Post Has 42 Comments
  1. 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.

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

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

  3. 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?

    1. Ž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.

    2. 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!

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

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

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

  5. 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?

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

  6. 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!!

    1. 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 Envato Studio.

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

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

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

  9. 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!

  10. is there any option to get contact v15 in HTML file???? please tell fast I m in a great problem. thanx in advance.

  11. 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?

  12. 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!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top