Checkboxes as Toggle buttons

hi Sebastien,

thanks for the tip! worked great

Aldo

Looks great! Thanks for posting publicly so others can benefit from your efforts!

You can also apply the same style to radio buttons

.with_frm_style .frm_checkbox,
.with_frm_style .frm_radio {
margin-left: 10px;
margin-bottom: 10px;
}
.with_frm_style .frm_checkbox label,
.with_frm_style .frm_radio label {
padding : 8px 0px
}
.with_frm_style .frm_checkbox input[type=checkbox],
.with_frm_style .frm_radio input[type=radio] {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.with_frm_style .frm_checkbox input[type=checkbox] + span,
.with_frm_style .frm_radio input[type=radio] + span {
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
.with_frm_style .frm_checkbox input[type=checkbox] + span,
.with_frm_style .frm_radio input[type=radio] + span {
padding: 2px;
width: 60px;
height: 32px;
background-color: #e5e5e5;
border-radius: 32px;
/*transition: background 0.4s;*/
vertical-align: top;
margin-right: 10px;
}
.with_frm_style .frm_checkbox input[type=checkbox] + span:before,
.with_frm_style .frm_checkbox input[type=checkbox] + span:after,
.with_frm_style .frm_radio input[type=radio] + span:before,
.with_frm_style .frm_radio input[type=radio] + span:after {
display: block;
position: absolute;
content: "";
}
.with_frm_style .frm_checkbox input[type=checkbox] + span:before,
.with_frm_style .frm_radio input[type=radio] + span:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 32px;
/*transition: background 0.4s;*/
}
.with_frm_style .frm_checkbox input[type=checkbox] + span:after,
.with_frm_style .frm_radio input[type=radio] + span:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 24px;
background-color: #e5e5e5;
border-radius: 24px;
/*transition: margin 0.4s, background 0.4s;*/
}
.with_frm_style .frm_checkbox input[type=checkbox]:checked + span,
.with_frm_style .frm_radio input[type=radio]:checked + span {
background-color: #00b9eb;
}
.with_frm_style .frm_checkbox input[type=checkbox]:checked + span:after,
.with_frm_style .frm_radio input[type=radio]:checked + span:after {
margin-left: 28px;
background-color: #00b9eb;
}

Excellent Job on this Sebastien.

I'd been meaning to look into styling the radio buttons and check boxes for a while and this is perfect.

After having a play around with it yesterday i also combined it with a work around for adding an animation to conditional logic fields which works nicely.

Here's the CSS for the conditional logic animation (taking into account the issues with animating display:none elements):

@-webkit-keyframes fadeIn {
0% { transform: scale(0.0) }
100% { transform: scale(1.0) }
}

@keyframes fadeIn {
0% { transform: scale(0.0) }
100% { transform: scale(1.0) }
}

.form-field {
margin-bottom: 15px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
animation-name: fadeIn;
animation-duration: 0.5s;
}

I've used scale as the animation but opacity also works really well.

Thanks again

Chris

Thanks for sharing guys. Adding more enhanced styling options like these into the core plugin or an addon is on our list of things to do, and these are great examples. Keep them coming.

Sebastien and Ronoi, this is really cool stuff. I'd love to use it but I'm not that great with javascript. Any chance you can explain a little further? I want to use the radio buttons as toggles. Do I have to change the java code for my particular form? And do I insert it into my main functions?

Thanks for any help and great work!

Smyth

Hi Smyth

You can add the following to the "before fields" section of any of the forms you'd like to change the radio buttons on, under any existing code in there.

<script type="text/javascript">
jQuery(document).ready(function($){
$('.with_frm_style .frm_radio input[type=radio]').after('<span>');
});
</script>

Or you can add this for the checkboxes (or add both to style the checkboxes and radio buttons):

<script type="text/javascript">
jQuery(document).ready(function($){
$('.with_frm_style .frm_checkbox input[type=checkbox]').after('<span>');
});
</script>

Then just add the CSS Sebastien provided to either the page that your form will be on or in the custom CSS section of the Styles in Formidable or to your Theme style sheet.

Just be aware that if you add it to the theme style sheet (or potentially the Formidable Style section if you only have 1 style set up for all forms) then it will effect all of the forms on your website as it hides the default check box and radio buttons and creates new ones using pseudo elements.

Hope that helps.

Chris

A little addition,

if you choose to save your forms with Ajax and to display the form with the result message in the form settings, you'll have to also add the following function in your script section (or file).

function frmThemeOverride_frmAfterSubmit(formReturned, pageOrder, errObj, object)
{
jQuery('.with_frm_style .frm_checkbox input[type=checkbox]').after('<span>');
jQuery('.with_frm_style .frm_radio input[type=radio]').after('<span>');
}

This function is automatically fired by Formidable framework after a form submission/update.

Works beautifully! Thank you both for your quick response, thorough documentation and of coarse, sharing. :)

Smyth

Ronoi, One more request/favor. Could you give me the opacity animation that you mention here instead of the scale?

Hi Smyth

Yeah no worries. All you need to do is play around with the transform: scale part of the keyframe CSS and change it to opacity So it would look like this:

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1;) }
}

.form-field {
margin-bottom: 15px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
animation-name: fadeIn;
animation-duration: 0.5s;
}

Or you can play around with the scale rule and specify which axis you'd like it to scale on (like in my demo) by using scaleX or scaleY.

Thanks

Chris

Love it. Y axis is perfect. Thanks again Ronoi.

Sebastien,

Can I use the function below if I only want to use ajax on some forms, but not all? And where do I place the function?

function frmThemeOverride_frmAfterSubmit(formReturned, pageOrder, errObj, object)

{
jQuery('.with_frm_style .frm_checkbox input[type=checkbox]').after('<span>');
jQuery('.with_frm_style .frm_radio input[type=radio]').after('<span>');
}

Thanks.

Hi,

you need the two scripts : jQuery(document).ready(function($) { ... }); and function frmThemeOverride_frmAfterSubmit(...) { ... }.

The first is called only after your browser finished loading a page (or after a F5), the second is called only by Formidable form submission.

You can place function frmThemeOverride_frmAfterSubmit(...) { ... } right below jQuery(document).ready(function($) { ... });

Thanks again. Think I've got it working correctly. Awesome!

Hi Gents,

I found one more thing I could use your help with. When you have a repeatable section, the radio and check buttons for those added sections are left blank with just the label. No radio button or checkbox at all. Any way to apply the styling to those as well?

Thanks, Smyth

I'm just getting into styling of both check boxes and radio buttons......am I ever glad I ran across this!  Thank you!  Part of the problem for someone like me, trying to figure out new things with CSS is where to put it (and the code).  I scratched my head over where to put the script until I read further into the thread to ronoi's post...so thank you Sebastien AND ronoi for helping me put the pieces together and for all of the others that show what can be done for these elements.

I'm using this now. It's amazing! Thank you so much for sharing.

Any chance someone could copy and paste the final HTML and CSS that works as the additions and improvements (although great to see the progression and contributions) has confused me.  I am basically looking for a clean copy and paste of the required HTML and CSS.  Also I am confused on where to add the HTML and CSS. I've tried adding different ways in styling, settings, HTML fields in the form but can't get it right.  Thx!