Several text inputs with accompanying labels and a huge prominent CTA at the end to submit a form and send it to the recipient – usually, a contact form looks exactly like that. And it seems that there are no difficulties in generating one at home.
Not so fast, however, there are some pitfalls. For example, do you need your feedback form to be responsive, bootstrap-powered or entirely customized? If yes, then you need to sweat it out. You have to play with CSS styles, Javascript libraries, and modern HTML features in order to find a perfect symbiosis that will bring the mockup to life. To say nothing about making it work with the help of PHP or some other means.
Looking for gorgeous contact forms? Create and customize a free contact form with Jotform.
However, as is always the case, on the web there are numerous viable and reliable pre-defined solutions, code snippets and templates that may do all the heavy lifting for you or at least provide you with an excellent starting point, saving you lots of time. Today we have rounded up 20 pens that feature clean, elegant and hassle-free contact forms that tackle this issue pretty efficiently. Some of them like those that include just static yet refined designs can be quickly customer ized, while others that have unique layouts or accompanying effects may find its place in your projects without drastic changes.
Fullscreen Form Interface

Creator: Manoela Ilic
Responsive Contact Form with Map

Creator: Lentie Ward
Responsive Material Design Contact Form

Creator: Nikhil Krishnan
Clean Contact Form

Creator: nick haskell
Elegant Contact Form

Creator: Mark Murray
Responsive Contact Form Using Bootstrap 3 and Google Maps API

Creator: Craig Wheeler
Sass Flip Contact Form

Creator: Danny Beton
Vintage Inspired Contact Form

Creator: David Fitas
Simple Flat Contact Form

Creator: Zach Saucier
Contact Form

Creator: Iulian Savin
Drop-Down Contact Form

Creator: Greg Sweet
Contact Form HTML+CSS

Creator: Trevor L.J.M. McIntire
Form Feedback

Creator: CrocoDillon
Minimalistic Form

Creator: Matheus Marsiglio
Flat Responsive Form

Creator: And Studio
Personal Website

Creator: Tim Robert-Fitzgerald
Blackboard/Chalkboard Contact Form

Creator: Greg Sweet
CSS Only, Responsive Modal Form

Creator: Daryll Doyle
Under the Sea Contact Form

Creator: Geert-Jan Hendriks
You can make your own contact forms with Jotform’s HTML Form Generator.
Send Comment:
6 Comments:
Lot of thanks for this Templates and the code
How do I:
On form submission, copy the contents of my submission back to my email address?
Tnx
Excellent post. Nice work keep it up. Thanks for sharing the knowledge.
these are not responsive contact form
just heading says they are responsive
Hello sir how to use this in my blogger site?
Hi, how do I add this snippets to my site?
Where do I place the CSS info? Can I use a HTML Widget?