My Survey form task

Hi all, I have finished my survey task, it is responsive and I am happy with how it turned out. A couple of the elements don’t line up but I couldn’t figure out a solution, for instance, the submit button is shorter than the text area above, if anyone has a solution please let me know.
Just let me know what you guys think about the project and the code. Thank you.

Survey Form

1 Like

Your form looks good @joeyworthington. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
      Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • Maybe revisit the radio buttons/checkbox lessons.
    If you’ve filled out a form you probably noticed that we are used to seeing the radio buttons and checkboxes to the left of the label.
    There’s not much styling done to these two sections.

This is a suggestion, you don’t have to correct it if you don’t want to.
Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.

Why not make your submit a button rather than an input and style the button. Also, is there a reason you want it to look like a bar rather than a button?

Thank you for all your help and sugestions, I have made some changers and still working on other bits to make the form better. Thank you for all your help.

I like your design. Good job
Add some margin and padding to your form field.

1 Like

I can see the changes @joeyworthington. It’s looking better.

Run your HTML code through the W3C validator again. You have the following;
<div class="form-element" class="submit-button">

If needed, review the lesson regarding applying multiple class attributes to an HTML element.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.