A lazy attempt at the Survey Form project

Code Feedback
1

Hey everyone!
Although I had completed the responsive web design a few months ago, I decided to add more to these projects. So starting from the survey form, I will be sharing my projects to receive feedback. I write broken code, and I just add different stuff to make something work. You will see that on my upcoming projects but for now, I would love to hear your thoughts and advice about my Survey Form.

View the project here

2 Likes
2

Hey brother!

Nice work. Your code is maybe not formatted the neatest, but there are no errors. Here’s a formatted version if you like, with proper indenting:

<section>
  <div class="div">
    <h1 id="title">
      Football Community's Survey Form
    </h1>
    <p id="description">
      Help us collect data about football and the top teams in this sport!
    </p>
    <form id="survey-form">
      <label id="name-label" for="name">Enter Your Name: </label>
      <input id="name" type="text" placeholder="Mike Rogers" required>
      <label id="email-label" for="email">Enter Your email: </label>
      <input id="email" placeholder="myemail@example.com" type="email" required>
      <label id="number-label" for="number">Your Age:</label>
      <input id="number" placeholder="10-100" min="10" max="100" type="number">
      <label for="dropdown">Which Option Best Descirbes You?</label>
      <select id="dropdown">
        <option label="Prefer not to say" Value="Nothing"></option>
        <option label="Footballer" Value="Footballer"></option>
        <option label="Student" Value="Student"></option>
        <option label="Teacher" Value="Teacher"></option>
        <option label="Parent" Value="Parent"></option>
        <option label="Other" Value="Other"></option>
      </select>
      <p>Do you like our platform? (Don't Lie!)</p>
      <div class="opt">
        <input id="mm" type="radio" name="radios" value="Yes">
        <label for="mm">Yes</label>
      </div>
      <div class="opt">
        <input id="dd" type="radio" name="radios" value="No">
        <label for="dd">No</label>
      </div>
      <div class="opt">
        <input id="bt" type="radio" name="radios" value="IDK">
        <label for="bt">I dont know</label>
      </div>
      <p>Your Favorite Team(s):</p>
      <div class="opt">
        <input type="checkbox" value="PSG">
        <label for="check">PSG</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="Barcelona">
        <label for="check">Barcelona</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="Real-Madrid">
        <label for="check">Real Madrid</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="Man-City">
        <label for="check">Manchester City</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="Man-United">
        <label for="check">Manchester United</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="Liverpool">
        <label for="check">Liverpool</label>
      </div>
      <div class="opt">
        <input type="checkbox" value="other">
        <label for="check">Other Teams</label>
      </div>
      <label for="com" class="com">Any Comments:</label>
      <textarea style=" padding:10px; height:100px; border-radius:5px; outline:none;" id="com" placeholder="Additional Comments..."></textarea>
      <button id="submit" type="Submit">Submit Form</button>
    </form>
  </div>
</section>

I like the styling and theme. The only suggestion I would give is a slightly larger font in your inputs and submit button - just to make it easier to read, you know.

Happy coding, friend!

2 Likes
3

Yes, the formatting. Thanks for pointing that out brother!
And yea, I’ll edit the font-size as well.
Thanks again!

2 Likes
4

I’ve updated the code with the changes. You can visit the same link to view it.

1 Like
5

I wouldn’t call it lazy, it looks pretty nice.

  • I would suggest using an off-white for the body color so it isn’t so bright against the darker color of the form.

  • The form element should be allowed to shrink down so it doesn’t overflow.

  • Your checkbox labels are not set up correctly (you should be able to click the text to check the boxes).

  • Add resize: vertical to the textarea element, so the user can’t drag the box horizontally.

Nice job, keep it up.

1 Like
6

Thanks for noting these points.
I’ve updated the code and you can check it on the same link.
I hope I’ve applied the second point correctly.
Thanks again for taking the time and for the feedback!

1 Like