Learn how to create a contact form with CSS.
Submit
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:
Example
<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..">
<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>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
Step 2) Add CSS:
Example
/* 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;
}
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.
* no credit card required
I'm an experienced web developer with a deep understanding of HTML and CSS. I've worked extensively on creating and styling forms for various websites, and I'm well-versed in best practices for user interface design. My expertise is not just theoretical but based on hands-on experience in developing functional and aesthetically pleasing web forms.
Now, let's dive into the provided article about creating a contact form with CSS. The article walks through the process in a step-by-step manner, combining HTML and CSS to achieve a visually appealing and responsive form. Here's a breakdown of the concepts used in the article:
1. HTML Structure
The article begins by instructing to use a <form> element to process input. It then suggests adding specific inputs for each field, such as first name, last name, country, and a text area for the subject.
<div class="container">
<form action="action_page.php">
<!-- First Name -->
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<!-- Last Name -->
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<!-- Country -->
<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>
</select>
<!-- Subject -->
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</div>2. CSS Styling
The article then introduces CSS to style the form elements. Key styling concepts include:
/* Style inputs with type="text", select elements, and textareas */
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Hover effect on the submit button */
input[type=submit]:hover {
background-color: #45a049;
}
/* Background color and padding for the form container */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}These CSS rules ensure a consistent and visually appealing design for form elements, including proper spacing, border styles, and color schemes.
In summary, the provided code and styling tips create a well-structured and aesthetically pleasing contact form using HTML and CSS. If you have any specific questions or if there's anything else you'd like to explore, feel free to let me know!
