▼
Streaming live at 10am (PST)

Change the colour of an active check box button

#1

Hello,

I am trying to figure out how to change the colour of a selected checkbox button text, once clicked. I have removed the box, and turned the text in to a button it self.

I would like it to be a different colour once clicked, to signify that it has been selected. I have tried looking under the “states” section but no luck.

Is there also a way to have different form blocks on multiple sections on a page, but have only one submission button at the end of the form?

How can I have the answers for each form block sent to my email as one email once the user hits submit?

https://preview.webflow.com/preview/ivy-and-aspen?preview=121435b28fd03739ff02cb13befdd95e

(Refer to pricing page, 3rd section)

Thanks in advance.

#2

I hate to be a douche and refer you to my website page, but is this what you mean?

http://clickart.webflow.io/start-project ;

Key in a name and then select individual to unlock the next section and tell me if that is what you mean. Thanks

#3

Great page @AlexManyeki ! This is exactly what I am looking for. How did you do this? How did you also add logic to the page to input my name in the next step?

#4

Thanks @Dushaan

I did it mainly with custom code using val(). and some if statements in jQuery.

You do not need to use multiple form blocks. You just have to put all your fields in sections (divs) just as you have done but inside one form element. Then the next button on each section can link to the next but all inside the form.

As for the checkboxes, here you need custom code. This time, DO NOT DELETE the checkbox field. We will be styling the checkbox element itself and reducing the opacity of the checkbox-field so that it is invisible but still present. Here is an example I just made for you. Pay attention to the structure and the active hidden active class on the topmost element.

Live: http://clickart-sandbox.webflow.io/checkbox-styling
Clonable: https://preview.webflow.com/preview/clickart-sandbox?preview=811e1b25b800f0a0037deb5a69d7efa5 (look for the page with your username)

Then just a small jQuery click function;

<script>
$('.checkbox-field-wrapper').click(function(e) {
$(this).toggleClass('active');
});
</script>

EDIT: I just realized you can do this without custom code. You will need to add a div (bg-color) inside the checkbox element. use z-index to bring the checkbox field to front, above all other elements. the apply a click interaction to show the bg-color div on first click and hide it on second click. Long method but native.

The you will apply an click interaction

#5

Hello, I am still having trouble with the second option you have mentioned. I am not allowed to place a div inside the checkbox element. There is the TextBox field, the checkbox, and the text. Where should I place the Div?

The link you have provided below does not work.
https://preview.webflow.com/preview/clickart-sandbox?preview=811e1b25b800f0a0037deb5a69d7efa51

thanks.

#6

This one should work. Look for the page with your username and inspect that structure and the code provided in the before </body> section;

https://preview.webflow.com/preview/clickart-sandbox?preview=12fc9727e24266f2bbf2ae95da83ba19

closed #7

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