Please could I have some feed back from my survey form?

Code Feedback
1

I’ve just completed my survey form! I’m really really proud of it, but I’m new to coding so there’s probably some places that need improving. If you have any feed back that would be wonderful. Thank you :grin:

Here’s my survey form:
https://codepen.io/HannahLM/pen/XGzrPL

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36.

1 Like
2

It looks great, other than the textarea flows over the container area, and the submit button never gets enabled.

3

Hi @Hannahllmm

You have some errors in your HTML code. An id must be unique and used only once. You have some that are used more than once. You can see this by validating your code. In codepen, in the html section there’s an arrow in the upper right. Click on it and “Analyze HTML”. You should go back and correct those.
You also have a lot of unnecessary div’s

Overall, your forms style looks good.

2 Likes
4

Thank you for responding, sorry it’s a delayed reply!I think I have sorted the submit button, could you explain what do you mean by “the textarea flows over the container area” I cant see this happening visually when I resize the page.

5

Thank you for pointing out this feature on code pen!! This is extremely helpful. Could you possible give an example of unnecessary divs?? I’ve tried locating them but when I delete them it changed the aesthetic of the page. Thank you

6

I don’t know what happened. I can’t get it to do that anymore either. What I meant is, that the textarea got bigger than that white box that has the form. But it doesn’t do that anymore. Also, I noticed that the button actually isn’t disabled, but it looks like it is. Here are some things you could do to make it look enabled:

  • Make the background color a tad darker
  • Add “cursor: pointer;” to give it the pointer look when you hover over it, so it looks clickable.
  • Add a hover to it, where you can set the background color to a bit darker one.

The form is looking good though!

Caleb

7

If you’re not sure what I mean, you can have a look at my pen (I forked yours): https://codepen.io/phpdude/pen/VNzxOy

8

@Hannahllmm All of this is just my opinion.

  1. Your “Name, Age, Email” fields are labeled and they have placeholders stating the same information. This could be considered redundant. Maybe you only need one or the other.
  2. I feel that the light blue and green are not complementing each other.
  3. Add an image, icons, or SVG to your form?
  4. The paragraph has rounded corners but the other divs do not.

What do you think?

9

Thank you so much for this!! It looks really good, makes a huge difference

1 Like
10

Thank you responding to me! Haha I’m not sure I can get on board with your first three suggestions but I’ve changed the borders on the survey and I think it looks a lot better!

1 Like
11

Thanks! It’s looking great now. :smiley: Here are my last few suggestions, but they’re just my opinion – you can decide if you want to use them, or not:

  • Maybe make the inputs round.
  • By default, the select box’s background is a gradient (at least in Chrome). I like to make all the form inputs and select boxes all have the same background color (maybe white, whatever you like)

Caleb

12

Yes, I only made suggestions on what could possibly be improved based on my opinion.

1 Like
13

Thank you for your comments! I’ve made a few tweaks

14

It looks great! :smiley: I have one more suggestion, and that is to give the inputs a different border, like ‘1px solid #ccc’.

15

Perfect! I was trying to figure out a way to do this but couldn’t figure it out

1 Like
16

Thanks! The form looks great now. :+1: In my opinion, it’s ready to go to freeCodeCamp. :smiley:

1 Like