šŸŽ… Santa's Survey Form - Appreciate your feedback!

Code Feedback
1

We are in November, but it seems that the Christmas spirit has taken over my survey form project!:grin:

What I have tried to achieve is:

  • mobile first design
  • clear and clean code
  • attractive and accessible content

Appreciate your feedback!:heart:

11 Likes
2

This is really good. Perfectly responsive with clean layout and a cute design. Thereā€™s really nothing that jumps out at me that could be criticized in a major way.

Though if I had to dig deep, it seems that while the input fields have required attribute on it, you can just ignore it. In fact, you donā€™t even need to match the input. I typed a bunch of numbers into the email field and while it was highlighted in red, it can be easy to miss and it didnā€™t stop me in the end. So thatā€™s something you could look into, maybe let the user know when they hit the ā€œSend my answers to Santaā€ button.
Disclaimer: I tested this on Firefox and havenā€™t checked if it works on Chrome or any other browsers. If someone else who uses a different browser could give their feedback, thatā€™d be great.

But thatā€™s about it really, everything else is done really well both technically and visually. Keep it up :slight_smile:

1 Like
3

Hello @Senatrius! Thank you very much for your feedback :heart:

Regarding the verification of the required fields, you are right. It is an aspect that I have to see if I can solve in this layout with pure HTML / CSS (my goal is not to add anything from js in the first 4 FCC projects).

The challenge arises due to the layout. The required fields are on the second slide of the form and the submit button would be on the last slide (by clicking the button the warnings would be activated in fields that are no longer visible). :woman_facepalming:

The solution would be to not allow to advance from the second slide without properly completing the first 3 fields ā€¦:thinking::thinking:
Now that my neurons have rested for a few hours, Iā€™m going to rethink a way to achieve it with pure HTML / CSS!:muscle::wink:

1 Like
4

Itā€™s so cute!! Very nice job! Hereā€™s some small details.

The dropdown box looks kind of weird. itā€™s a small box within the larger blank area. I think it would be better if it was the same size.

image
image1243Ɨ439 28.6 KB

Also when hovering on the submit button it flickers between the button and the thanks message a few times. Should you just display it after clicking the button instead of on hover?

1 Like
5

Actually the dropdown thing is happening on other Codepen projects when it wasnā€™t before. So it must be a problem with Codepen or my browser or something. Donā€™t knowā€¦

1 Like
6

Really :heart:'d your tribute page and now this?!

Keep it up!

1 Like
7

After trying to solve the situation with impossible CSS patches :exploding_head:, Santa has enlightened me :grin: and I realized that I could simply put the fields that require verification on the last slide (next to the submit button). :raised_hands:

Thanks for your feedback @Senatrius!

1 Like
8

Hi @stressstressstress! Thank you very much for your feedback!:heart:

Regarding the appearance of the dropdown, it doesnā€™t happen to me either in Firefox, in Chrome or in Android. Which browser do you use?:thinking:

Regarding the problem when hovering on the submit button, I made some changes and it doesnā€™t happen anymore, thanks for letting me know!:+1:

Awww thank you very much @KarenWangari2017!!:heart:

9

I use Chrome. It is even happening to the FCC test suite dropdown which definitely wasnā€™t like that before. So no idea.

The button is better!

1 Like
10

Well, thatā€™s one day to do it. Tried it out and it works much better now. Well done :slight_smile:

1 Like
11

Loved the use of css animations, and the clever use of css selectors.

Well done.

1 Like
12

Nice work! Nice design and right use of colors. They convey all the festive vibes to the user. :ok_hand:t4:

1 Like
13

This was such a fun idea!! The beginning animation creates a phenomenal first impression, and it stays great from then on. The css comments were really useful - I think I learned some things by reading it :smile:

1 Like
14

Thanks @pschorey! I have learned a lot about css selectors thanks to this project!:sweat_smile::muscle:

Thanks for your feedback @shervinee :wink:
The choice of bold colors challenges me a lot, my comfort zone is in neutral colors. :woman_shrugging:
It helped me a lot to take Christmas animations as a reference.

Thank you @spacetimespecter!:blush:
I am glad that you find the comments useful, surely they will also help me in a couple of months, when I no longer remember why I did what i did! :thinking::laughing:

1 Like
15

Nice and attractive work. Some time ago i used font ā€œLobsterā€ - good one. :+1:

1 Like
16

Wow! I really like how cute and how stylish you made it. Iā€™m glad I saw this. Your animations are really smooth and what you did to the inputs are amazing!
keep up the great work!

1 Like
17

@VaNaChiMa, @ConnerOw1115 thank you very much for your feedback!:heart:

1 Like
18

third section in i think you mean Cash money instead of chash money :slight_smile:

1 Like
20

I just corrected it!:smile: Thanks for letting me know about that @ZTD!
Itā€™s amazing how after reading something so many times we lose the ability to detect those typing mistakes!:see_no_evil::grin:

1 Like
21

Nice work,very impressive!! :star_struck: @MartaFagundez

1 Like