Build a Survey Form
Source: Dev.to
Project Overview
Despite having written a couple of posts on DEV, I was still able to complete the HTML Tables and Forms quiz on freeCodeCamp yesterday. That led me to the Build a Survey Form – the first certification project in the Responsive Web Design curriculum.
The project follows sixteen user stories. Once all are fulfilled, the project is considered complete. Like earlier labs, it provides an example of the finished result and some starter HTML boilerplate.
Starter Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<!-- Content will go here -->
</body>
</html>Form Implementation
I began by structuring the body with an <h1> heading, a descriptive paragraph, and the form itself. The form includes:
- Text, email, and number fields (the number field uses a dropdown for selection)
- Checkboxes
- Radio buttons
- A textarea for additional comments
Instead of copying the example verbatim, I gave it a personal twist by building a DEV Community feedback form.
Completed Survey Form Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<h2>DEV Community Feedback Form</h2>
<p>Help us improve our community by filling in this form.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
<p>Which option best describes your current experience level?</p>
<select name="experience" id="experience">
<option value="">Select your experience</option>
<option value="beginner">Beginner</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
<p>Would you recommend DEV Community to a friend/colleague?</p>
<label><input type="radio" name="recommend" value="yes" /> Yes</label>
<label><input type="radio" name="recommend" value="no" /> No</label>
<p>What would you like to see improved? (Check all that apply)</p>
<label><input type="checkbox" name="improve" value="articles" /> Articles</label>
<label><input type="checkbox" name="improve" value="moderation" /> Moderation</label>
<label><input type="checkbox" name="improve" value="onboarding" /> Onboarding</label>
<p>Any further suggestions to improve our community?</p>
<textarea name="suggestions" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>Next Steps
The HTML portion of the Responsive Web Design certification is nearly complete, with only the accessibility subsection remaining. I’ll share more about that next time. As always—keep coding!