How to Create Responsive Contact Form Using HTML & CSS

If you want to create a contact form using HTML & CSS code, then keep your attention in this tutorial as I am going to share how to create responsive contact form using HTML & CSS.

You can use the contact form on your website for getting the users feedback, questions, service/ information request, and etc… Follow the below steps to create the contact form.

Step 1) Add CSS Code in your webpage.

<style>
body {font-family: Arial, Helvetica, sans-serif;}

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;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>

<style>

body {font-family: Arial, Helvetica, sans-serif;}

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;

}

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

</style>

Step 2) Add below HTML code in your webpage

<h3>Contact Form</h3>

<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="lname">Subject</label>
    <input type="text" id="subject" name="subject" placeholder="Your subject..">

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

    <input type="submit" value="Submit">
  </form>
</div>

<h3>Contact Form</h3>

<label for="fname">First Name</label>

<label for="lname">Subject</label>

<label for="subject">Message</label>

<textarea id="message" name="message" placeholder="Write something here..."

style="height:200px"></textarea>

</form>

</div>

After adding the above code your contact form will look like below screenshot.

How to Create Responsive Contact Form Uisng HTML & CSS

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to Create Responsive Contact Form Using HTML & CSS

Step 1) Add CSS Code in your webpage.

Step 2) Add below HTML code in your webpage

Recommended Posts:

webmentor