Survey Form Feedback - as party request form

Super new at this!
Any feedback on my survey form would be greatly appreciated!

I noticed few things

  • You added a background color to the background which made the background image dull. If you wanted to reduce the sharpness of the background you can use opacity instead of background color

  • Your rgb element is not well defined.

background-color: rgb(255, 226, 255, 50%);

In this case if you are adding a fourth figure then your should use rgba
There is also other rgb where you mixed up the figure, I don’t know what you were trying to do but it’s not in standard.

  • Ensure to always put a semi column ; after defining a css style.

  • Your container is not also responsive, when I changed the view the design was not pleasing again, the problem came from the parameters you set your margin element to. I tweaked the paramaters a bit and I got a pleasing result

    margin: 60px 200px 100px 200px;

And to make your page more responsive you can use the media query so that if the view is adjusted or opend in a smaller or bigger device the site can still be displayed well and nicely to the user.

  • Try to make sure all your elements are aligned to the same size and not come bigger than others as simple as it may sound it’s important. There are some input longer than others and also the label is longer than all of them.

This are the few things I noticed which can be corrected. Overall you did a nice job

1 Like

Welcome to the forums @nicolecullen723. Your page looks good. Some things to revisit;

  • Validate your email addr with codepen so we can see your page full view
  • 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.
  • Keep all of your styling external. Do not use in-line styling.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    There’s a horizontal scrollbar on smaller screens and elements fall out of their container
  • To help with responsiveness, rather than using fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.

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