Can form field visibility be controlled using tokens?

[ameliamarie]

Hello!

I'm using a global form for events, and while most fields stay consistent, certain events occasionally require unique fields (e.g. Title, Company Name, Dietary Restrictions). 

Is there a way to conditionally show or hide specific fields based on a token value? For example, can I hide a field unless a program token like {{my.TokenName}} is present or has a specific value? I'd love to manage field visibility dynamically without having to clone or create separate forms for each event. 

Thank you!

[SanfordWhiteman]

Sure. Create a field (we usually have a few of these) specifically for visibility management:

Add it to the form:

That’s the field you use in Visibility Rules.

Set the field value using using HTML & JS like this:

<datalist class="mktoFields">
<option label="my.Some Token">{{my.Some Token}}</option>
</datalist>
<script>
document.addEventListener("DOMContentLoaded", function(e){
  MktoForms2.whenReady(function(readyForm){
    readyForm.setValues({
      formVisibilityManagerA: document.querySelector(`datalist.mktoFields [label="my.Some Token" i]`)?.value;
    });
  });
});
</script>

[ameliamarie]

Thank you, @SanfordWhiteman I appreciate your help with this.

I am missing a step or applying something incorrectly somewhere, can you help me identify where I'm going wrong?

As a test, I have created a token called {{my.Add Company Title Fields}} with the value as true.

Not sure if the value is relevant or not. 

I have modified the form, adding visibility rules on the Company Name and Job Title fields.

I have tried Is and Contains with the token name (is this supposed to be the value of the token, not the name of it?)

I have applied the JS on the landing pages, ensuring that the token and Form Visibility Manager names are correct.

[SanfordWhiteman]

The Visibility Rules use the different values of the {{my.token}}.