Use different Marketo form for known visitors (was: Conditional Marketo Submit Button Text)

Question

We have our Submit button currently set to "Submit" as default. We have "Email" field as a hidden field on this form. We'd like to change the text to "Some text" if the Email Address field is found empty (or, basically, this is an unknown visitor). Can someone guide on best Javascript code to build this condition? This is part of our preference center.
I did find something like below posted by Sanford, but couldn't get it to work. 
 
Original:
 
MktoForms2.whenReady(function(form){
   var formEl = form.getFormElem()[0],
       buttonEl = formEl.querySelector("button[type='submit']");
   
   var buttonLabelMap = [
      {
         ifField : "Rep_Age__c",
         equalsValue : "no",
         setHTML : "Submit"
      },
      {
         ifField : "Rep_Age__c",
         equalsValue : "yes",
         setHTML : "Let's Grow"
      }
   ];
   
   formEl.addEventListener("change",function(e){
      var currentValues = form.getValues();
      buttonLabelMap.some(function(changeset){
         if(currentValues[changeset.ifField] == changeset.equalsValue){
            buttonEl.innerHTML = changeset.setHTML;
            return true;
         }
      });
   });
   
});

Tweaked (but didn't work):
 
MktoForms2.whenReady(function(form){
   var formEl = form.getFormElem()[0],
       buttonEl = formEl.querySelector("button[type='submit']");
   
   var buttonLabelMap = [
      {
         ifField : "Email",
         equalsValue : "",
         setHTML : "Some Text"
      }
   ];
   
   formEl.addEventListener("change",function(e){
      var currentValues = form.getValues();
      buttonLabelMap.some(function(changeset){
         if(currentValues[changeset.ifField] == changeset.equalsValue){
            buttonEl.innerHTML = changeset.setHTML;
            return true;
         }
      });
   });
   
});

Darshil_Shah1 · Accepted Answer

Thank you! Here is the landing page:

https://bit.ly/3xZosct

Below is the content in KV HTML:

<script>// <![CDATA[
MktoForms2.loadForm("//success.glginsights.com", "561-YYM-489", 7498);
// ]]></script>

Thanks for help! <:

How are you loading the form on webpage? Since in the KV HTML you haven't included the form2.0 script and have that on the test webpage, I suppose you would ideally want to load it through the form embed JS (rather than adding the form through form element in the LP), but I can't see the loadform function in the page source code. I just the see form tags for the 2 forms. I hope I'm not missing out on anything here.

I loaded your forms using the loadform function in the console - and it worked for me as per your description - i.e., for an unknown visitor display the form with email address field (form id - 7499), and for a known visitor display the preference center form (form id - 7498) using the KV HTML.

Anonymous visitor - form with 7499 id loaded as per the expectation:

For a known visitor - notice in console that upon loading the form with 7499 form-id, the form with 7498 got loaded, as configured in the KV HTML:

Darshil_Shah1 · Answer

As Sandy mentions link to the page with form and script would certainly help us in this case - but as an fyi - the change event listener fires when there's a change in the element's value (in this case email address field's value) - i.e., when the form gets laoded initially with the empty Email Address field, the button text will have value which you would have configured at the form level - it's only when you add a value, and remove the value the onChange event configured on the "" (i.e., empty value) triggers and updates the button label.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded