| Viewed 348 times

how to create feedback form in html


how to create feedback form in html

1 Answer
Mikdam Qandeel
Answered
26

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.



Related Questions