16 hand-picked CSS and HTML contact form examples
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
| 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