Survey Form: your opinions and suggestions

Code Feedback
1

Hello fellow coders!
Here’s my final draft of my Survey Form project. I would greatly appreciate any expert opinions and suggestions.
Thanks!
@zuhameer6 (It’s me again!)
The webpage: JSFiddle
The code: Edit fiddle - JSFiddle - Code Playground

2

Very nice. I suggest you to check your form in different screen. I looked it in my android cell phone. The alignment of heading and paragraph is not properly.

1 Like
3

Hello again!
Wow! It looks good. It might be simple, but I really like it, especially the colors you used and how they match with each other.
There is just that one problem where on a smaller device, your h1 and p element are flowing off the screen. I would have helped you, but I am also struggling with that problem. Maybe someone more experienced can help you with that.
Anyways, good job! Happy coding!

1 Like
4

@hasanzaib1389 Yes! Thank you for mentioning that! Will do some css editing soon and post the updated version when it’s ready.
Thanks for the compliment.

1 Like
5

@zuhameer6 Thank you for your kind words - you are very encouraging and as I am learning completely alone, it means a lot!
As I replied to hasanzaib, I will be fixing the mobile device issue soon and post the new version.
Shkran!

1 Like
6

The color scheme you’ve chosen, particularly the background color (rgb(35, 35, 35)), lends a modern and sophisticated feel to the overall presentation. It’s important to ensure that text remains easily readable against this background, especially for users with visual impairments.

The styling of the input fields is sleek and consistent. The orange border adds a nice contrast, though you might consider experimenting with different ways to make the input fields stand out more prominently against the background.

Using fieldsets to group related form elements is a smart choice. The border and background colors you’ve applied to them help provide structure and organization to the form layout.

The submit button looks fantastic. The bold orange color and rounded corners give it a visually appealing appearance. Adding some hover effects could further enhance its interactivity and make it more engaging for users.

It’s essential to ensure that your design is responsive across different devices. Testing your project on various screen sizes will help ensure a seamless user experience across desktop and mobile platforms.

Lastly, consider adding comments to your CSS code to provide clarity and context for each style rule. This will make it easier to understand and maintain your code in the future.

Overall, your CSS styles contribute significantly to the overall aesthetics and functionality of your project. Keep up the great work! Overall, not a bad job :slight_smile:

1 Like
7

Thank you very much for your generous compliments. As I am learning completely alone it means more than you know.
I was already thinking of adding some hover effects, as well as fixing the mobile client issue. Adding CSS comments is new to me - thank you for the suggestion, will do.
Again, thank you for the support and encouragement and I will be sharing the updated version soon.
Nicolas, 17.

8

Alright, I’ve finished my corrections and here’s the new version:
The webpage: JSFiddle
The code: Edit fiddle - JSFiddle - Code Playground
I’ve added some CSS comments, tried to adjust the styling to work on mobile devices (let me know how it works because I wasn’t able to thoroughly test it!), added some hovering for the dropdowns and submit button and I think that’s all.
Thank you, @hasanzaib1389 @zuhameer6 and @michaelhenderson for your helpful suggestions!
Nicolas

2 Likes
9

It’s amazing. It looks and works perfectly fine. :100:

1 Like
10

Hey, this looks real nice. Great job! I’ve got just a few accessibility improvements you could make.

  • The white “Submit” text on the orange button does not have enough contrast to be considered accessible. The text needs to have a 4.5:1 contrast ration with the background to meet minimum accessibility requirements. I would use the same color combinations for the Submit button that you are using for the select lists since those meet the minimum contrast requirements.
  • The three radio button groupings in the third box and the two radio button groupings in the fourth box are in the same fieldset. They all need to be in separate fieldsets. Also, the legend for each fieldset cannot be wrapped in a span. It must be a direct child of the fieldset and the first element in the fieldset.
  • The first three inputs at the top of the page aren’t showing the text that is typed into them. I think you need to adjust your CSS for these.
  • It’s considered a best practice to wrap all of your main content in a main element. In this case that would be all of the content on your page.
1 Like
11

@bbsmooth Working on it…(thank you for the help!). Update coming later today!

12

Alright, @bbsmooth, I’ve finished implementing your accessibility additions. Here it is:
The webpage: JSFiddle
The code: Edit fiddle - JSFiddle - Code Playground
Thank you very much for the help - making this webpage better step by step is a lot of fun and I’m learning more in one project with your help than I could in hours of tag memorizing.
Perfection is everything.
Nicolas, 17.

1 Like
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.