Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FCC: Survey Form
<h1 id="title">Survey Form</h1>
<p id="description">How can we improve freeCodeCamp?</p>
<form action="post" id="survey-form">
<label for="name" id="name-label">Name: </label>
<input type="text" required id="name" placeholder="Enter your name">
<label for="email" id="email-label">Email: </label>
<input type="email" required id="email" placeholder="Enter your email">
<label for="number" id="number-label">Age:</label>
<input type="number" min="1" max="99" placeholder="Age" id="number">
<label for="dropdown">Which best describes your current role?</label>
<select name="role" id="dropdown">
<option value="student">Student</option>
<option value="ft-job">Full Time Job</option>
<option value="ft-learner">Full Time Learner</option>
<option value="none">Prefer not to say</option>
<option value="other">Other</option>
</select>
<label>How likely are you to recommend freeCodeCamp to a friend?</label>
<ul class="list">
<li><input type="radio" name="recommendation" value="definitely" id="definitely"><label for="definitely">Definitely</label></li>
<li><input type="radio" name="recommendation" value="maybe" id="maybe"><label for="maybe">Maybe</label></li>
<li><input type="radio" name="recommendation" value="not-sure" id="not-sure"><label for="not-sure">Not Sure</label></li>
</ul>
<label for="dropdown2">What do you like most in FCC:</label>
<select name="like-most" id="dropdown2">
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open-source">Open Source</option>
</select>
<label>Things that should be improved in the future <br>(Check all that apply):</label>
<ul class="list">
<li><input type="checkbox" name="improve" value="front-end" id="front-end"><label for="front-end">Front-end Projects</label></li>
<li><input type="checkbox" name="improve" value="back-end" id="back-end"><label for="back-end">Back-end Projects</label></li>
<li><input type="checkbox" name="improve" value="data-visual" id="data-visual"><label for="data-visual">Data Visualization</label></li>
<li><input type="checkbox" name="improve" value="challenges" id="challenges"><label for="challenges">Challenges</label></li>
<li><input type="checkbox" name="improve" value="community" id="community"><label for="community">Open Source Community</label></li>
<li><input type="checkbox" name="improve" value="gitter" id="gitter"><label for="gitter">Gitter help rooms</label></li>
<li><input type="checkbox" name="improve" value="videos" id="videos"><label for="videos">Videos</label></li>
<li><input type="checkbox" name="improve" value="meetups" id="meetups"><label for="meetups">City Meetups</label></li>
<li><input type="checkbox" name="improve" value="wiki" id="wiki"><label for="wiki">Wiki</label></li>
<li><input type="checkbox" name="improve" value="forum" id="forum"><label for="forum">Forum</label></li>
<li><input type="checkbox" name="improve" value="courses" id="courses"><label for="courses">Additional Courses</label></li>
</ul>
<label for="comments">Any Comments or Suggestions?</label>
<textarea name="comments" id="comments" cols="30" rows="10"></textarea>
<div></div>
<input type="submit" id="submit">
</form>
<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>
@import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
font-family: 'Roboto', sans-serif;
text-align: center;
background-color: #12B179;
color: #2059AE;
}
input, select {
padding: 5px;
}
#survey-form {
background-color: #FFAA72;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px 10%;
margin: 0 20%;
grid-gap: 10px;
}
.list {
list-style: none;
text-align: left;
padding-left: 0;
margin: 0;
}
label {
text-align: right;
padding-right: 1em;
}
#submit {
width: 200px;
margin-left: auto;
margin-top: 2em;
}
@media screen and (max-width: 833px) {
#survey-form {
grid-template-columns: repeat(1, 1fr);
}
label {
text-align: left;
}
#submit {
width: 100px;
margin-right: auto;
margin-top: 0.2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment