| Viewed 193 times

how to create feedback form in html


how to create feedback form in html

1 Answer
Mikdam Qandeel
Answered
2

The feedback form is an essential part of websites. especially for the company which need feedback from the customers about their products.

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">
    <label for="fullName">Your Name</label> <br>
    <input type="text" name="fullName"><br><br>

    <label for="gender">Your Gender</label> <br>
    <input type="radio" name="gender" value="male">Male<br>
    <input type="radio" name="gender" value="female">Female<br><br>

    <label for="email">Your E-mail</label> <br>
    <input type="text" name="email"><br>
    <br>

    <label for="comments">Your Comments</label> <br>
    <textarea name="comments"></textarea><br><br>

    <input type="submit" value="Submit">
    <input type="reset" value="Clear">
</form>

Output:





Male
Female







 

 

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 feedback 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: red;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

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

input[type=reset]:hover {
  background-color: white;
  color: blue;
}

Output:

how to create a feedback form in html

And that's it.