40+ CSS Contact Forms

Last Updated on by in CSS Examples
CSS Contact Form

We’re thrilled to have you here. If you are seeking a collection of CSS contact forms for effective communication with site visitors, look no further! In this compilation, we are featuring free HTML and CSS code examples of contact forms. We’ve sourced this curate collection from varied, reliable sources such as CodePen and GitHub.

In web design, contact forms play an important role in enabling communication. It establishes communication between users and the site owners or administrators. Each example in our compilation ensures the most stylish and innovative design styles and offers an effective way to collect information from users.

Contact forms collect essential user information such as name, email address, phone number, or specific inquiries, which helps site owners understand their audience and respond effectively. We’re thrilled to showcase 40+ innovative, virbant design styles for forming engaging user experiences for your web project.

Each form example is carefully selected for web designers and UI developers and also serves a wider audience based on usability, visual appeal, cross-browser support, and intuitiveness, ensuring top-notch user interaction by offering a convenient and straightforward method for visitors to get in touch.

Let’s check out our collection, and take your website to the next level and unlock the possibilities of seamless user experience.

01. HTML5 Contact Form

See the Pen
HTML5 Contact Form
by ssbalakumar (@ssbalakumar)
on CodePen.


Author: ssbalakumar @ssbalakumar
Links: Source Code / Demo
Created on: May 1, 2014
Made with: HTML, CSS

02. Vintage Inspired Contact Form

See the Pen
Vintage Inspired Contact Form
by David Fitas (@dfitzy)
on CodePen.


Author: David Fitas @dfitzy
Links: Source Code / Demo
Created on: January 6, 2016
Made with: HTML, CSS

03. Elegant Contact Form

See the Pen
Elegant Contact Form
by Grandvincent Marion (@GrandvincentMarion)
on CodePen.


Author: Grandvincent Marion @GrandvincentMarion
Links: Source Code / Demo
Created on: June 6, 2015
Made with: HTML, CSS

04. Pure CSS Contact Form

See the Pen
Pure CSS Contact Form
by sathyabharathy (@sathyabharathy)
on CodePen.


Author: sathyabharathy @sathyabharathy
Links: Source Code / Demo
Created on: July 16, 2015
Made with: HTML, CSS

05. Contact Form

See the Pen
#DailyUI028 Contact Form
by Leena Lavanya (@leenalavanya)
on CodePen.


Author: Leena Lavanya  @leenalavanya
Links: Source Code / Demo
Created on: March 19, 2016
Made with: HTML, CSS

06. Pinkie Contact Form

See the Pen
Pinkie Contact Form
by Ilma Andayana (@ilma)
on CodePen.


Author: Ilma Andayana @ilma
Links: Source Code / Demo
Created on: April 17, 2014
Made with: HTML, CSS, JS

07. MINIMALISTIC FORM

See the Pen
MINIMALISTIC FORM
by Matheus Marsiglio (@matmarsiglio)
on CodePen.


Author: Matheus Marsiglio @matmarsiglio
Links: Source Code / Demo
Created on: March 25, 2014
Made with: HTML, CSS

08. Contact Us

See the Pen
Daily UI #028 Contact Us
by Justin Felcan (@felcans)
on CodePen.


Author: Justin Felcan @felcans
Links: Source Code / Demo
Created on: June 14, 2016
Made with: HTML, CSS(Stylus), JS

09. Hand-Written Contact Form Using Angular JS

See the Pen
Hand-Written Contact Form using Angular JS
by Shaik Maqsood (@shaikmaqsood)
on CodePen.


Author: Shaik Maqsood @shaikmaqsood
Links: Source Code / Demo
Created on: January 15, 2016
Made with: HTML, CSS, JS

10. jQuery Pop-up Contact Form

See the Pen
jQuery Pop-up Contact Form
by Beka (@bekqs)
on CodePen.


Author: Beka @bekqs
Links: Source Code / Demo
Created on: March 18, 2017
Made with: HTML, CSS, JS

11. Contact Us Form – Frontend

See the Pen
Contact Us Form – frontend
by Jon Lehman (@JonLehman)
on CodePen.


Author: Jon Lehman @JonLehman
Links: Source Code / Demo
Created on: May 19, 2016
Made with: HTML, CSS

12. Contact Form CSS

See the Pen
Contact from – Daily UI 28
by Sander Visser (@sanderfish)
on CodePen.


Author: Sander Visser @sanderfish
Links: Source Code / Demo
Created on: November 19, 2015
Made with: HTML, CSS

13. Contact Form

See the Pen
Contact Form
by Couch John (@tmoran18)
on CodePen.


Author: Couch John @tmoran18
Links: Source Code / Demo
Created on: July 28, 2019
Made with: HTML, CSS(SCSS)

14. Blackboard/Chalkboard Contact Form

See the Pen
Blackboard/Chalkboard Contact Form
by Greg Sweet (@ControlledChaos)
on CodePen.


Author: Greg Sweet @ControlledChaos
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS, JS

15. Contact Us Form With Animation

See the Pen
Contact us form with animation
by Valeriia (@valerite-dev)
on CodePen.


Author: Valeriia @valerite-dev
Links: Source Code / Demo
Created on: July 18, 2016
Made with: HTML, CSS(PostCSS), JS

16. Simple Contact form UI

See the Pen
Simple Contact form UI
by Melissa Cabral (@melissacabral)
on CodePen.


Author: Melissa Cabral @melissacabral
Links: Source Code / Demo
Created on: March 9, 2016
Made with: HTML, CSS

17. Contact Form with SVG animation

See the Pen
Contact Form with SVG animation
by Joana Sesinando (@joanasesinando)
on CodePen.


Author: Joana Sesinando @joanasesinando
Links: Source Code / Demo
Created on: August 16, 2020
Made with: HTML, CSS(SCSS)

18. Pure CSS Contact Form

See the Pen
Pure CSS Contact Form
by Leon Heess (@MiXT4PE)
on CodePen.


Author:  Leon Heess @MiXT4PE
Links: Source Code / Demo
Created on: July 3, 2018
Made with: HTML, CSS

19. Responsive Contact Form

See the Pen
Responsive Contact Form
by Bobby Korec (@bobbykorec)
on CodePen.


Author: Bobby Korec @bobbykorec
Links: Source Code / Demo
Created on: November 23, 2015
Made with: HTML, CSS, JS

20. Sliding Sidebar Contact Form

See the Pen
Sliding Sidebar Contact Form
by Kent Hefley (@Kryan74)
on CodePen.


Author: Kent Hefley @Kryan74
Links: Source Code / Demo
Created on: September 14, 2018
Made with: HTML, CSS, JS

21. Floating Contact Form CSS

See the Pen
Floating Contact Form CSS
by Shante Austin (@shantedenise)
on CodePen.


Author: Shante Austin @shantedenise
Links: Source Code / Demo
Created on: October 16, 2018
Made with: HTML, CSS

22. Colorful Contact Form

See the Pen
Colorful Contact Form – Day 1 – 100 DAYS – 2020
by Ricky Eckhardt (@rickyeckhardt)
on CodePen.


Author: Ricky Eckhardt @rickyeckhardt
Links: Source Code / Demo
Created on: February 28, 2020
Made with: HTML(Slim), CSS (Sass)

23. Dark Contact Us Form UI

See the Pen
Contact Us – UI Challenge
by Krisantus Wanandi (@krisantuswanandi)
on CodePen.


Author: Krisantus Wanandi @krisantuswanandi
Links: Source Code / Demo
Created on: September 18, 2018
Made with: HTML, CSS

24. Clean Contact Form

See the Pen
Clean Contact Form
by nick haskell (@nickhaskell)
on CodePen.


Author: Nick Haskell @nickhaskell
Links: Source Code / Demo
Created on: July 20, 2013
Made with: HTML, CSS(SCSS)

25. Simple, flat contact form

See the Pen
Simple, flat contact form
by Zach Saucier (@ZachSaucier)
on CodePen.


Author: Zach Saucier @ZachSaucier
Links: Source Code / Demo
Created on: June 10, 2014
Made with: HTML, CSS

26. Contact Form

See the Pen
contact form
by brandon (@brandonloving)
on CodePen.


Author: brandon @brandonloving
Links: Source Code / Demo
Created on: April 19, 2016
Made with: HTML, CSS, JS

27. Contact form

See the Pen
Contact form
by Jaime (@jq)
on CodePen.


Author: Jaime @jq
Links: Source Code / Demo
Created on: May 3, 2015
Made with: HTML, CSS(SCSS), JS

28. Responsive Contact Form

See the Pen
Responsive Contact Form
by Rachel Opperman (@movntains)
on CodePen.


Author: Rachel Opperman @movntains
Links: Source Code / Demo
Created on: August 7, 2018
Made with: HTML, CSS

29. Envelope CSS3

See the Pen
Envelope CSS3
by Lionel Tzatzkin (@elrumordelaluz)
on CodePen.


Author: Lionel Tzatzkin @elrumordelaluz
Links: Source Code / Demo
Created on: June 11, 2013
Made with: HTML, CSS, JS

30. Contact Us Form

See the Pen
Contact Us Form
by rajeshdn (@RajRajeshDn)
on CodePen.


Author: rajeshdn @RajRajeshDn
Links: Source Code / Demo
Created on: May 2, 2018
Made with: HTML, CSS

31. Responsive Contact Page: dark mode + form validation

See the Pen
Responsive Contact Page: dark mode + form validation
by Diana L. (@dianalisova)
on CodePen.


Author: Diana L. @dianalisova
Links: Source Code / Demo
Created on: June 29, 2020
Made with: HTML, CSS, JS

32. Contact Us Form

See the Pen
Untitled
by Binamra (@binamra)
on CodePen.


Author: Binamra @binamra
Links: Source Code / Demo
Created on: January 7, 2021
Made with: HTML, CSS

33. Contact us Responsive

See the Pen
Contact us Responsive
by Baahubali (@baahubali92)
on CodePen.


Author: Baahubali @baahubali92
Links: Source Code / Demo
Created on: March 12, 2019
Made with: HTML, CSS

34. Animated Contact Form

See the Pen
Animated Contact Form
by Maria Marin (@myacode)
on CodePen.


Author: Maria Marin @myacode
Links: Source Code / Demo
Created on: January 22, 2020
Made with: HTML, CSS(SCSS),JS

35. Under the sea contact form

See the Pen
Under the sea contact form
by Geert-Jan Hendriks (@geertjanhendriks)
on CodePen.


Author: Geert-Jan Hendriks @geertjanhendriks
Links: Source Code / Demo
Created on: April 16, 2014
Made with: HTML, CSS, JS

36. Border Form

See the Pen
Border Form
by Batuhan Baş (@batuhanbas)
on CodePen.


Author: Batuhan Baş @batuhanbas
Links: Source Code / Demo
Created on: June 28, 2020
Made with: HTML, CSS

37. Simple HTML/CSS Contact Form

See the Pen
Simple HTML/CSS Contact Form
by Aigars Silkalns (@colorlib)
on CodePen.


Author: Aigars Silkalns @colorlib
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, CSS

38. Responsive CSS 3D Contact Form

See the Pen
Responsive CSS 3D Contact Form
by Mahvash Fatima (@mahvash-fatima)
on CodePen.


Author: Mahvash Fatima @mahvash-fatima
Links: Source Code / Demo
Created on: October 22, 2018
Made with: HTML, CSS

39. Retro UI – Feedback Form

See the Pen
Retro UI – feedback form
by Alex (@AlexKP)
on CodePen.


Author: Alex @AlexKP
Links: Source Code / Demo
Created on: August 2, 2018
Made with: HTML(Slim), CSS(SCSS), JS

40. Full CSS Drop Down Contact Form

See the Pen
Full CSS Drop Down Contact Form
by Vincent Durand (@onediv)
on CodePen.


Author: Vincent Durand @onediv
Links: Source Code / Demo
Created on: April 10, 2013
Made with: HTML, CSS

41. Pastel Contact Form

See the Pen
Pastel Contact Form – Pen #11 – 2020
by Ricky Eckhardt (@rickyeckhardt)
on CodePen.


Author: Ricky Eckhardt @rickyeckhardt
Links: Source Code / Demo
Created on: February 13, 2020
Made with: HTML(Slim), CSS (Sass)

42. Contact Form

See the Pen
Contact Form
by Paul Stamp (@paulstamp)
on CodePen.


Author: Paul Stamp @paulstamp
Links: Source Code / Demo
Created on: October 22, 2016
Made with: HTML, CSS(SCSS), JS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.