Collection of hand-picked free HTML and CSS contact form code examples from codepen and other resources. Update of July 2019 collection. 4 new items.

Related Articles

  1. CSS Forms
  2. CSS Login Forms
  3. CSS Checkout Forms
  4. CSS Subscribe Forms
  5. Bootstrap Forms
Demo image: Border Form

Author

  • Batuhan Baş

Links

Made with

  • HTML / CSS

About a code

Border Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Colorful Contact Form

Author

  • Ricky Eckhardt

Links

Made with

  • HTML (Slim) / CSS (Sass)

About a code

Colorful Contact Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Retro UI Feedback Form

Author

  • Alex

Links

Made with

  • HTML (Slim) / CSS (SCSS)

About the code

Retro UI Feedback Form

HTML and CSS retro UI feedback form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Responsive CSS 3D Contact Form

Author

  • Mahvash Fatima

Links

Made with

  • HTML / CSS

About the code

Responsive CSS 3D Contact Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Floating Contact Form CSS Floating Contact Form CSS - GIF Demo

Author

  • Shante Austin

Links

Made with

  • HTML / CSS

About the code

Floating Contact Form CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Contact Us Form Contact Us Form - GIF Demo

Author

  • Valeriya

Links

Made with

  • HTML / CSS (PostCSS) / JavaScript

About the code

Contact Us Form

Contact us form with animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Contact Us Form

Author

  • Jon Lehman

Links

Made with

  • HTML / CSS

About the code

Contact Us Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

Demo image: Contact Form UI

Author

  • Leena Lavanya

Links

Made with

  • HTML / CSS

About the code

Contact Form UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Vintage Inspired Contact Form

Author

  • David Fitas

Links

Made with

  • HTML / CSS

About the code

Vintage Inspired Contact Form

Mobile-friendly. A simple, yet effective contact form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Contact Form

Author

  • Bobby Korec

Links

Made with

  • HTML / CSS / JS

About a code

Responsive Contact Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js

Demo image: Simple, Flat Contact Form

Author

  • Zach Saucier

Links

Made with

  • HTML / CSS

About a code

Simple, Flat Contact Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Minimalistic Form

Author

  • Matheus Marsiglio

Links

Made with

  • HTML / CSS

About the code

Minimalistic Form

Simple and beautiful contact form. Useful and easy to modify.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Full CSS Drop Down Contact Form Full CSS Drop Down Contact Form - GIF Demo

Author

  • Vincent Durand

Links

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -