🎅 Santa's Survey Form - Appreciate your feedback!

🎅 Santa's Survey Form - Appreciate your feedback!

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:


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

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

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.

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

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

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

Keep it up!

1 Like

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

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:

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

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

1 Like

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

Well done.

1 Like

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

1 Like

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

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

Nice and attractive work. Some time ago i used font “Lobster” - good one. :+1:

1 Like

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

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

1 Like

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

1 Like

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

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

1 Like