| Viewed 84 times

how to create a contact form in html


how to create a contact form in html

1 Answer
Mikdam Qandeel
Answered
5

The contact page is very important to any website to let the communication between the company and their customers easier and it doesn't waste much time.

And the most important section on that page is the contact form, so you have to make it beautiful and look amazing.

you have to start with the <form> tag, Then add some inputs with <input> tag and label them with <label> tag. so let the user enter his name, e-mail and the message he wants to send. and a small button to clear the form to make it more useability.

Example:

<form action="" method="post">
    <h2>Qandeel Academy Contact Form</h2>

    <label for="fullName">Your Name</label><br>
    <input type="text" name="fullName"><br>
    
    <label for="email">Your E-mail</label><br>
    <input type="email" name="email"><br>
    
    <label for="message">Message</label><br>
    <textarea name="message"></textarea><br>
   
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
</form>

Output:

Qandeel Academy Contact Form







 

 

Ok, that's nice but still, need some touches with CSS, change the margin, padding and some colors.

Example:

form {
  width: 400px;
  background-color: lightblue;
  text-align: center;
  padding: 20px;
}

input, textarea {
  padding: 12px;  
  margin: 6px 6px 6px 0;
}

Output:

how to create a contact form in html

What about the button? do some magic on them!

Example:

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

input[type=reset] {
  background-color: gray;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: darkgreen;
  color: lightblue;
}

input[type=reset]:hover {
  background-color: black;
  color: lightblue;
}

Output:

how to create a contact form in html

And that's it.