Glögg party, say what!?

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.

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! ❄︎

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!

2. The validation

There are different ways to validate a form, In my case I used a jQuery form validator plugin, 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), here. Super useful! 🙏

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]*)$/)

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 here on my github pages. Also, be sure to check out the demo here. Thanks for reading and if I don’t get a new article out before christmas…

…Happy holidays everyone!! 🎄 😀