Survey Form, Need Feedback For Improvement

I completed the Survey Form Project, and need some feedback.

Kal9Mondal :smiley:


Hey this looks pretty good! I would

make your mouse change cursor when it hovers on button.
Remove blue outline when the button is clicked. ouline: none;

Cheers :slight_smile:

Do you mean the “Submit” button?

Yes. You are correct.

@shimphillip Thanks for pointing that out. I had only viewed it on Firefox, before you pointed that out, and had not seen that.
It will be:

.class-name:focus { outline: none; }

Isn’t it?

No. The outline: none; should come under your input type tag.
Something like this:

input[type=“text”] {
outline: none;

Hope that was helpful. Over all, your survey form is pretty nice.

Hey @Belle2, wouldn’t those outline be helpful for “Accessibility” reasons? Like someone using keyboard to navigate.

Hi @kal9mondal,

I had a look at your survey form. It looks awesome. :metal:

The color combination looks really nice. Particularly the white background and black color in the text fields. :slight_smile:

I have a few suggestions for your survey form project

  • Please keep asterisk symbol (*) for mandatory fields
  • I think you should put some meaningful questions (“Will you recommend?”, “Select all that applies” part do not show any relation with the form). It is completely OK if you are just trying out the checkbox and radio buttons.
  • It is a really good idea to think about any real time scenarios for creating a project since you are creating a survey form, you can think that you have just conducted a technical meetup and you are asking participants to fill up this form, now you have to add questions related to the meetup. You can ask participants to add their gender(you can use radio buttons here) or by adding few topics using the checkbox you can ask participants to check the topics they want for the next meetup etc.

The project is very good!
Best luck! :+1:

@gauravkukade :slight_smile:

1 Like

No, it has nothing to do with accessibility. The outline: none, removes the blue line that appears around the input field when clicked on. Try to enter your name or Email address in one of the input fields, you’d see the line appear.

I feel the blue color doesn’t’ blend with your theme color. Removing it won’t affect the general performance of the form. It’s just a visual thing

1 Like

The act of adding outlines or highlights to a focused field falls under the term “affordance”, which is distinct from accessibility. Affordances are more or less any kind of hint that makes using a UI easier under normal circumstances, such as making elements consistent, underlining keyboard shortcuts in menus, and as mentioned, highlighting focused elements.

@Belle2 @chuckadams I’ confused here. Should I remove those outlines or change their color to fit my color palette?
As you might have guessed, I 'm a beginner, and a bit lost.

P.S. Those outlines appear only in Chrome. Can you tell why?

I strongly recommend changing the color of the outlines and not removing them. They appear in chrome because all browsers render form elements slightly differently. If you provide the CSS, any decent browser should render it though.

1 Like

I’m a beginner also, lol.

It depends on you. What do you want to do?

If it were me, i like to try out things. Tweak it here and there. If it’s nice, it stays, and if it’s not, i remove it.

So, you can try changing the color, see if you’d like it.

I appreciate your helping me out. I’ve tweaked the page a little, can you check it out? Also, do you know how to change the outline of radio & checkbox in Chrome? I cannot figure it out.

I don’t at the moment.

How did you align all the elements ? I am having problems in aligning the elements

I went through the example project first and looked at what each line did. I would suggest you go through the example project. Or are you just looking for the exact CSS Properties to use?

1 Like

The label is in a separate div with display: inline-block (which prevents it from line-breaking between divs) and text-align: right (which does the obvious). I found this out by using the dev tools inspector tool which is Cmd-Opt-C on both Firefox and Chrome (probably ctrl-alt-c on windows). I recommend learning to use the inspector on as many pages as you can, it’s a really powerful tool.

And to the OP: very nicely done.

1 Like

thanks for the reply

Looks great to me and I don’t think you need to change anything!