Create survey form using html and css only
source code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="forms.css">
</head>
<body>
<header>
<h1>
Survey Form
</h1>
</header>
<div class="layout">
<div class="whitelayout">
<br>
<p>
Let us know how we can improve AB Design Agency
</p>
<form action="">
<div class="div">
<div class="label">
<label for="name"><span class="coral">*</span> Name:</label>
</div>
<div class="input">
<input type="text" class="tinput" name="name" id="name" required placeholder="Enter your name">
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="phone"><span class="coral">*</span> Phone:</label>
</div>
<div class="input">
<input class="tinput" type="number" name="phone" id="phone" placeholder="Enter your phone number" required>
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="email"><span class="coral">*</span> Email:</label>
</div>
<div class="input">
<input type="email" class="tinput" name="email" id="email" required placeholder="Enter your Email">
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="age"><span class="coral">*</span> Age:</label>
</div>
<div class="input">
<input type="number" class="tinput" name="age" id="age" required placeholder="Enter your age">
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="city"><span class="coral">*</span> City:</label>
</div>
<div class="input">
<input type="text" class="tinput" name="city" required id="city" placeholder="Enter your city">
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="role"><span class="coral">*</span> Which option best describe your current role:</label>
</div>
<div class="input">
<select name="Role" id="role">
<option value="" disabled selected>Select</option>
<option value="student">Student</option>
<option value="Full time employed">Full time employed</option>
<option value="other">Other</option>
</select>
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="rating"><span class="coral">*</span> How likely is that you would recommend <br> AB Design Agency to a friend?</label>
</div>
<div class="input">
<label for="definitely">
<input type="radio" id="definitely" name="recommendation" value="definitely">
Definitely
</label>
<br>
<label for="maybe">
<input type="radio" id="maybe" name="recommendation" value="maybe">
Maybe
</label>
<br>
<label for="Notsure">
<input type="radio" id="not" name="recommendation" value="not sure">
Not sure
</label>
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="mostlike">
What do you like the most in AB Design Agency:
</label>
</div>
<div class="input">
<select name="mostlike" id="mostlike">
<option value="" disabled selected>Select</option>
<option value="designs">Designs</option>
<option value="Presentation">Presentation</option>
<option value="Material">Material</option>
</select>
</div>
</div>
<br>
<div class="div">
<div class="label">
<label for="Message">Message:</label>
</div>
<div class="input">
<textarea name="message" id="message" cols="38" rows="7" placeholder="Ener your message (if any) "></textarea>
</div>
</div>
<br>
<div class="div">
<div class="label"></div>
<div class="input">
<div class="button">
<button type="submit">
Submit
</button>
</div>
</div>
</div>
<br>
<br>
</form>
</div>
</div>
</body>
</html>
CSS
body {
background-color: cadetblue;
font-family: Verdana, Geneva, sans-serif;
}
h1 {
text-align: center;
}
.layout {
width: 100%;
}
.whitelayout {
border: 1px solid greenyellow;
box-shadow: 10px 10px 25px deepskyblue;
border-radius: 10px;
background-color: white;
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
p {
text-align: center;
}
.coral {
font-size: 12px;
color: crimson;
}
.div {
display: flex;
flex-direction: row;
}
.label {
width: 50%;
text-align: right;
margin-right: 10px;
}
.input {
width: 50%;
margin-left: 10px;
}
button {
letter-spacing: 1px;
outline: none;
width: 30%;
color: white;
background-color: black;
height: 35px;
font-style: italic;
font-size: 15px;
border: 1px solid crimson;
min-width: 100px;
}
button:hover {
cursor: pointer;
color: tomato;
}
form {
font-weight: lighter;
}
.tinput {
box-shadow: 1px 1px 1px deepskyblue;
width: 50%;
padding-left: 5px;
height: 25px;
opacity: 70%;
border: 1px solid rgb(168, 168, 168);
outline: none;
}
select {
box-shadow: 1px 1px 1px deepskyblue;
width: 51.5%;
height: 27px;
padding-left: 5px;
opacity: 70%;
border: 1px solid rgb(168, 168, 168);
}
label {
font-size: 15px;
}
.tinput:hover {
border-bottom: 1px groove crimson;
}
textarea {
box-shadow: 1px 1px 1px deepskyblue;
max-width: 90%;
}
Comments
Post a Comment