Advise on my survey form

Hi Everyone, just wondering if i can get anyone’s opinion/advise on my survey form? Just anything i have done wrong?
i’m struggling with the responsiveness too

Thanks in advance!

Welcome to the forums @lulu_bed. Your form looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to select, not just the radio button / checkbox.
    • Revisit the lessons on creating and nesting radio buttons and checkboxes in the label element.
  • Change the cursor to a pointer when hovering over the submit button.
1 Like

Thankyou so much for your help Roma, i didnt know about W3C validator!

A very nice clean and stylish design! I wonder if the background of the form could be a bit darker – it might make it easier to read.

I am not seeing any problems with responsiveness – it looks good on a smaller screen. That issue has been bugging me too. I did find that it is helpful to take a “mobile first” approach – design for a small screen first and then adjust for larger screens. And I just discovered the “toggle device toolbar” button in the Chrome browser developer tools which helps a lot. If you are not familiar with it, it is a button on the top menu bar of the developer tools window that enables you to see what your page will look like on a variety of mobile devices. There may be something similar in other browsers.

1 Like

You see where the input text boxes hang out of the form when its in tablet mode. I feel like there’s an easier way to make the whole page responsive i’m struggling to work out all the different device sizes, any help is much appreciated!

Hey @lulu_bed ! Pretty neat job on the desktop version. Two quick things that i was able to notice. One,you have wrapped your input elements with label which I feel isn’t the right way to go about it. You may need to wrap them in a div and assign it the relevant id/class. As far as your input boxes sticking out ,it s because they have a fixed width of 600px and it sticks to that eventhough you reduced the size .So you will need to write media queries for the device you look to cover i.e desktop,ipad and mobile.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Also its better if you start setting the width of elements inside the container in term of percentage,that way you don’t have to break your head with getting their sizes right with pixels for each screensize. Percentages will help you scale down based on the parent container width. Hit me up if you need more help ! cheers :slight_smile:

1 Like

I wonder if you just set the width values of your input elements to a percentage rather than a fixed value if that would prevent them from spilling over. Like so:

#name {
width: 98%;

If I recall correctly I was having similar issues and that helped since setting the width of an element to a percentage means x% relative to the parent element.

1 Like

Thankyou! thats a great help :grinning:

1 Like

Woooo thankyou it worked :nerd_face:

1 Like