This Survey Form project was created as a certification requirement for the Responsive Web Design course from freeCodeCamp. The goal was to develop a functional Survey Form designed to collect user information efficiently. The form adheres to the functional requirements and had to be similar to the freeCodeCamp Survey Form in functionality, although i had the freedom to design the form according to my own style and preferences.

Important

This project is part of the freeCodeCamp Responsive Web Design course. While freeCodeCamp provides guidelines and user stories for certification projects, it does not offer tutorials or step-by-step guides for development. This project was built entirely from scratch using my own approach to meet the requirements.

Screenshot

📝 Project Objective

The primary objective of this project was to develop a comprehensive survey form that effectively captures user input through various fields while ensuring proper validation and usability. The project emphasized using HTML5 features to validate inputs and organize the form logically, providing a solid foundation for collecting and managing user data.

🔧 Features

• Page Title: The form includes an h1 element with the id title.

• Short Explanation: A p element with the id description provides an explanation of the form.

• Form Elements:

  • A form element with the id survey-form contains all necessary input fields.

  • Text input fields for name and email, each with appropriate ids (name and email), and validation for email formatting.

  • A number input field with id number, including validation for numeric input and range constraints.

  • Labels for each input field, with ids name-label, email-label, and number-label.

  • Placeholder text in input fields to guide user input.

  • A dropdown select element with at least two options.

  • Radio buttons grouped by the name attribute for single choice selection.

  • Checkboxes with values for multiple selections.

  • A textarea for additional comments.

  • A submit button with the id submit to submit the form.

📖 Learnings

• HTML5 Form Features: Gained experience in implementing and validating various HTML5 form elements, including text inputs, number inputs, dropdowns, radio buttons, checkboxes, and textareas.

• Form Validation: Learned how to use HTML5 attributes for input validation, including setting ranges for number inputs and ensuring proper email formatting.

• Accessibility: Improved skills in making forms accessible by properly labeling inputs and using placeholder text for guidance.

💻 Technologies Used

• HTML5 for structuring the form and implementing validation

• CSS3 for styling

💡 Acknowledgements

• freeCodeCamp: For providing guidelines and user stories for this project.

• Fefi on Dribbble: For the design inspiration. You can view the design here: Fefi's design.