How To Create a Contact Form with CSS (2023)

Table of Contents
Example Example Videos

Learn how to create a contact form with CSS.


Try it Yourself »

(Video) How To Make A Contact Form Using HTML And & CSS | Animated Label Contact Form Design

Step 1) Add HTML

Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:


<div class="container">
<form action="action_page.php">

<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

(Video) How To Make Contact Form Using HTML And CSS

<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>

<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

<input type="submit" value="Submit">


Step 2) Add CSS:


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;

/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;

Try it Yourself »

(Video) How To Make A Contact Us Page Using HTML And CSS In 10 Minutes

(Video) Responsive Contact Form Using HTML & CSS

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required

(Video) How To Make Working Contact Form With JavaScript | Receive Form Data On Email


1. CONTACT FORM in HTML/CSS Website for Beginners (w/ Formspree)
(Code Entropy)
2. 💎 Animated Contact Form In HTML & CSS | Dark & Light Mode
(True Coder)
3. Responsive Contact Us Page Design using Html CSS | HTML Responsive Web Page Design
(Online Tutorials)
4. Send emails from a HTML Contact Form
(Code with Ania Kubów)
5. What is Bootstrap? | Build a Website With Bootstrap | How to Build a Website | Bootstrap Tutorial
6. Awesome Contact Form Using HTML & CSS & JavaScript
(True Coder)
Top Articles
Latest Posts
Article information

Author: Dan Stracke

Last Updated: 02/07/2023

Views: 6725

Rating: 4.2 / 5 (63 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Dan Stracke

Birthday: 1992-08-25

Address: 2253 Brown Springs, East Alla, OH 38634-0309

Phone: +398735162064

Job: Investor Government Associate

Hobby: Shopping, LARPing, Scrapbooking, Surfing, Slacklining, Dance, Glassblowing

Introduction: My name is Dan Stracke, I am a homely, gleaming, glamorous, inquisitive, homely, gorgeous, light person who loves writing and wants to share my knowledge and understanding with you.