Second project - Google style/Material design survey form

Code Feedback
1

Hey guys, just completed the Survey Form project! I broke away a bit from the guidelines and wanted to use some floating labels for the questions, because I wanted to keep that Material Design feel.

I originally struggled with this because the tutorials I saw all had you making the input required in order to get the floating labels to work, however with some research I saw that this was not strictly needed. The only catch would be enforcing the the required inputs, thus I turned to JS.

Here is the pen: https://codepen.io/Pixel123/pen/zyLQBN

(For anyone interested, the unfinished V1 of this can be found in my codepen profile)

2

Again very nice work. Could you help me understand what the font awesome css is doing?

3

That’s for the heart icon at the footer, the ‘Made with <3’ bit.

4

ah ok, I see. really like that you took the time to change the style of the radio buttons. I had looked into that for my form and must admit I got lazy and left it as it is.

5

I like the small animation that happens when you click on the inputs or the dropdowns and they move up in blue. Very nice, professional touch! Have you already learn JS and implemented it?

Only issue is when I resize the page, it has a horizontal scroll (when in editor view) and the comment field gets broken off on the right. Maybe just make it with less columns when it hits a certain width? I also think that the top header and description gets a little off center when it is smaller too.

1 Like
6

Thanks! I wanted to keep the questions visible while the user was entering inputs. I’ve not really learned JS at all yet, but it’s next on the list, I just know a tiny bit of Python and took some ideas from tutorials!

I’ll try and add some media queries for the smaller views!

1 Like
7

Can anyone help me figure out why the .bg-header keeps cutting off and making the horizontal scroll happen on smaller views? I’ve defined max-width as 100% so it should take up the whole page… What am I missing? This is driving me crazy!

8

I’m a little confused by the way you use your label as a trail without the for and then trailing with a label with a for= I’d on your radio buttons.

I’m on my phone and didn’t see the header with a scroll. It seems to have resized nicely.

9

Beautiful and professional piece … However, I’m getting it from my mobile device but not responsive… Otherwise great work

10

Sorry, I don’t understand what you mean by this:

I’m a little confused by the way you use your label as a trail without the for and then trailing with a label with a for= I’d on your radio buttons.

11

You have a leading label without a for=I’d then the radio button and then a trailing label with a for=I’d. It looks like you’re using 2 label tags for each radio button.

12

Aahh right! It’s to allow the user to click on both the text and the actual button.

13

Thanks, I’ve never seen that before.