Possible to replicate a form like this?

[TheBeev (Jason)]

I am hoping to replicate a form that functions similarly to this one: Proposal Planner - Website Design - Buffalo

Does anyone have any advice on how to accomplish this within Webflow? Specifically I like how the selectors work - that you can highlight options and group several of them together when you click on them. Would this be something Javascript-heavy if I wanted to create a form like this myself? Anyone know how to do it?

Thanks!

---

Here is my public share link: LINK
(how to access public share link)

[Anna_Kelian]

Hi @TheBeev

You can make these in webflow without javascript. You just need a simple piece of code.

For Radio buttons (selecting a single option)

• Add Radio buttons. Give them the same group name.

• Hide the Radio buttons

• Give the field labels the same class and style them as you like.

Ex:

• Add an Embed component with the following code (add your own styling):

    <style> 
    input[type=radio]:checked + label {
       border: 1px solid #ed6905;
       background-color: #ed905;
    } 
    </style>
  

For Checkboxes (selecting multiple options)

Do the same, but add checkboxes and add the following code (again add your own styling):

<style> 
input[type=checkbox]:checked + label {
	    border: 1px solid #ed6905;
        background-color: #ed6905;
} 
</style>

See the demo.

Hope this is helpful.

Best of luck,
Anna K

N.B. You can also check this out:
http://css-checkboxes.webflow.io

Wish I knew who made this to give them credit. Anyway, hope it will be helpful to you Jason.

[TheBeev (Jason)]

Hi Anna,

Sorry for the late response - but thank you so much for your help! Glad to see the solution was a bit more obvious than I initially thought. Much appreciated for the info!

[Anna_Kelian]

You’re most welcome Jason

Good luck with your projects!

All the best,
Anna K