Elegant and Brown Camp Inquiry Form

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I have developed an elegant form with more intuitive options than those provided. I think that this way, the person who is going to fill it will feel more comfortable and it will be easier to complete. In addition, I wanted to set brown as the color that highlights the important elements throughout the form. In addition, I have included an image that makes you feel like you are in the camp.

Thanks to Chris Holder for the picture.

Demo

The camp form consists of 3 questions. The first one is a list of buttons where you can select several options at the same time. These options are marked when you click on them. The second question consists of a list of buttons with the most common allergies and a field that allows you to add more information. Finally, the last question is free and allows the user to comment on anything.

Here is the code on JSFiddle. It's better if you load the result in a wider page than this post 😉

Journey

The rough and dry view of the form provided got me thinking about what to do. The first thing was to open Figma and design the final form I wanted to have. From there, I implemented the styles with SASS following my pattern: colors, typography, layouts, components. Finally, I developed the javaScript that would make the changes from the actual form to the one I had designed. This last part reminded me of old times using the DOM.

It's not the best code I've done but it works. Don't punish me for it.