How to Create Contact Form With CSS

Have you ever wondered why you need a contact form on your website?

There are many reasons why a website should have a contact form. If you want to know what the visitors think about your website, articles, blogs or collect their contact details and build relationships with them, a contact form is a must!

In this snippet, we are going to show how to generate code for an HTML contact form and style it with the help of CSS.

Create HTML

Create a <h2> tag for the title and add a <div> element with a class "container".
Create a <form> element and add an action attribute with a "/form/submit" url.
Create four <label> elements with the following id attributes: "fname", "lname", "mail", and "country" and "message".
Create a drop-down list of options for "country" with the <select> tag.
Create a <textarea> tag to define a field, where the user can input a multi-line text.
Define fields for user input with the text attribute of the <input> tag.
Create a "Send" button with the submit attribute of the <input> tag.

<h2>Contact Form</h2>
<div class="container">
  <form action="/form/submit" method="POST">
    <label for="fname">Name</label>
    <input type="text" id="fname" name="name" placeholder="Type your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="surname" placeholder="Type your last name..">
    <label for="mail">E-mail Address</label>
    <input type="text" id="mail" name="e-mail" placeholder="Type your e-mail..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="italy">Italy</option>
      <option value="spain">Spain</option>
      <option value="france">France</option>
    </select>
    <label for="message">Message</label>
    <textarea id="message" name="message" placeholder="Type your message.." style="height: 200px"></textarea>
    <input type="submit" value="Send">
  </form>
</div>

Add CSS

Style <select> and <textarea> by setting the width, padding, margin-top and margin-bottom properties.
Make the border a little bit rounded with the border-radius property.
Make the textarea resize only vertically with the resize property.
Style the "Send" button with the background-color, color, padding, and border-radius properties.
Define the type of cursor.
Set a background-color, which will change when you hover.

input[type=text],
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 8px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: #4cd9c6;
  color: #ffffff;
  padding: 12px 20px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #6fe8d7;
}

Here’s the full code of contact form.

Example of creating a contact form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      input[type=text],
      select,
      textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 8px;
        margin-bottom: 16px;
        resize: vertical;
      }
      input[type=submit] {
        background-color: #4cd9c6;
        color: #ffffff;
        padding: 12px 20px;
        border: none;
        border-radius: 7px;
        cursor: pointer;
      }
      input[type=submit]:hover {
        background-color: #6fe8d7;
      }
      .container {
        border-radius: 8px;
        background-color: #e6e6e6;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Contact Form</h2>
    <div class="container">
      <form action="/form/submit" method="POST">
        <label for="fname">Name</label>
        <input type="text" id="fname" name="name" placeholder="Type your name..">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="surname" placeholder="Type your last name..">
        <label for="lname">E-mail Address</label>
        <input type="text" id="mail" name="e-mail" placeholder="Type your e-mail..">
        <label for="ci">Country</label>
        <select id="country" name="country">
          <option value="italy">Italy</option>
          <option value="spain">Spain</option>
          <option value="france">France</option>
        </select>
        <label for="message">Message</label>
        <textarea id="message" name="message" placeholder="Type your message.." style="height:200px"></textarea>
        <input type="submit" value="Send">
      </form>
    </div>
  </body>
</html>

Try it Yourself »

Result

Example of styling a contact form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        font-family: 'Open Sans' sans-serif;
        color: #fff;
        margin: 0;
      }
      .container {
        display: block;
        border: 8px solid #414178;
        border-radius: 10px;
        margin: 0 auto;
        padding: 0 0 10px 10px;
        max-width: 330px;
        background-color: #ac9dd1;
      }
      .title {
        display: inline-block;
      }
      .title h2 {
        padding: 0 10px 0 0px;
        margin: 5px 0;
        color: #FBFBFB;
      }
      form {
        padding: 10px 10px 0 0;
      }
      hr {
        width: 100%;
        display: block;
        margin: 5px 0;
        height: 5px;
        border: 0;
        background-color: #ffffff;
      }
      input,
      textarea {
        width: 100%;
        border: 5px solid #FFFFFF;
        border-radius: 3px;
        resize: none;
        padding: 0 5px;
        box-sizing: border-box;
        font-family: 'Open Sans' sans-serif;
        font-size: 16px;
        color: #000000;
      }
      input[type="text"],
      input[type="email"] {
        padding: 0 1px;
        height: 40px;
        width: 100%;
      }
      input:focus,
      textarea:focus {
        outline: none;
      }
      .form-input {
        margin: 5px 0 10px 0;
      }
      .form-textarea {
        margin: 5px 0;
        width: 100%;
        height: 100px;
      }
      input[type="submit"] {
        width: 100%;
        height: 50px;
        background-color: #414178;
        border: 0;
        color: #fff;
        border: 5px solid #414178;
        border-radius: 8px;
        margin: 10px 0 0 0;
        font-family: 'Open Sans' sans-serif;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <div class="title">
          <h2>
            Contact Us
            <hr>
          </h2>
        </div>
        <form class="form" action="/form/submit" method="POST">
          <label for="name">Name</label>
          <input class="form-input" type="text" name="name" id="name">
          <label for="email">Email</label>
          <input class="form-input" type="email" name="email" id="email">
          <label>Message</label>
          <textarea class="form-textarea" type="text"></textarea>
          <input type="submit" value="Submit">
        </form>
      </div>
    </div>
  </body>
</html>