9 Replies Latest reply on Feb 5, 2019 8:06 AM by Audreon Babb

    Fill Marketo Form using Tokens/URL Parameters

    Audreon Babb
    Audreon Babb Jan 25, 2019 10:45 AM

      Hello,

       

      We are trying to ensure a form is filled with the Marketo tokens rather than Pre-fill data when someone clicks on the landing page link in an email. I've read a few posts about this but can't seem to get the hidden fields and JS code to work.

       

      The first field in my form is mapped to Email Address and I want it to populate the email in Marketo database (some visitors are seeing pre-fill info that doesn't match their Marketo email address).

      I've created a hidden email field named renewEmailAddress and set the autofill to URL paramater: email. Would my JS code then look like the below? And would the link in the email would then look like https://example.com?email={{Lead.Email Address}}? I don't think I'm putting the JS code in the right location and/or I'm using the wrong "source" and taget names in the code itself.

       

      // Set your proxy (hidden) field to visible field mappings

var proxySources = [

{

source : "renewEmailAddress",

target : "Email Address",

readOnly : false

}

];



// --- No need to touch below this line! ---



var formEl = form.getFormElem()[0],

readyValues = form.getValues(),

mktoFieldsObj = {},

arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice);



proxySources

.filter(function(proxy){

return !!readyValues[proxy.source];

})

.forEach(function(proxy){

var fieldEls;



mktoFieldsObj[proxy.target] = readyValues[proxy.source];



if (proxy.readOnly) {

fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]');

arrayFrom(fieldEls)

.forEach(function(el){

el.readOnly = el.disabled = true;

});

}

});



form.setValues(mktoFieldsObj);

@@@});

       

      Message was edited by: Audreon Babb

      • 196 Views
      • Tags:
        • Re: Fill Marketo Form using Tokens/URL Parameters
          Sanford Whiteman
          Sanford Whiteman Jan 24, 2019 12:52 PM (in response to Audreon Babb)

          Please go back and highlight your code using the Advanced Editor's syntax highlighter so it's readable.  I can't do anything with that as it stands.

           

          https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

            • Re: Fill Marketo Form using Tokens/URL Parameters
              Audreon Babb
              Audreon Babb Jan 25, 2019 10:45 AM (in response to Sanford Whiteman)

              Thanks! Should be better now.

                • Re: Fill Marketo Form using Tokens/URL Parameters
                  Sanford Whiteman
                  Sanford Whiteman Jan 25, 2019 11:18 AM (in response to Audreon Babb)

                  No way is that compiling with the extra @ @ @ in there. That's a syntax error.

                   

                  Once you fix the syntax error(s) the main problem is that you want

                   

                  target: "Email"

                   

                  not

                   

                  target: "Email Address"
                    • Re: Fill Marketo Form using Tokens/URL Parameters
                      Audreon Babb
                      Audreon Babb Jan 25, 2019 3:32 PM (in response to Sanford Whiteman)

                      Thanks, I updated the code to the below and placed it in an html block on the landing page where the form is hosted, but I'm not seeing email address populate. renewemailaddress is a custom field I made in Marketo. Maybe I have that name wrong?

                      <script>
MktoForms2.whenReady(function(form){ 
   
  // Set your proxy (hidden) field to visible field mappings 
  var proxySources = [ 
      { 
        source : "renewemailaddress", 
        target : "Email", 
        readOnly : false 
      } 
  ]; 
   
  // --- No need to touch below this line! --- 
   
  var formEl = form.getFormElem()[0], 
      readyValues = form.getValues(), 
      mktoFieldsObj = {}, 
      arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice); 
   
  proxySources 
  .filter(function(proxy){ 
      return !!readyValues[proxy.source]; 
  }) 
  .forEach(function(proxy){ 
      var fieldEls; 
       
      mktoFieldsObj[proxy.target] = readyValues[proxy.source]; 
       
      if (proxy.readOnly) { 
        fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]'); 
        arrayFrom(fieldEls) 
        .forEach(function(el){ 
            el.readOnly = el.disabled = true; 
        }); 
      } 
  }); 
   
  form.setValues(mktoFieldsObj); 
}); 
</script>

                       

                        • Re: Fill Marketo Form using Tokens/URL Parameters
                          Sanford Whiteman
                          Sanford Whiteman Jan 25, 2019 3:43 PM (in response to Audreon Babb)

                          Field names are case-sensitive. Are you sure that's the SOAP/form field name?

                          1 of 1 people found this helpful
                            • Re: Fill Marketo Form using Tokens/URL Parameters
                              Audreon Babb
                              Audreon Babb Jan 25, 2019 4:05 PM (in response to Sanford Whiteman)

                              That was definitely it; should have been renewEmailAddress. I appreciate the help!!

                              • Re: Fill Marketo Form using Tokens/URL Parameters
                                Audreon Babb
                                Audreon Babb Feb 4, 2019 1:47 PM (in response to Sanford Whiteman)

                                As a follow up, can this be done with multiple fields in the same JS code? Trying to do this for multiple fields but I'm not sure of the correct syntax.

                                Below is what I've tried.

                                 

                                <script> 
MktoForms2.whenReady(function(form){ 
   
  // Set your proxy (hidden) field to visible field mappings  
  var proxySources = [ 
      { 
        source : "renewEmailAddress", 
        target : "Email", 
        readOnly : false 
      } 
{ 
        source : "renewAccountNumber", 
        target : "acc", 
        readOnly : false 
      } 
  ]; 
   
  // --- No need to touch below this line! ---  
   
  var formEl = form.getFormElem()[0], 
      readyValues = form.getValues(), 
      mktoFieldsObj = {}, 
      arrayFrom = Array.from || Function.prototype.call.bind(Array.prototype.slice); 
   
  proxySources 
  .filter(function(proxy){ 
      return !!readyValues[proxy.source]; 
  }) 
  .forEach(function(proxy){ 
      var fieldEls; 
       
      mktoFieldsObj[proxy.target] = readyValues[proxy.source]; 
       
      if (proxy.readOnly) { 
        fieldEls = formEl.querySelectorAll('[name="' + proxy.target + '"]'); 
        arrayFrom(fieldEls) 
        .forEach(function(el){ 
            el.readOnly = el.disabled = true; 
        }); 
      } 
  }); 
   
  form.setValues(mktoFieldsObj); 
}); 
</script>