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

    Fill Marketo Form using Tokens/URL Parameters

    Audreon Babb

      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

        • Re: Fill Marketo Form using Tokens/URL Parameters
          Sanford Whiteman

          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

              Thanks! Should be better now.

                • Re: Fill Marketo Form using Tokens/URL Parameters
                  Sanford Whiteman

                  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

                      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

                          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

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

                              • Re: Fill Marketo Form using Tokens/URL Parameters
                                Audreon Babb

                                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>