How to Create Feedback Form using html and CSS
👇ஃ Create a Feedback Form with source codeஃ
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content=
"width=device-width,initial-scale=1.0">
<title>Responsive Form Card</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax
/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="index.css">
<style>
/*style.css */
@import url(
'https://fonts.googleapis.com/
css2?family=Poppins&display=swap');
body {
margin: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
height: 60vh;
background-color: ;
font-family: 'Poppins', sans-serif;
}
.textup {
text-align: center;
color: rgb(11, 118, 11);
font-weight: 700;
}
i {
margin-right: 3px;
}
.form-box {
background-color: ;
box-shadow: 0 0 10px rgba(36, 67, 40, 0.8);
padding: 15px;
border-radius: 8px;
width: 500px;
}
form {
max-width: 400px;
margin: 0 auto;
}
input[type="radio"] {
margin-right: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 17px;
color: #000000;
font-weight: 600;
}
input,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 12px;
box-sizing: border-box;
border-radius: 10px;
}
button {
background-color:#6495ED;
color: #fff;
padding: 10px;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
font-size: 15px;
transition: .2s linear;
}
button:hover {
background-color: #FA8072;
border: none;
transform: translateY(-10px);
}
</style>
</head>
<body>
<!-- end contact section -->
<!-- footer section start -->
<?php include 'navigationbar.php';?>
<!-- footer section Start --><br></br>
<div class="form-box">
<div class="textup">
</div>
<center> <h1><b>Feedback Form</b></h1>
</center> <br><br>
<form>
<label for="uname">
<i class="fa fa-solid fa-user"></i>
Name
</label>
<input type="text" id="uname"
name="uname" required>
<label for="email">
<i class="fa fa-solid fa-envelope">
</i>
Email Address
</label>
<input type="email" id="email"
name="email" required>
<label for="phone">
<i class="fa-solid fa-phone"></i>
Phone No
</label>
<input type="tel" id="phone"
name="phone" required>
<label for="msg">
<i class="fa-solid fa-comments"
style="margin-right: 3px;"></i>
Write your Feedback:
</label>
<textarea id="msg" name="msg"
rows="4" cols="10" required>
</textarea><br> <br>
<button type="submit">
Submit
</button>
</form>
</div>
</body>
</html>
How to Create Feedback Form using html and CSS
No comments:
Post a Comment