Survey Form done, feedback please

Code Feedback
1

Beginner here, looking for a feedback and advice on Survey Form project, especially codewise, since I’m not a designer. Thankshttps://codepen.io/paramedas/pen/dwVQJw

1 Like
2

I like the look of your form and your colour choice. You can still work on the following:

  1. align the select buttons and the check-boxes with the rest of the inputs
  2. align the questions with their input boxes, some of them are placed a little below
  3. add some bottom margin to the form
3

Thanks, but I don’t understand. I wrote the code in Notepad++ and then uploaded it. In Firefox everything is aligned, but not in Chrome.

4

At first I thought I uploaded wrong version and deleted the pen. So, here it is again https://codepen.io/paramedas/pen/xmXMoL

5

Any suggestions? Regarding Mozilla vs Chrome differences?

6

(Chrome) You should try in your HTML to keep things together. For instance, in the example survey HTML:

<div class="rowTab">
<div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="input-field" 
placeholder="Enter your name" required>
      </div>
    </div>

While with yours, you have them in separate divs. There’s just too many divs which will make it harder for you to CSS afterwards to make them next to one another. Try simplifying your code and see if that helps?

Other than that, you could just make the page look pretty. Add some color, make the questions bold to stand out, add box-shadow, put each question or whatever in boxes, etc. Whatever you wanna do, just make it attractive :slight_smile:

1 Like
7

Hi, try to simplify.

  1. Decrease the number of div tags. Replace div by a more semantic tag.
  2. Try to not use bootstrap
  3. I prefer to use CSS grid instead of flexbox
1 Like
8

Thank you all for your insights. I’ll try to improve the code

9

Ok, new version is up. I think I’ve corrected mistakes (fingers crossed). If not, don’t spare my feelings. Btw, don’t mind the design - I really can’t decorate

10
11

Yeah, the code looks really nice! You simplified it and I think the survey itself flows better. Your CSS is also very nice and linear. Nice improvements all around

Only thing now is to make certain elements responsive, such as: Your input fields (the placeholders get cut off…not a huge issue) and Your submit button gets squished when scaled down.

If you change your border-radius on your submit button to 5px instead of 5%, you’ll get smoother edges too. I tweaked it and made it have a {margin-left: 28%; width: 50%} and it fits center and scales down well :slight_smile:

12

First of all, big thanks. Thank you for taking the time to help. I really appreciate it.

I can also tell this code works better. The page is displayed properly in both Chrome and Mozzila which wasn’t the case with the previous one and it scales better.

I’m a bit apprehensive about using px when it comes to responsive design, so I switch everything to percentages. I suppose it’s a bad habbit. I’ll try to fix placeholders and submit button.

13

All done. I guess it’s ok now

14

great work the codes looks nice , good job :slight_smile:

15

thank you very much :blush:

16

Yeah, I am too. I really only use pixels with small stuff like the border radius or box-shadow. With those properties, I know I’m probably not gunna use high numbers and probable not have scale-ability problems? (I’m still experimenting too)
With everything else, I use percentages (margins, widths and heights) and ems (font and spacing)

17

Thanks for sharing. I’m still pretty new and trying to catch as many tricks of the trade as I can.

18

Nice work! The code is good to read. Maybe you can put the <header> tag inside the body.

19

Sorry for not responding earlier, I was away.
I thought that it has to be somewhere between the head and the body. Thanks for clarification, I’ll correct it.