Restaurant-Survey Form

Code Feedback
1

Hi everyone! I just completed my survey form project. It was a little bit tricky compared to my first project. Please give me your suggestions and feedback. So I can improve it. Here is the link: https://codepen.io/shwetapatel3591/pen/arabpZ

Thank you,
Shweta

3 Likes
2

Nice, it looks really good! My recommendation is with the button:

  • You could set cursor: pointer on it to give it a pointer look
  • And maybe add a hover style to it. (Like#submit:hover {background-color: somehovercolor} click on it that blur if you can’t figure it out, it will answer you)

Also, consider going to html settings, and click the ‘insert most common viewport meta tag’, then save & close. This will make it look better on mobile devices.

2 Likes
3

@shwetapatel3591, that’s a nice looking page. Just something you should be aware of;

  • codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link. You have a misspelling in CSS that affects how your radio buttons look and in HTML, you’re using id’s more than one time.
  • Don’t use the <br> element in HTML. Use CSS and margin/padding for styling
3 Likes
4

Thank you so much, Roma, for your suggestions. I will look into it and make all the changes.

1 Like
5

@Steffan153 Thank you for your feedback. I will do the changes with the button. l just forget to apply hover effect. I appreciate it.

1 Like
6

@shwetapatel3591 Nice color combination, font, and background image. I would love to eat at that restaurant.
Here is my commentary on what can be improved.

  • At 500px body width and smaller the input fields are not centered.
  • The option list field is a bit shorter than the others. I recommend making it the same width as the other fields or much shorter.
  • At 600px width the textarea is going off the page and the input fields could be wider to take up more width.
  • How about a hover effect on the button?
  • I recommend also setting cursor: pointer on the button.
3 Likes
7

@shwetapatel3591: Hint (click on blur to reveal): Set max-width: 100% on the textarea

8

@Steffan153 Thank you for the hint to solve my issue. I am working on it and definitely try your code.

9

Quick codepen tip: To clean up your code, in any editor (HTML, CSS, or JS) you can click ‘Tidy XXX’ (XXX is HTML, CSS or JS).

10

@Steffan153 I have just completed all the changes. Can you please check it?
https://codepen.io/shwetapatel3591/pen/arabpZ

11

Almost good, but to complete all the changes, complete this, and then also this:

And, maybe make the select box have the same background as the other inputs. If you need a hint, feel free to ask me.

1 Like
12

@brandon_wallace Hi, Thank you so much for your suggestions and feedback. It helps me a lot. I have just try to do all the correction as you mentioned.
Can you please check it? https://codepen.io/shwetapatel3591/pen/arabpZ

13

A comparison between with the viewport meta and without:
Without it:

DeepinScreenshot_select-area_20190530214532
DeepinScreenshot_select-area_20190530214532295×587 96.2 KB

With it:
DeepinScreenshot_select-area_20190530214617
DeepinScreenshot_select-area_20190530214617294×582 114 KB

And of course, you can still scroll down.

1 Like
14

On dropdown, to get same width you can set it to 315px. To get background white, background-color: white.

15

@Steffan153 Thanks again for your guideline. I insert the viewport meta tag. It really makes the difference.

1 Like
16

If you ever need to see what something looks like on mobile, I can send you a screenshot or screen record.

17

@Steffan153 Thanks. I appreciate it and I will surely ask you if I need it.

1 Like
18

Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):

2 Likes
19

@Steffan153 It’s a nice way to check the application or web page. I like it and I will try to use it.
Thanks.

20

@Steffan153 I want to change the background color of radio buttons and checkbox using the following code:
.radio, input [type=“checkbox”]
{
background-color:#fff;
}
But it’s not working. Do you have another suggetions for it?