16 hand-picked CSS and HTML contact form examples. These forms are suitable for customer feedback forms, support question forms, and general feedback forms for your next website. One of the key factors when designing a feedback form is user experience. All the following forms are designed to get the best conversions possible. All examples have live previews and editable.

1. Simple contact form with Font Awesome

Simple contact form with Font Awesome

Author Links Made with
Karla Jaramillo demo & code Pure HTML/ Pure CSS

2. Contact us Form


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

Author Links Made with
Karla Jaramillo,
Gururaj
* demo & code
* design
Pure HTML/ Pure CSS

3. Contact Form with SVG animation

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

Author Links Made with
Joana Sesinando demo & code HTML, CSS (SCSS), JS

4. Tailwind CSS Responsive Contact Form

See the Pen
Tailwind CSS Responsive Contact Form
by Owais Khan (@owaiswiz)
on CodePen.

Author Links Made with
Owais Khan demo & code HTML, Tailwind CSS

5. Contact us form with animation

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

Author Links Made with
Valeriia demo & code HTML, PostCSS, JS

6. Simple HTML/CSS Contact Form

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

Author Links Made with
Aigars Silkalns demo & code HTML, CSS

7. Elegant Contact Form

See the Pen
Elegant Contact Form
by Mark Murray (@markmurray)
on CodePen.

Author Links Made with
Mark Murray demo & code HTML, SCSS

8. Transparent Contact Form

See the Pen
Transparent Contact Form
by Luis M Ruiz (@luismruiz)
on CodePen.

Author Links Made with
Luis M Ruiz demo & code HTML, CSS

9. Expanding Contact Form

See the Pen
Expanding Contact Form
by Joe Harry (@woodwoerk)
on CodePen.

Author Links Made with
Joe Harry demo & code HTML(Haml), CSS, JS

10. Classic Contact Form

See the Pen
Contact Form
by Aina Requena (she/her) (@ainarela)
on CodePen.

Author Links Made with
Aina Requena demo & code HTML(Haml), CSS, JS

11. Contact form – Dark & Fansy Animations

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

Author Links Made with
Jaime demo & code HTML, SCSS, JS

12. Minimalistic contact form with infield, floating labels

See the Pen
Minimalistic contact form with infield, floating labels
by Michal Niewitala ???? (@mican)
on CodePen.

Author Links Made with
Michal Niewitala ???? demo & code HTML, Sass, CoffeeScript

13. Full page animated Contact Form

See the Pen
Contact Form HTML + CSS
by Trevor L.J.M. McIntire (@uplusion23)
on CodePen.

Author Links Made with
Trevor L.J.M. McIntire demo & code HTML, CSS, JS

14. Modal Contact Form

See the Pen
Modal Contact Form
by ari (@tari)
on CodePen.

Author Links Made with
ari demo & code HTML (Pug), SCSS, JS

15. Super Slick Contact Form

See the Pen
Super Slick Contact Form
by Emil Andersson (@emilandersson)
on CodePen.

Author Links Made with
Emil Andersson demo & code HTML, CSS, JS

16. Contact form with full responsive page

See the Pen
Responsive form design
by leo (@leo-bian)
on CodePen.

Author Links Made with
leo demo & code HTML, CSS, JS

Want to add more awesome contact form designs? Send your source code link

Author

Since the beginning of my journey as a full-stack developer nearly 8 years ago, I've done work for agencies, consulted for startups, and collaborated with talented people to create digital products for both business and consumer use. Additionally, I write educational tutorials to help others with my experience.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x