Simple Contact Form using HTML and CSS

 Hey, learner In this Post, we are going to make a Simple Contact Form using HTML and CSS. In the past post, we have created a Realtime Date and Time using HTML CSS, and JS. Now it is time to create a contact form.

Simple Contact Form using HTML and CSS



The Contact form is an important element on a page that allows users to communicate with the website owner. This contact form has some input fields for filling in name, email address, message, etc. You can add or remove fields according to your site requirements.

Now in our contact form, we have added a Full name and Email address if you did not put @ sign you will get an error while submitting the form after that we have added a phone number and website this is section optional. You can fill otherwise not you chose. we have put a message box where you can write messages for us after that there is submit button below the Message section. At the bottom of the form, there is a designer's name. source form codepen.io

Simple Contact Form using HTML and CSS [Source code]

To create a Simple Contact Form using HTML and CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code. 

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>

<html>

    <head>

        <title>Contact form</title>

        <link rel="Stylesheet" href="style.css">

    </head>

    <body>

         <div class="container">  

  <form id="contact" action="" method="post">

    <h3>Codingthai Contact Form</h3>

    <h4>Contact us for custom quote</h4>

    <fieldset>

      <input placeholder="Your name" type="text" tabindex="1" required autofocus>

    </fieldset>

    <fieldset>

      <input placeholder="Your Email Address" type="email" tabindex="2" required>

    </fieldset>

    <fieldset>

      <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>

    </fieldset>

    <fieldset>

      <input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>

    </fieldset>

    <fieldset>

      <textarea placeholder="Type your message here...." tabindex="5" required>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-font-smoothing: antialiased;

  -moz-font-smoothing: antialiased;

  -o-font-smoothing: antialiased;

  font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}


body {

  font-family: "Roboto", Helvetica, Arial, sans-serif;

  font-weight: 100;

  font-size: 12px;

  line-height: 30px;

  color: #777;

  background: #4CAF50;

}


.container {

  max-width: 400px;

  width: 100%;

  margin: 0 auto;

  position: relative;

}


#contact input[type="text"],

#contact input[type="email"],

#contact input[type="tel"],

#contact input[type="url"],

#contact textarea,

#contact button[type="submit"] {

  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;

}


#contact {

  background: #F9F9F9;

  padding: 25px;

  margin: 150px 0;

  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}


#contact h3 {

  display: block;

  font-size: 30px;

  font-weight: 300;

  margin-bottom: 10px;

}


#contact h4 {

  margin: 5px 0 15px;

  display: block;

  font-size: 13px;

  font-weight: 400;

}


fieldset {

  border: medium none !important;

  margin: 0 0 10px;

  min-width: 100%;

  padding: 0;

  width: 100%;

}


#contact input[type="text"],

#contact input[type="email"],

#contact input[type="tel"],

#contact input[type="url"],

#contact textarea {

  width: 100%;

  border: 1px solid #ccc;

  background: #FFF;

  margin: 0 0 5px;

  padding: 10px;

}


#contact input[type="text"]:hover,

#contact input[type="email"]:hover,

#contact input[type="tel"]:hover,

#contact input[type="url"]:hover,

#contact textarea:hover {

  -webkit-transition: border-color 0.3s ease-in-out;

  -moz-transition: border-color 0.3s ease-in-out;

  transition: border-color 0.3s ease-in-out;

  border: 1px solid #aaa;

}


#contact textarea {

  height: 100px;

  max-width: 100%;

  resize: none;

}


#contact button[type="submit"] {

  cursor: pointer;

  width: 100%;

  border: none;

  background: #4CAF50;

  color: #FFF;

  margin: 0 0 5px;

  padding: 10px;

  font-size: 15px;

}


#contact button[type="submit"]:hover {

  background: #43A047;

  -webkit-transition: background 0.3s ease-in-out;

  -moz-transition: background 0.3s ease-in-out;

  transition: background-color 0.3s ease-in-out;

}


#contact button[type="submit"]:active {

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

}


.copyright {

  text-align: center;

}


#contact input:focus,

#contact textarea:focus {

  outline: 0;

  border: 1px solid #aaa;

}


::-webkit-input-placeholder {

  color: #888;

}


:-moz-placeholder {

  color: #888;

}


::-moz-placeholder {

  color: #888;

}


:-ms-input-placeholder {

  color: #888;

}

 That’s all after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

  • Creating a Heart using CSS | HTML & CSS
  • Creating a Helicopter using CSS | HTML & CSS
  • Realtime Date and Time using HTML CSS and JS
  • Creating a teddy bear using CSS | HTML & CSS
  • Login and signup Form Design using HTML and Pure CSS

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.