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
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
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.
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
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.
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.
I feel that the light blue and green are not complementing each other.
Add an image, icons, or SVG to your form?
The paragraph has rounded corners but the other divs do not.
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!
Thanks! It’s looking great now. 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)