Redid Survey Form

Project Feedback
#1

Hi there! So I redid my survey form and I think the new one looks cleaner.

anyway, as always feedbacks are greatly appreciated. Thanks! :slight_smile:

new: https://codepen.io/joaquiera/pen/XWpNZdW?editors=1100
old: https://codepen.io/joaquiera/pen/PobzOBv?editors=1100

EDIT: I updated the pen with mobile responsiveness in mind based on the feedbacks.

#2

HI @jongieoaquiera !

I think your new form looks good.

There is a little bit of a horizontal scroll bar on smaller devices.
When you narrow your browser window you can see the content spilling over a little bit.

I think it would be nice if you added a cursor pointer to the submit button.

1 Like
#3

Hi @jwilkins.oboe,
thanks for the feedback, I updated the project to add a cursor on submit and remove the horizontal scroll bar on smaller device. thanks!!! :smiley:

#4

Your new form looks good @jongieoaquiera. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There is an HTML syntax/coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

I’m not sure if you’ve noticed but there’s an issue with your code. This line overflow: hidden; prevents the user from seeing all the form. This is a bad UX.
If you added it to prevent the horizontal scrollbar then that wasn’t the correct approach.
Looking at your code in the #card you give width: 500px;. So you’ve hard-coded a width but what happens when the device is smaller? That’s when you’ll get a horizontal scrollbar.
What would happen if you use max-width instead.

Side note, to help with responsiveness you should try and get in the habit of using relative units.

1 Like
#5

@jongieoaquiera Hello, I am liking that linear gradient in the background. The age limit is 0 to 99 years old. Can people that are 100 years old use the form? Ha, ha, ha. Joke.

My suggestion are to:

  • Style the button to match the page.
  • Add a hover effect to the button.
  • You can stack the checkboxes so that they will be lined up on the left hand side.
  • The mobile view needs some adjustment because the main div goes off the page. You can add a media query to it.
    (It is possible to create a responsive form without a media query).

Screen Shot 2021-03-31 at 14.31.47
Screen Shot 2021-03-31 at 14.31.47375×892 48.6 KB

1 Like
#6

ohh, using max-width automatically resizes the box itself to fit in the viewport.

I’ll try to use relative units more on the next project. Thanks @Roma :smiley:

#7

hahaha good one @brandon_wallace.
I still get confused on using media query, i’ll try to update the survey form based on your suggestions after I finished the next project. Thanks!!! :smiley:

1 Like
#8

Just so you know, there is still a bad UX in that user’s cannot scroll to see the whole form because of overflow: hidden;

For a small form like this you shouldn’t need to use a media query. Once again, don’t hard-code pixel units. Use relative units.

#9

@jongieoaquiera I only ask because I know someone that is over 100 years old. Lol
Look at this form I did a long time ago. I did not use a media query.
https://codepen.io/brandon_wallace/pen/xezoxN

1 Like
#10

I removed the overflow:hidden and used relative units . It makes the form a lot better especially when viewing from my phone. the thing is, it’s still not 100% responsive because some elements in the card overflows when the screen size is 250px or less. should i just ignore it given the size is really small?

#11

That’s because you’re hard coding a max-width value (rem). What if it was a percentage instead?

#12

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