Re: Form Field (Boolean type) visibility conditional on its own value

Sonali_Jadeja3
Level 4

Form Field (Boolean type) visibility conditional on its own value

Hi,

We display explicit opt-in as a checkbox on almost all our forms (post-GDPR). It is a boolean field, so when someone hits submit on the form without checking the box, they overwrite existing value (which could be TRUE) to FALSE. This sometimes marks already opted-in people to FALSE. And I want to be able to switch visibility of this field based on it's current value - If it's true do not display the field to user.

There are a lot of discussions on it and I believe there's a JS way to tackle this. Anyone has been successful?

I will appreciate any feedback here!

Thanks,

Sonali

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Form Field (Boolean type) visibility conditional on its own value

Yes, you do this by first including the all-important FormsPlus::Tag JS helper (link in the demo, download it to your own server and include in your page after Marketo's forms2.min.js script).

Then use a little CSS (to eliminate any FOUC) and a little JS, as in MktoForms2 :: Self-Hiding Checkbox​.

In the demo, the field Rep_Age_c is hidden if it's checked, shown if it's unchecked.

Make sure you run anything like this by your legal team before pushing to production. Not allowing people to uncheck a previously checked box is questionable.

Benjamin_Murra1
Level 1

Re: Form Field (Boolean type) visibility conditional on its own value

This looks like a really helpful solution butit doesn't seem to be working anymore. (At least for me)

SanfordWhiteman
Level 10 - Community Moderator

Re: Form Field (Boolean type) visibility conditional on its own value

Still looks fine to me.

If you fork the Pen and change the preset value of Rep_Age__c to "yes" (look in Settings » HTML » Stuff for <head>), you should see the form row w/that checkbox no longer appears. The default value in the Pen is "no", so by default you see it (if you didn't, it would be hard to demonstrate how to hide it!).