Survey page, feedback please!

I passed the tests, but I would love some feedback on the design as well as the media queries. I tested on my laptop, an iPad mini and an older iPhone (not the newer bigger one). It took me forever to get it to work on them all, but I feel like I didn’t exactly make it responsive correctly, so any input on that would be appreciated.

https://tessfisher.github.io/survey/

2 Likes

@tess did you create this survey ?

Yes, I did. What do you think?

@Tess I really enjoy the creative design, especially the background and the sliding form. But here is where I feel there is room for improvement. Often putting the mouse/cursor on the far left side of the screen can result in the form closing. Also, if I want to use auto-fill suggestions, the form closes. Maybe creating an animation when the form closes can make it smoother.

Fantastic job at creating a unique survey page! :smile:

Hi the survey looks good. I realized a small bug which is if I move the mouse cursor and leave it close to the edge on the survey, the survey will keeping looping in and out.

Thanks shaux and raregamer! Yeah I wanted it to stay open after the animation but I couldn’t figure out how to do that without delving into JavaScript which I haven’t learned yet. The problem is that as soon as the cursor is not hovering over <main> then it sets back to the starting position. If anyone has a simple fix I’d love to hear it. Otherwise I’ll update it down the line with JavaScript.

On touch screens I have the animation automatic instead of relying on hover.

The background image is really nice, but the form coming out of the side is a little bothering to me.
Maybe put the tab on the bottom or put a button in the middle of the page to start the form.
I think it would be better if the form came from the bottom of the page instead of from the side.

You picked a really nice font that matches in really well.

And per month, I walk outside about 20 days. not zero to three.

Please make your commenting section a bit taller and the submit button bigger.

At all else, great job.

Agree, nice design. Well done @Tess!
However I would also suggest to improve the animation, smoother in and smoother out.

Thanks for the feedback!

I changed the width of the number box so that you can see it says 0-30, made the textarea larger and the submit button a little bigger as well. I very slightly adjusted the animation but will largely leave that alone for now and try in my next project to have smoother movement.

You really know how to make a touch to a form. I had serious headaches creating my own @ https://danielkpodo.github.io/surveyform/. But I do think the infinite animation on hover is a little bothering. Removing that will be great. and a work on the page responsiveness will also be a plus.

You did good

Yours is great! I really like your Einstein page as well!

As soon as I learn how, I’d like the animation to go once on hover and then have the form stay out afterwards. But maybe I should just get rid of the hover and put it on a delay like I have for touch screens.

I did have a hard time with responsiveness. Is there a specific device/browser you have that it isn’t working well on? If possible, could you post a screenshot so I can see what’s going wrong?

1 Like

I inspected with chrome dev tools and realized it breaks a little around (max-width: 425px).

Anyway thanks for your soothing comments on my projects @Tess. Much respect and love from me.

1 Like