Make a Marketo Form Submission in the background

Kenny_Elkington · ‎09-30-2015

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:

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.

SanfordWhiteman · ‎06-13-2017

When you only

return false;

from your onSuccess listener function, then the form submits, from onSuccess, then nothing else would be expected to happen. In fact the (Marketo) form does get posted in the background -- but nothing else happens on the page, so you wouldn't know that without looking in Dev Tools and in your Marketo database.

To replace the form contents, add elements/innerHTML before returning false.

Observe: Marketo Form Submit - JSFiddle

Anna_Blanchet1 · ‎10-02-2017

Hi,

We're attempting to make a form submission in the background. I've created the embedded code but our IT staff keeps getting an error. Below is there feedback. I am not a coder but would greatly appreciate any feedback that I can pass along to our developers.. Thanks!

--

loadForm method is returning the object with all forms, but “var myForm = MktoForms2.allForms()[0];” is returning “undefined”.

<head>

</head>

<html>

Just Checking

</form>

</html>

var forms = MktoForms2.loadForm("https//app-sj04.marketo.com", "903-EIZ-879", 1255);

console.log(forms);

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

console.log(myForm);
myForm.addHiddenFields({

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

"Email":"test@example.com",

"FirstName":"John",

"LastName":"Doe"

});

myForm.submit();

//mktoForm_

</script>

SanfordWhiteman · ‎10-02-2017

You can't use code like this. The call to loadForm loads the form descriptor (metadata) asynchronously and then injects the form object into the page when it's done.

Thus you can't just access the MktoForms2.allForms() collection directly after loadForm() because the form doesn't exist yet.

It's a basic reality of JS. You have to use the Forms 2.0 event model.

Please open a thread in Products and post your code using syntax highlighting in the Advanced Editor:

and I'll show you how it's done.

Anonymous · ‎01-11-2018

Hello All,

I am fairly new to Marketo and I came across this post as I am looking to send people from an email campaign to a landing page to get them to submit a request. However, I don't need them to complete a form again as I already have their information on the database and it just adds unnecessary steps to the user journey.

The idea to capture their information in the background behind the scenes allowing a single action of clicking/submitting the CTA is great.

However, I am not a programmer or coder although I have some understanding of what was mentioned above, I need help with the script to get it to work.

Can anyone who has done this before help me please?

Thanks,

Jack

SanfordWhiteman · ‎01-11-2018

You don't need code to do what you describe, nor do you need a background form post.

If you "already have the information," in Marketo terms we say their Munchkin session is already associated.

In Form Editor » Form Settings » Settings, you can choose the option If Known Visitor, Show Custom HTML ("KV HTML" for short). This allows you to show a shortened form with only the CTA button if the session is associated. The button click is logged as a Filled Out Form activity.

Note you can also use a dedicated form with the Submit button only, no fields. The difference from KV HTML is it won't include the "Not You?" link.

If you have more questions about this, please open a new thread in Products (discussions under a blog post aren't well-monitored and aren't useful for later searches).

Anonymous · ‎01-12-2018

Hello Sanford,

Thanks for your suggestion.

It worked liked a charm, I couldn't believe it was that simple.

You've made my day.

Best Regards,

Jack

Joe_Barrett · ‎07-03-2018

What exactly was the solution to the multiple records/submissions made in the database?

SanfordWhiteman · ‎07-03-2018

What are you trying to do, Joe? A Marketo form submission merges, using the Email as dedupe key, by default.

Joe_Barrett · ‎07-05-2018

I used MktoForms2 :: gdubrow/Marketo Form Submission , from below. I have 2 forms on the page, different ID's When the 'test-form' is submitted I get duplicate records created. Both forms DO collect emails, but use different IDs

SanfordWhiteman · ‎07-05-2018

You'll have to show your real page.