Survey Form Feedback - Food Order Form

Hi all,

I have recently completed the survey form project. I have chosen to make a food order form, with the theme being on the good burger movie.

Any feedback would be much appreciated!

Thanks in advance,

Samatar :+1:t5:

2 Likes

Looks good. I like your design.

Thanks for the feedback

Hi Samatar,

haha I like it, great job! :hamburger:

My ideas:

  • I think the white space on the left and the right on a big screen distracts me a little bit from the actual form; I would maybe decrease this a little bit
  • the hamburgers in the background totally grab my attention, because they look “bold”; I think decreasing the opacity of the background would draw the attention to the real important thing (= the form)

Keep us posted!

Hi Miku,

Thanks for the feedback once again, much appreciated!

I had some difficulty trying to sort out the size of the white space as it changes quite a lot depending on the screen size. Is there a way to keep it consist throughout all screen sizes whilst keeping it responsive at the same time?

Kind regards,

Samatar

I love the design and the colors used. Lovely piece of work!

Hey there,

I think in the end you want a “fixed” form with only a different size of space around it.
I think I would build the form with a column flexbox and put the form itself in flexbox to center the form in it.
But that’s up to you, probably you’ll also find a working solution with your grid.

Thanks for the tip, i’ll try implement it into the form

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 14/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • 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>’
  • Not sure if you’ve noticed but clicking the submit button does nothing. That’s because you’ve put it outside of the form element.

Hi @Roma,

Thank you for your comments, I always wondered where the test script disappeared to whenever I start a project :sweat_smile:. I ran the test after making a few quick changes and I got 17/17.

Kind regards,

Samatar