Survey form - Feedback and Advice

Survey form - Feedback and Advice
0

Hi folks,

I have finished my Survey form and am willing to get feedback and advice on what needs to be corrected or improved, also if it looks professional or still needs improvement.

Survey form

Thanks in advance.
LeoVargas

The checkbox labels are links to other pages, don’t do that. Use label for so thet the checkbox can be checked instead. Practically speaking you can lose survey submissions.

Thank you @tlc35us, it makes a lot of sense, I have fixed that.

Nice job!
You did a great job, but thin the borders on your inputs. That will make it look better.

True @ConnerOw1115, thank you! Actually. they look more elegant :stuck_out_tongue:
I reduced them to 2px, still thinking to reduce it to 1px.

Hmmm… not bad. I’m thinking to reduce them to 1px as well.

Thank you @ConnerOw1115, I have changed the border thickness.

Looking good! :smiley:

  • How about a pointer cursor: pointer on the buttons?
  • Maybe a different color on hover with the buttons.
  • How about importing another font? It’s done like this:
    • Pen Settings --> HTML --> Insert this into the stuff for head box:
       <style>
       @import url("https://fonts.googleapis.com/css?family=Open+Sans");
       </style>
      
      –> Save & Close
    • Add this line to the body styling:
      font-family: "Open Sans", sans-serif;
      

Thank you @Steffan153, it looks better with the changes you suggested.

Next:

  • How about remove the default border on the buttons? border: none;
  • Maybe give the select box a white background too.
  • When you focus an input box, currently it just has an outline. You could try using a shadow too, like this:
    • First, remove the default outline (in the ordinary input[type="text"] style group): outline: none;
    • Add another style group input[type="text"]:focus and inside it, set box-shadow to 0 1px 10px #999.
    • To make it kind of animate, add this to the input[type="text"] style group: transition: box-shadow .3s;
    • add the same style rules to the textarea using the comma separator in the style groups.
  • Also maybe remove the outline from the select box.
  • Good job! :smiley:

( ͡° ͜ʖ ͡°)

Hi @Steffan153, I have made the changes you suggested.

Is it ok to add focus style to radio and checkbox inputs? what would your recommendation be?

I suggest not adding a shadow:
DeepinScreenshot_select-area_20190713073556

Your form is looking great now!

Thank you @Steffan153 for your feedback and time, I have added the following style to remove shadow to radio and checkbox inputs.

input[type="radio"], input[type="checkbox"] {
	box-shadow: none;
	transition-property: none;
}

I love it, it looks like if I have used a framework, the best is that I understand what am doing hahaha :stuck_out_tongue_winking_eye:

I appreciate all your inputs folks, you are ahead of me on this journey.

1 Like

Although that’s probably not needed :wink:
Just the box-shadow

Thank you @Steffan153 for the guidance. I have updated my survey.

Hello! I’m new here.
Which app am I going to input the code.
For instance, survey form?

What code? I was instructing @leovago.