DEV Community

Cover image for Glam Up My Markup Submission (Interactive Form)
Hikolakita
Hikolakita

Posted on

Glam Up My Markup Submission (Interactive Form)

What I Built

I created a form with a visually appealing and interactive UI, inspired by the laid-back atmosphere and adventurous spirit of summer camps. The design incorporates playful elements to evoke the fun and excitement of summer activities, while also providing a smooth user experience.

Demo

You can preview the website here.
All the source code is on this github repository.

Image description

Journey

Creating this form was a delightful journey filled with experimentation and learning. I explored various design techniques to achieve the desired aesthetic and functionality.
One aspect I particularly enjoyed was adding animations and effects to enhance user engagement. I'm proud of how the form turned out, striking a balance between usability and creativity.

Thanks to DEV community to create this kind of contest, it's very cool!

Credits

  • Thanks to Adobe Illustrator AI for the background (yes, of our days we credit AIs lol)
  • Vineeth.TR for the awesome panda idea to style a form! (check his codepen account)
  • And I guess everything else is made by me! :)

Top comments (4)

Collapse
 
sarahokolo profile image
sahra πŸ’«

I love the concept πŸ’₯. Although it seems it's not tailored for mobile view at all. Other than that. Great work πŸ‘βœ…

Collapse
 
hikolakita profile image
Hikolakita

Thank you for feedback! And yes, It's not very responsive sorry...

Collapse
 
hikolakita profile image
Hikolakita

Don't hesitate to tell me what you think about it!
I really wanted to do better, but I couldn't due to lack of time...
I'll catch up on the next challenge! :)

Collapse
 
kaustav1810 profile image
Kaustav Banerjee

you can add basic validations like disable the submit button until dropdown is selected. Also the "Thank you" message after form submission is overlapped with the form.