Contact forms Create With HTML and CSS

17 CSS Contact Forms

CSS Contact Forms

Hello there! Welcome to the Codewithrandom Blog. In this article, you will find  Contact form designs Using Html and CSS.

Here is the Latest Collection of HTML CSS Contact Forms With Source Code. Responsive Contact Form, Popup Contact Form, Expanding Contact Form.

 CSS Contact Forms

A contact form allows users to communicate with the site owner. It provides an immediate, convenient way for users to ask the company questions. It has fields for filling in name, address, and type of comment, email, and mailing addresses are also included. You need a contact form on your website!

50+ HTML, CSS and JavaScript Projects With Source Code

1. Responsive Contact Form

Code byBobby Korec
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

Let’s start our list with a minimal and modern-looking dark-themed contact form. Contact information and address are also present in this, below this there are several icons for other platforms as well, all of them have animation on hover.

2. Popup Contact Form

Code byAndrew
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveNo

In this, the contact form pops up after clicking the contact button. It has nice accent colors as well.

3. Bootstrap 3 Contact form with Validation

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Code byJay
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

ADVERTISEMENT

A contact form built with Bootstrap 3. It has field validation with Bootstrap Validator. This is a very detailed form, and even has icons for every field.

ADVERTISEMENT

4. MINIMALISTIC FORM

Code byMatheus Marsiglio
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesNo
ResponsiveNo

Simple, minimal, and beautiful contact form by Matheus Marsiglio. Useful and easy to modify.

Cookie Consent Box using HTML, CSS, and JavaScript

5. Expanding Contact Form

Code byJoe Harry
Demo & downloadclick here for code
Language usedHTML(Haml),CSS(SCSS),JS
External link / DependenciesYes
ResponsiveYes

A functional (front end only) expanding contact form with jQuery validation. Font icons from Font Awesome

6. #DailyUI028 Contact Form

Code byLeena Lavanya
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveYes

A floating card layout form with border glow. If you don’t like the blue background then it can be easily changed in the CSS file.

7. Contact Form

Code byAina Requena (she/her)
Demo & downloadclick here for code
Language usedHTML,CSS(SCSS),JS
External link / DependenciesYes
ResponsiveYes

Another Minimal contact form. This is by Aina Requena made by using HTML, CSS(SCSS), and JS.

8. Bootstrap contact form with validation and AJAX submit

Code byOndrej
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

This is a basic Bootstrap and HTML contact form. It displays a custom Bootstrap alert after submitting the form.

9. Vintage Inspired Contact Form

Code byDavid Fitas
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveYes

A simple, yet effective contact form. Validation is not included but will be made available upon request.

15+ Checkbox Styles With CSS Code

10. Appointment Contact Form

Code byAndrew Wright
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveNo

A Contact form for making appointments, you can use this as it is on a doctor’s website.

11. Pastel Contact Form – Pen #11 – 2020

Code byRicky Eckhardt
Demo & downloadclick here for code
Language usedHTML(Slim),CSS(Sass)
External link / DependenciesYes
ResponsiveNo

A pastel contact form by Ricky Eckhardt was made using HTML(Slim), CSS(Sass), and JS. It has social media icons and contact information & address as well.

12. Responsive CSS 3D Contact Form

Code byMahvash Fatima
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesNo
ResponsiveNo

This is an odd one out. A 3D contact form by Mahvash Fatima. Not sure if I will use it on my website but still it’s a pretty impressive design so I have to include it.

13. Contact Form HTML + CSS

Code byTrevor L.J.M. McIntire
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

A black and white themed contact form by Trevor L.J.M. McIntire. This reminds me of yin-yang.

14. Hello – Animated Contact Form

Code byShah Zobayer Ahmed
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveNo

Another Contact design form that pops up on a button press, the button itself has a cool animation on hover. This is made using CSS3 and jQuery.

Password Strength Checker using HTML,CSS &JavaScript

15. Super Slick Contact Form

Code byEmil Andersson
Demo & downloadclick here for code
Language usedHTML, CSS, JS
External link / DependenciesYes
ResponsiveYes

This form by Emil Andersson uses google Material-inspired input fields. looks pretty cute.

16. Responsive Contact Form

Code byRachel Opperman
Demo & downloadclick here for code
Language usedHTML, CSS
External link / DependenciesYes
ResponsiveYes

Let’s end our list with a responsive contact form that utilizes CSS Grid by Rachel Opperman.

Video Preview:

That’s it, folks. In this article, we shared 15+ Contact forms with cool and different designs using only HTML and CSS. We have covered everything from minimal-looking contact forms to forms that pops up on a button click and even a 3D contact form.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you And Keep Learning!!

follow us on Instagram: @codewith_random
Written by: @ayushgoel

What is a Contact Us page?

A contact page is included on a website to give visitors a method to get in touch with the site’s creator.

How to create a form?

A form is made by using the <form> tag, and inside of it, we add the input for the user’s name, email, phone, and textarea by using the input tag.



Leave a Reply