Glögg party, say what!?

Hanna Olsson
Dec 5, 2016 · 3 min read

When the cold winds of winter sweep through, the Swedish mulled wine season begins, and so do the Glögg parties too. That’s why I this year decide to make a christmassy Glögg party form, instead of the traditional Christmas card I design every year.

Image for post
Image for post

Like my last project this one page site is also built with Sass and is very flat and simple in its design. What is of importance here is obviously the form itself, but to avoid dullness I added playfulness with typography, language/tone and graphic elements. So let’s check it out! ❄︎

Image for post
Image for post

1. The playfulness

Usually when I design, I like too keep it simple regarding typography. Using more than two, can be a bit chaotic. But in this case, considering the rest of the page minimal design, using three fonts actually made sense.

Another ingredient to create playfulness, was to design a stamp illustration of Mulled wine. The stamp is a SVG image, and works gorgeously when needing an image to work in different screen resolutions and scale. It always looks sharp - giving it’s a vector image!

Image for post
Image for post

2. The validation

There are different ways to validate a form, In my case I used a , which was easy to apply to my project.

For the radio buttons I chose to keep the yes button pre-checked as seen below. Regarding the styling, I found this great tutorial for designing the radio buttons completely with CSS (no JS required), . Super useful! 🙏

Image for post
Image for post

The Name and E-mail input fields are obligatory, where the Name input allows everything but numbers. See the regex string below:

var reg = new RegExp(/^([^-9]*)$/)
Image for post
Image for post

Conclusion

Before I end this article I would just like to add that this form is not super ready to be used. You would probably want to add more validation rules and build your own Back-end to it. But this is a good start! 😊

As usual all code can be found on my github pages. Also, be sure to check out the demo . Thanks for reading and if I don’t get a new article out before christmas…

…Happy holidays everyone!! 🎄 😀

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store