Make a Marketo Form Submission in the background | Community
Skip to main content
Kenny_Elkington
Kenny_Elkington
New Participant
September 30, 2015

Make a Marketo Form Submission in the background

  • September 30, 2015
  • 65 replies
  • 35403 views

This post originally appears on the Marketo Developers Blog

When your organization has many different platforms for hosting web content and customer data it becomes fairly common to need parallel submissions from a form so that the resulting data can be gathered in separate platforms. There are several strategies to do this, but the best one is often the simplest: Using the Forms 2 API to submit a hidden Marketo form. This will work with any new Marketo Form, but ideally you should create an empty form for this, which has no fields:

Empty Form

This will ensure that the form doesn’t load any more data than necessary, since we don’t need to render anything. Now just grab the embed code from your form and add it to the body of your desired page, making a small modification. You embed code includes a form element like this:

<form id="mktoForm_1068"></form>

You’ll want to add ‘style=”display:none”‘ to the element so it is not visible, like this:

<form id="mktoForm_1068" style="display:none"></form>

Once the form is embedded and hidden, the code to submit the form is really quite simple:

var myForm = MktoForms2.allForms()[0]; 
myForm.addHiddenFields({ 
     //These are the values which will be submitted to Marketo 
     "Email":"test@example.com", 
     "FirstName":"John", 
     "LastName":"Doe" }); 
myForm.submit();

Forms submitted this way will behave exactly like if the lead had filled out and submitted a visible form. Triggering the submission will vary between implementations since each one will have a different action to prompt it, but you can make it occur on basically any action. The important part is setting your fields and values correctly. Be sure to use the SOAP API name of your fields which you can find with Export Field Names to esnure correct submission of values.

    65 replies

    Show previous replies
    SanfordWhiteman
    SanfordWhiteman
    New Participant
    April 5, 2017

    The fieldMap is an array (that was on purpose!).

    It's an array of objects with the same structure:

    [
      {
        marketo: 'Email',
        custom: '#email'
      },
      {
        marketo: 'FirstName',
        custom: '#firstname'
      }
    ]

    Your syntax isn't working JS.

    A
    Anonymous
    April 5, 2017

    Awesome work as always @Sanford Whiteman​ ! Lets say I wanted to map multiple input fields, would I be able to turn the fieldMap into an array that contains them? If more input fields needed to be added, I could just add them to the array. Might be syntax error, but the Marketo lead DB is only recording the FirstName in the below example.

    Marketo Form Submit - JSFiddle

      var customFormData = {

        formSelector : '#test-form',

        fieldMap : [{

          marketo : ('Email', 'FirstName'),

          custom : ('#email', '#firstname')

        }]

      }

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    April 5, 2017

    You have the event flow inverted from the way I would do it.  Here's a working adaptation of your code:

    http://codepen.io/figureone/pen/7e7040151d6e8c8bf65909fdc8fc52c4/

    A
    Anonymous
    April 4, 2017

    I'm trying to map user input values from a non marketo form and submit these values in a hidden marketo form. I've had success with this in the past, but seem to have an issue with triggering the .submit( ) action.

    Below is the code and here is a demo Codepen: http://codepen.io/grahamd711/pen/rybeVX

    Any help would be appreciated!

    <script src="//app-ab07.marketo.com/js/forms2/js/forms2.min.js"></script>

    <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <form id="mktoForm_2200" style="display:none;"></form>

    <form id="test-form">

       <input id="email" type="text">

       <input id="submit" type="submit">

    </form>

    <script type="text/javascript">

    MktoForms2.loadForm("//app-ab07.marketo.com", "920-LJZ-738", 2200);

      $('#test-form').submit(function( event ) {

        MktoForms2.whenReady(function(form){

          form.addHiddenFields({

          //These are the values which will be submitted to Marketo

          "Email": $('#email').val()

          });

          console.log('this is working');

          console.log($('#email').val());

          form.submit();

        });

      });

    </script>

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    November 10, 2016

    Search my posts for "DNN" and there's an example with a DotNetNuke CMS form.

    Lucho_Soto
    Lucho_Soto
    New Participant
    November 10, 2016

    I think a full example of this would be extremely helpful as well, especially for those of us who aren't well-versed in PHP/javascript. Can we see a complete set of code showing a simple PHP form passing information to a hidden Marketo form when submitted?

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    September 12, 2016

    You have the <FORM> tag twice.  But more important, where's the code to load the form?

    Kenny_Elkington
    Kenny_ElkingtonAuthor
    New Participant
    September 12, 2016

    Are you getting any errors on page load in your console?

    S
    SarahG1
    New Participant
    September 12, 2016

    We've used this method a few times now but for some reason we can't get it to work now.

    We are using this code:

    <!DOCTYPE html>

    <html>

      <head>

      <meta charset="utf-8">

      <style type="text/css">

      input {

      padding: 10px;

      margin-bottom: 10px;

      border: 1px solid #ccc;

      width: 200px;

      display: block;

      }

      </style>

      </head>

      <body>

      <form id="mktoForm_0025">

      </form>

      <script src="//app-lon03.marketo.com/js/forms2/js/forms2.min.js"></script>

    <form id="mktoForm_0025" style="display:none"></form>

      <script src="ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

      <script>

      var myForm = MktoForms2.allForms()[0];

      myForm.addHiddenFields({

      'Email' : "test@testing12345.com",

      "FirstName' : "John Doe"

      });

      myForm.submit();

      </script>

      </body>

    </htm

    Not sure what the google api is doing but is this causing a conflict within the system?

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    July 5, 2016

    The KL HTML isn't technically so known leads don't submit the form, it's used so leads don't see the form fields.   The default button that is included in the KL HTML still submits the form and in fact generates a Filled Out Form activity.  (I think this is commonly misunderstood.) 

    You can remove the submit button and use only direct <A> links in the KL HTML, but it can impact reporting. The form created w/KL HTML doesn't support every feature the full form does (which may be the result of bugs more than intent). Regardless, the goal of the KL HTML is to simplify the form for repeat visitors, not truly remove it. 

    So what I'm saying is that you can use the presence of KL HTML to determine if the cookie is associated with a known lead (there's an undocumented method that it uses under the hood, but it's best to leave that alone). Then you will know if you're in 1 of the 2 contexts in which it's safe to resubmit the form automatically (the 3rd, unsafe context being where the cookie is still anonymous and the lead has not provided any identifying info).

    Show more replies
    Terms & ConditionsAccessibility statement

    Loading footer...