Form field conditional on current vlaue

[Amber_Hobson]

Is there a way for a form field to show up based on another field in our Marketo instance? We want to have a checkbox on our forms, but we only want it to appear if it has not already been checked. I've been searching everywhere on how to do this but can't find anything. Is there any way that I can do this? Thanks!

[SanfordWhiteman]

As I'm a non-coder, could you explain how and where to add this line of code? I assume in the "edit custom CSS" part of the form?

Nope, it's JavaScript, so you should put it in a separate <script> block.  You can put the <script> before the closing </body> tag on a Marketo LP, or right after the embed code on a non-Marketo LP.

<script>
MktoForms2.whenReady(function(form){
  form.setValues({ 
    hiddenFieldForVisibilityRule : form.getValues().visibleCheckboxField 
  });
})
</script>

And how should I adjust the line of code so that it refers to field X and Y and not to field Z?

Replace "hiddenFieldForVisibilityRule" and "visibleCheckboxField" with the real field names on your form.

You can use your browser's F12 Inspector to get the field names.

[Lucho_Soto]

Hi Sanford Whiteman, looking to implement this code across our forms. I tried incorporating the line of code you mentioned but wasn't sure how to make it work in conjunction with the onsuccess handler we already have in place. I tried implementing the code below, but I get a "form is not defined" error when I try to debug.   

Any feedback would be super helpful.                               

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>
                            <form id="mktoForm_1611"></form>
                            <script>MktoForms2.loadForm("//app-sj04.marketo.com", "***-***-***", 1611);</script>
                            <script>
                                  MktoForms2.whenReady(function (form){
form.setValues({ 
    COptInDate : form.getValues().COptin 
  });
})
                                     //Add an onSuccess handler
                                    form.onSuccess(function(values, followUpUrl){
                                        dataLayer.push({
                                            'event': 'contactushomeform',
                                            'eventCallback' : function () {       
                                                form.getFormElem().hide();
                                                document.getElementById('confirmcontacthome').style.visibility = 'visible';
                                            }
                                        });
                                        return false;
                                    });
                                                            </script>

[SanfordWhiteman]

The reference error is because you didn't put your code inside whenReady, so the variable form is not in scope.

Needs to be like so:

<script>
  MktoForms2.whenReady(function(form) {
    form.setValues({
      COptInDate: form.getValues().COptin
    });
    form.onSuccess(function(values, followUpUrl) {
      dataLayer.push({
        'event': 'contactushomeform',
        'eventCallback': function() {
          form.getFormElem().hide();
          document.getElementById('confirmcontacthome').style.visibility = 'visible';
        }
      });
      return false;
    });
  });
</script>

[Lucho_Soto]

Perfect, thank you!

[SanfordWhiteman]

Can you edit your post, fix the spacing, and highlight it as JavaScript please?

[Lucho_Soto]

You got it.

[Yun_Bai1]

Hi Sanford,

Thank you for sharing such a great solution. I understand the logic and the js code which will capture the value from the "visibleCheckboxField" combined with 2 SCs. However, for our case, we will show the "hiddenFieldForVisibilityRule" -- "Opt-in" field, when leads only select any EU countries. So "Country" will be our  "visibleCheckboxField". In this case, I can't create the smart campaign to capture "T/F" value which will alter the value of "Opt-in" field. The goal here is we would like to not show "opt-in" field on the form, when the lead already opted in. And I can't do  "visibleCheckboxField" and "hiddenFieldForVisibilityRule" both are the same "opt-in" field. Do you have any suggestion for our case? I was trying Dan's solution, haven't got succeed yet. 

Best,

Becky

[Laura_Dimon]

Hi Becky - Were you ever able to find a resolution to your issue? We have the exact same problem where we're using visibility rules on our consent field such that the consent field only appears if the user identifies they are from the EU. I also tried the solutions noted here with the custom javascript, and granted I'm not the most technical person, haven't had luck.

Thanks,
Laura

[SanfordWhiteman]

Please open a new thread with a link to your form.

[Tom_Liolios4]

Hi Sanford,

Many thanks for helping out. I'm gonna add the JS this week, and test it out. Hope it works!

Best,

Tom

[Grégoire_Miche2]

The advantages of doing in a JS line of code are:

• That you are 100% sure that the values remain in sync in Marketo, whatever delay happens on your smart campaigns.
• In the activity log, the hidden field will be part of the "filled out form" activity, with timestamp and IP address, which might be very useful in case of audit (remember the GDPR need for an audit trail).

We usually use that same technique to set the opt-out field based on the opt-in field.

-Greg

[SanfordWhiteman]

Is there a way for a form field to show up based on another field in our Marketo instance? We want to have a checkbox on our forms, but we only want it to appear if it has not already been checked.

These are 2 different concepts:

• Show/hide a field based on another field's value
• Show/hide a field based on its own value

Which one are you actually trying to do?