Let's Build a survey from using html and css
Here's the working demo along with the repository,
https://abhishek-singh77.github.io/SurveyForm
https://github.com/abhishek-singh77/SurveyForm
Create a directory named survey form in your workspace. And add 3 files in it :
index.html, style.css, res.js
Now in index.html:
Write all the inputs you want and design the structure of the form. Follow the code and you can edit the way you want it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SurveyForm</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">
</script>
</head>
<body>
<div id="heading">
<h1 id= "title">Select Website</h1>
<p id="description">Fill the form as per the website you want. </p>
</div>
<div id="main">
<form id="survey-form">
<div id="input-fields">
<label id="label"><b>Name:</b></label>
<input id="name" type="name" name="name" class="form"
required placeholder="Full Name"><br>
<br>
<label id="label"><b>Email:</b></label>
<input id="email" type="email" name="email" class="form"
required placeholder="example@mail.com"><br>
<br>
<label id="label"><b>Age:</b></label>
<input id="number" type="number" name="number" class="form" min="5"
max="99" placeholder="12+">
</div>
<div id="dropdown-div"><br>
<label id="label"><strong>Genre Of Website</strong></label><br>
<select id="dropdown" name="code-lang" class="form">
<option value="C">Blogging Website</option>
<option value="Python">E-commerce Website (e.g, Shopify)</option>
<option value="C#">Personal Website</option>
<option value="php">Product Website</option>
<option value="Js">Organization Website</option>
<option value="Go">Other</option>
</select>
<label id="number-label"><b>Other</b></label>
<input id="name" type="name" name="others" class="form"
placeholder="Other (Optional)">
</div>
<div id="button-area">
<br>
<label id="job-label"><b>Do you want any custom design for website.</b>
</label><br>
<input type="radio" class="radio-inline" name="gender" value="employed"
checked> Yes<br>
<input type="radio" class="radio-inline" name="gender"
value="freelancer"> No<br>
</div>
<div id="button-area"><br>
<label id="os-label"><b>Do you also want SEO service? </b></label><br>
<input type="radio" class="radio-inline" name="yes" value="employed"
checked> Yes<br>
<input type="radio" class="radio-inline" name="yes"
value="freelancer"> No<br>
</div>
<div id="button-area"><br><br>
<label id="os-label"><b>Do you have Domain and hosting?</b></label><br>
<input type="radio" class="radio-inline" name="yes" value="employed"
checked> Yes<br>
<input type="radio" class="radio-inline" name="yes"
value="freelancer"> No<br>
</div>
<div id="button-area"><br><br>
<label id="os-label">
<b>Is there any template in your mind for the website?</b></label><br>
<input type="radio" class="radio-inline" name="yes"
value="employed" > Yes<br>
<input type="radio" class="radio-inline" name="yes"
value="freelancer"> No<br>
<textarea style= height:"120px;" class="form"
placeholder= "Share the link to your template here." >
</textarea><br><br>
<input id="submit" type="submit" value="Submit link"
name="submit link" class="form"><br>
</div>
<div id="heading"><br><br>
<label id="comments-label">
Tell us more about your website here for best results?</label><br>
<textarea style= height:"120px;" class="form"
placeholder="Please feel free to write a review..."></textarea><br><br>
<input id="submit" type="submit" class="form">
</div>
</form>
</div>
</body>
</html>
Now once the structure is complete then we can shift to the look of it using style.css file.
My design is given below:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: cover;
background: rgb(235,212,36);
background: linear-gradient(90deg, rgba(235,212,36,1) 0%,
rgba(193,238,20,1) 33%, rgba(21,184,217,1) 80%);
color: rgb(20, 16, 15);
font-size: 1.2vw;
}
#heading {
max-width: 750px;
margin: 4rem auto;
padding: .6rem;
}
#main {
padding: 0% 20% 0% 20%;
}
#title {
font-size: 2.2rem;
text-align: center;
line-height: 1.2;
padding: .6rem;
}
#description {
font-size: 1.1rem;
text-align: center;
padding: .2rem;
}
#survey-form {
background-color: #2222425d;
padding: 3rem 2.5rem;
border-radius: 7px;
}
#submit {
background: #24c789;
color: #fff;
padding: .7rem;
font-size: 1.15rem;
cursor: pointer;
}
#submit:hover {
background: rgb(2, 93, 48);
}
.form {
width: 100%;
padding: .7rem;
border-radius: 6px;
font-size: 1.0rem;
border: none;
}
@media only screen and (max-width:480px){
#main {
padding: 0% 0% 0% 0%;
}
}
You can further add JavaScript file for alerting or for using the DOM. I didn't used any because it was just for html and css practice.
Challenge for you is to make it responsive and comment the link of your demo in the comment box.
0 Comments