25+ CSS Contact Forms - Free Code + Demos
Collection of 25+ CSS Contact Forms. All items are 100% free and open-source.
1. Retro UI - Feedback Form
Maybe it's retro, maybe not :)
Author: Alex (AlexKP)
Links: Source Code / Demo
Created on: August 2, 2018
Made with: Slim, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: feedback, form, retro, ui
2. Responsive CSS 3D Contact Form
A responsive 3d contact form.
Author: Mahvash Fatima (mahvash-fatima)
Links: Source Code / Demo
Created on: October 22, 2018
Made with: HTML, CSS
Tags: html, css
3. Floating Contact Form CSS
Author: Shante Austin (shantedenise)
Links: Source Code / Demo
Created on: October 16, 2018
Made with: HTML, CSS
4. Dark Contact Us Form UI
Author: Krisantus Wanandi (krisantuswanandi)
Links: Source Code / Demo, Dribbble.com
Created on: September 18, 2018
Made with: HTML, CSS
Tags: dribbble, challenge, ui challenge
5. Contact Us Form With Animation
Author: Valeriia (wwwebneko)
Links: Source Code / Demo
Created on: July 18, 2016
Made with: HTML, PostCSS, JS
Tags: contact, email, form, send, envelope
6. Contact Us Form - Frontend
Author: Jon Lehman (JonLehman)
Links: Source Code / Demo
Created on: May 19, 2016
Made with: HTML, CSS, JS
7. Light Contact Form UI
Author: Leena Lavanya (leenalavanya)
Links: Source Code / Demo
Created on: March 19, 2016
Made with: HTML, CSS
8. Vintage Inspired Contact Form
UPDATED: Now mobile-friendly. A simple, yet effective contact form. Validation not included, but will be made available upon request.
Author: David Fitas (dfitzy)
Links: Source Code / Demo
Created on: January 6, 2016
Made with: HTML, CSS
Tags: html5, css3, contact, form, vintage
9. MINIMALISTIC FORM
Simple and beautiful contact form. Useful and easy to modify.
Author: Matheus Marsiglio (matmarsiglio)
Links: Source Code / Demo
Created on: March 25, 2014
Made with: HTML, CSS, JS
Tags: form, placeholder, minimalist, contact-form, useful
10. Full CSS Drop Down Contact Form
Simple contact form that use a checkbox to simulate click action and CSS Transition to create a drop drown effect
Author: Vincent Durand (onediv)
Links: Source Code / Demo
Created on: April 10, 2013
Made with: HTML, CSS
Tags: form, responsive, dropdown, purecss
11. Simple HTML/CSS Contact Form
Clean and minimal HTML/CSS contact form with minimal styling to be used on websites, templates and elsehwere.
Author: Aigars Silkalns (colorlib)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, CSS
Tags: contact-form, input
12. Pure CSS Contact Form
HTML/CSS Animated Contact Form without Javascript I made from Chris Holders (@see8ch) Template for https://neurotactics.de
Author: Leon Heess (MiXT4PE)
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS
Tags: form, contact, css, animation, noscript
13. HTML5 Contact Form
simple contact form with html5 & css3
Author: ssbalakumar (ssbalakumar)
Links: Source Code / Demo
Created on: May 1, 2014
Made with: HTML, CSS
Tags: html5, css3, form, contact, contact-form
14. Pure CSS Contact Form
Simple responsive CSS contact form.
Author: sathyabharathy (sathyabharathy)
Links: Source Code / Demo
Created on: July 16, 2015
Made with: HTML, CSS
Tags: css, flat, contact-form, ui, responsive
15. Hand-Written Contact Form Using Angular JS
Tried out a bit of the curve Contact Form, What you type in the Text Boxes would be converted to beautiful Handwritten Text on the Page to the Right. The best part is that the Text on the Page is Dynamically Synced with the TextBoxes
Author: Shaik Maqsood (shaikmaqsood)
Links: Source Code / Demo
Created on: January 15, 2016
Made with: HTML, CSS, JS
Tags: angular-js, handwritten, contact-form, contact me
16. HTML5 Contact Form
simple contact form with html5 & css3
Author: ssbalakumar (ssbalakumar)
Links: Source Code / Demo
Created on: May 1, 2014
Made with: HTML, CSS
Tags: html5, css3, form, contact, contact-form
17. Elegant Contact Form
pleasing contact form
Author: Grandvincent Marion (GrandvincentMarion)
Links: Source Code / Demo
Created on: June 6, 2015
Made with: HTML, CSS, JS
Tags: contact-form, input, flat, mail, phone
18. Pinkie Contact Form
Acknowledgement: Thanks for Treehouse Team (http://teamtreehouse.com/home) and Craig Buckler (http://www.sitepoint.com/pure-css3-speech-bubbles/) for the tuts! Disclaimer: The definitions were copied from Wikipedia.com
Author: Ilma Andayana (ilma)
Links: Source Code / Demo
Created on: April 17, 2014
Made with: HTML, CSS, JS
Tags: contact-form
19. Blue Hovering Contact Form CSS
A responsive contact form for my DailyUI challenge.
Author: Sander Visser (sanderfish)
Links: Source Code / Demo
Created on: November 19, 2015
Made with: HTML, CSS
Tags: dailyui, contact-form, form, responsive
20. Blackboard/Chalkboard Contact Form
All CSS except the concrete wall bg.
Author: Greg Sweet (ControlledChaos)
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS, JS
Tags: codepenchallenge, cpc-signatures
More Awesome Lists:
Share: