25+ CSS Contact Forms - Free Code + Demos

Collection of 25+ CSS Contact Forms. All items are 100% free and open-source.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Retro UI - Feedback Form

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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

CSS Contact Forms - 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