Empty Form

Make a Marketo Form Submission in the background

Kenny_Elkington
Marketo Employee
Marketo Employee

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.

23454
65
65 Comments
Anonymous
Not applicable

Hi Kenny. Great post. So are you saying, if I had say, a .php landing page with a form which submits to a platform, I could also include this code and, when submitted, it would also write the fields I want, into a Marketo lead? Because that is what I need to do.

Kenny_Elkington
Marketo Employee

Exactly, Matt.  You'd likely use a callback on your form validation in the browser to submit the hidden Marketo form, then have your primary submission go through on completion of the Marketo submission.

Anonymous
Not applicable

Thanks Kenny. I probably need some help with that part of it.

Anonymous
Not applicable

Hi Kenny, do you have a link to some api documentation so we can figure out how to call a function on completion of the marketo form submission? Or a code snippet would do.

Anonymous
Not applicable

Hi Kenny, we tried the code pasted in the above post, and MktoForms2.allForms[0] should be (MktoForms2.allForms())[0]. Must have changed into a function at some point.

Kenny_Elkington
Marketo Employee

Fixed.

Conor_Fitzpatri
Level 6

This is awesome! Is it possible to show an example of the code with the references to the other form (i.e. how we get test@example.com to be what the user inputted in the non-Marketo form)?

Anonymous
Not applicable

Kenny Elkington​ I am attempting to use this method in a Rails + Turbolinks project. 

I am experiencing single page app style issues:

  • if I visit a page with a form: I can successfully submit
  • if I visit a many pages without forms, than visit a page with a form: I can successfully submit
  • if I visit a  page with a form, than visit another page with a form: I cannot submit

On the front end, when using Chrome locks up, I could navigate away, but I the form will never be submitted.  In Safari I receive an error:

[Error] TypeError: o.postMessage is not a function. (In 'o.postMessage(JSON.stringify({mktoRequest:{ajaxParams:a,id:b}}),c.protocol+"//"+c.hostname)', 'o.postMessage' is undefined)

This error says it occurs in line 2065 of forms2.min.js

I have tried:

  • Checking that forms are loaded correctly by verifying that the hidden form is populated with fields in all scenarios in an attempt to confirm the MktoForms2.loadForm(...) function runs correctly.
  • Confirming IDs of the forms as I traverse pages.
  • Confirming params are identical in all scenarios, I hardcoded the values section inside `myForm.addHiddenFields({})` to confirm this is not an issue with my method for conversion of values.

I am running our of ideas, have you seen this error before? Could you give me any insight or ideas?  There is not much information on single page apps, or rails, or turbolinks implementations.  Any direction you could provide would really help me out, thanks!

Kenny_Elkington
Marketo Employee

Hey Tom, how exactly are you trying to submit the form in this scenario?  Are you deleting the existing form element and loading a new form on a subsequent page "load"?

SanfordWhiteman
Level 10 - Community Moderator

Tom Bush might as well email me so we can work on it.  It's gonna be something outside the usual case to be sure.