Survey Form, revisited

Hi everyone, I’ve made some changes/modifications to my survey form and I’d like your opinion.

  • Should I change the top two dropdowns so that the question is above them? Seems like maybe I should as that would go with the flow of the rest of the page where the question is above and user responses are below it.
    I do kind of like the way it looks now because the first 5 questions are personal information questions.

Thanks…

2 Likes

Hi @Roma!

I like your survey form. I suggest you leave the dropdowns as they are but with more space between the question en the dropdown.

Keep up the good work!

1 Like

This reads very well and I like it. I esp like how you put the questions as part of the top border on most of the questions.

If I were going to change anything I’d change ‘Score each of the following…’ to be part of the top border and instead of having drop downs, I’d have radio buttons. But that’s being picky and it reads well as is.

I’d give the container a min-width so that there’s never a chance that things could fall out of it.

1 Like

Thanks @LoneWanderer, I was thinking the same thing about the spacing. I’ll try and get to that this week.

1 Like

Greetings, Roma:

I really like what you did with the alpha on the top of a second div to create a partial seethrough effect. That rocks.

Regards,
Dwayne Brock

1 Like

???

I’m afraid you’ve found a page that doesn’t really exist. That can happen when you follow a link to something that has since been deleted. Or the link was incorrect to begin with.

@Steffan153…I’d moved it and forgot to update the link. You should be able to see it now.

thanks.
Overall, I like it but I think the inputs, buttons, and select boxes could use some more styling. e.g. on the inputs, border: 1px solid #ccc. Somehow, my survey form had a little similar design.

@Steffan153, ummm…thanks.
To be honest, I’m confused.

If I add that simple border it takes away from the styling I gave to my inputs and makes it plain. Plus I further added a background color to the required input areas.
On the buttons do you mean the radio buttons and checkboxes? Not much to style there but I’ve given a hover effect that I haven’t seen anyone else incorporate.
And it’s subtle but each of the three areas, personal info, gear and modification has a slightly darker background than the rest of the container.

I’m not sure what you mean by this. I think our forms are quite differently styled.

That’s strange. Did you miss a semicolon somewhere? You know about CodePen’s validator.

I forked your pen here and applied the changes I was thinking of: https://codepen.io/phpdude/pen/orqpEp

No, those look good, the submit button – you see it looks different in my fork.

I see what you did @Steffan153 with the input boxes but I styled them with the inset purposefully.
I see the shadow around the Submit button. I’ll think about incorporating that. Thanks.

Yes, I know about codepen’s validator…I use it. Though I normally do my coding in Brackets and check with W3C’s validator. I just cut/paste what I need into codepen when I’m done.

I just added that to make it stand out a little more, the main thing I did was remove the border though. And, I moved the transition for performance reasons & to make it always animate + changed the timing on it.

And I paste it into Visual Studio Code and use it’s auto-validation. I do use brackets for a few things, but the main one is vscode.

Since I don’t have the shadow there’s no border visible to remove…it’d be just bloat. With shadow a border is slightly visible so yes, then it’s good to remove it.
Since the transition is only done on hover, that’s why I did it there. I’ll have to research that a little more to see if there’s a value add to moving it to the button where it’s not used. Thanks for pointing that out.
Making the timing shorter is probably a good point since the user is going to click pretty quick and my one second transition may not even be noticed. Thanks again.

It’s quite a bit more common to use transition in the regular element (no pseudo-selectors) because it animates both ways. And the performance, it’s constantly setting and removing the prop but otherwise it would only set it once.

1 Like

I’m not a motorcycler, but hey. Nice job.
The only thing that is a bit bothersome is the <textArea> comment part. make it a bit thinner.

Thanks for your comment but, why thinner?

Uhhh… It’s just a bit bothering when it’s too wide.

I’m not trying to be argumentative @ConnerOw1115, I’d like to understand what you mean by “bothersome”, (annoying, irritating, irking, vexing, maddening, wearisome, exasperating, etc).
Does it throw off the balance of the form?
Do you feel that the user’s comments shouldn’t be considered so therefore the textarea should be minimal to discourage any feedback?

My thinking was from a UX perspective the user should be given an area big enough to enter more than a couple of sentences without have to scroll up and down to review what they’ve entered. If a comment is asked for, giving a tiny input area makes it seem as though the comment is inconsequential.

Based on your feedback I’m looking at changing it from 100% width to 90% width. With that, on a small screen it lines up with the fieldset area above it giving it better balance.