Survey Form, I stink at design, feedback requested

Survey Form, I stink at design, feedback requested
0

Hi all!

My survey form:

https://codepen.io/PeanutSunday/pen/bGGMgqL

It passes all the tests last time I checked, but I’m horrible at designing the look of a page. Is the text too big? I enlarge the text on my monitor cause I have crummy eyesight but this looks super huge in CodePen? Are the font choices good? I know I have to make the button a little more snazzy. Also, the textarea box gets wonky with different browsers, does it look ok?

Many thanks for any advice :slight_smile:

1 Like

Hi!

The textbox overflows when viewed via mobile.

You can use max-width property to limit the textarea’s width to around 100% of container.

TeodosioSeige, thank you! I will check it, I didn’t even think to look on mobile.

Hi, you can use Web Developer or Window Resizer extention in chrome for this purpose.

Maybe you could try making .survey class width 100% or 100vw on mobile screens. You can use media queries for that. Check that article here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Thanks all for the feedback! Does it look better now? It looks ok to me now on Android Opera, Firefox, and Chrome mobile.

Capture

The input boxes for name and email needs adjustment as well. But other than that, it looks great in mobile!

1 Like

@ TeodosioSiege Thank you so much for your help! I’ve added max-width to those too, is it ok now? What kind of device do you have? I have an Android phone, it looked ok to me, but I’d like to know what phone it doesn’t look right on so I can check it next time.
Thanks again!

Great! The input elements are within the borders now.

With regards to my phone, I cant remember exactly which samsung product it is. But the viewport is quiet small.Make sure you use media queries for devices smaller than 480px in width. Else, aim to design the mobile version first, and add media queries for larger devices. Btw, I noticed while checking in desktop that the survey form is now aligned to the left. If you want to center it you can set the form's width property, then set margin: 0 auto;