▼
Streaming live at 10am (PST)

Possible to replicate a form like this?

#1

I am hoping to replicate a form that functions similarly to this one: http://builtbybuffalo.com/planner

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)

#2

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:

image.png234x517 14.2 KB

  • 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.

#3

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!

#4

You're most welcome Jason :slight_smile:

Good luck with your projects!

All the best,
Anna K

closed #5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.