Help with Marketo form submission in the background code | Community
Skip to main content
Alexandra_Aghin
Alexandra_Aghin
Level 2
March 4, 2019
Question

Help with Marketo form submission in the background code

  • March 4, 2019
  • 2 replies
  • 7493 views

Hi,

I'm very new to Marketo and not a developer and I know this topic has been covered a lot, but we're doing something wrong and we don't know what that is.

We're trying to create a form submission in the background to trigger campaigns based on form submits; we've embedded the empty form on a test LP, but it's not submitting anything to our Marketo. Can you guys please look over the code and tell me what we're doing wrong? 

<script type="text/javascript" src="//app-ab34.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1038" style="display:none"></form> <script>     MktoForms2.loadForm("//app-ab34.marketo.com", "091-OYP-062", 1038);     setTimeout( function(){         if( typeof MktoForms2 != "undefined" ) {             MktoForms2.whenReady(function(mktoForm) {                  var customFormData = {                     formSelector: '#trial-form',                     fieldMap: [{                         marketo: 'FirstName',                         custom: '#form-field-firstname',                         marketo: 'LastName',                         custom: '#form-field-lastname',                         marketo: 'Email',                         custom: '#form-field-email',                         marketo: 'Company',                         custom: '#form-field-company',                         marketo: 'Country',                         custom: '#form-field-country',                         marketo: 'State',                         custom: '#form-field-state',                         marketo: 'City',                         custom: '#form-field-city',                         marketo: 'PostalCode',                         custom: '#form-field-postal',                         marketo: 'LeadSource',                         custom: '#form-field-leadsource'                      }]                 }                  document.querySelector(customFormData.formSelector).addEventListener('submit', function(e) {                      var customForm = e.target,                         mktoFields = {};                      // iterate over fields on custom form to create MktoForms-compat object                     customFormData.fieldMap.forEach(function(field) {                          mktoFields[field.marketo] = customForm.querySelector(field.custom).value                     });                       // add to Marketo form                     mktoForm.addHiddenFields(mktoFields).vals({"web":"true"});                      // submit Marketo form                     mktoForm.submit();                      // stop custom HTML form submission                     e.preventDefault();                  });             });         }     }, 2000 ); // two-second delay </script>

<script type="text/javascript" src="//app-ab34.marketo.com/js/forms2/js/forms2.min.js"></script>

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

<script>

MktoForms2.loadForm("//app-ab34.marketo.com", "091-OYP-062", 1038);

setTimeout( function(){

if( typeof MktoForms2 != "undefined" ) {

MktoForms2.whenReady(function(mktoForm) {

var customFormData = {

formSelector: '#trial-form',

fieldMap: [{

marketo: 'FirstName',

custom: '#form-field-firstname',

marketo: 'LastName',

custom: '#form-field-lastname',

marketo: 'Email',

custom: '#form-field-email',

marketo: 'Company',

custom: '#form-field-company',

marketo: 'Country',

custom: '#form-field-country',

marketo: 'State',

custom: '#form-field-state',

marketo: 'City',

custom: '#form-field-city',

marketo: 'PostalCode',

custom: '#form-field-postal',

marketo: 'LeadSource',

custom: '#form-field-leadsource'

}]

}

document.querySelector(customFormData.formSelector).addEventListener('submit', function(e) {

var customForm = e.target,

mktoFields = {};

// iterate over fields on custom form to create MktoForms-compat object

customFormData.fieldMap.forEach(function(field) {

mktoFields[field.marketo] = customForm.querySelector(field.custom).value

});

// add to Marketo form

mktoForm.addHiddenFields(mktoFields).vals({"web":"true"});

// submit Marketo form

mktoForm.submit();

// stop custom HTML form submission

e.preventDefault();

});

});

}

}, 2000 ); // two-second delay

</script>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
March 4, 2019

Who wrote that code? It's terrible.

Please explain your requirements in full, rather than working with a failed implementation this needs to be done right.

Jay_Jiang
Jay_Jiang
Level 10
March 4, 2019

It looks like you want a marketo landing page with a marketo form and ajax to send the same data to a second endpoint.

Firstly though, if you're using a marketo landing page, add the form via a marketo form element in the landing page builder, don't use the embed code - you lose prefill if you use the embed code.

In the most basic sense, this is all you need (with jQuery library):

MktoForms2.whenReady(function(form) {
form.onSuccess(function(values, followUpUrl) {
var vals = form.vals();
$.ajax({
            method:'POST',
            url: '//yourdomain.com.au/endpoint',
            data: JSON.stringify(vals),
            success:function(data){
                  console.log(data);
            },
            error: function(xhr) {
                  console.log(xhr);
            }
        });
    });
});

I'm sure @Sanford Whiteman​ will have some suggestions

SanfordWhiteman
SanfordWhiteman
Level 10
March 5, 2019
It looks like you want a marketo landing page with a marketo form and ajax to send the same data to a second endpoint.

I think it's the other way around, an attempt to post data from a custom form using a hidden Marketo form.

Typically this task is very easy but not when the JS is so dramatically wrong.


For one example, the timeout+check for if( typeof MktoForms2 != "undefined" ) makes no sense at all, as it runs after a line that explicitly depends on the MktoForms2 object already existing, and MktoForms2 itself is guaranteed to succeed if there's a successful load of forms2.min.js on the line before that!

More glaring is this object initializer:

{
  marketo: 'FirstName',
  custom: '#form-field-firstname',
  marketo: 'LastName',
  custom: '#form-field-lastname',
  marketo: 'Email',
  custom: '#form-field-email',
  marketo: 'Company',
  custom: '#form-field-company',
  marketo: 'Country',
  custom: '#form-field-country',
  marketo: 'State',
  custom: '#form-field-state',
  marketo: 'City',
  custom: '#form-field-city',
  marketo: 'PostalCode',
  custom: '#form-field-postal',
  marketo: 'LeadSource',
  custom: '#form-field-leadsource'
}

First of all, duplicate property names (the names marketo and custom are repeated over and over again) weren't even allowed syntax until ES6. But even though the code will compile without an error in modern browsers, it will only ever create an object with two properties, that is, the last time each unique name appears:

{
  marketo : "LeadSource",
  custom : "#form-field-postal"
}

(Note this is is the same as

{
  custom : "#form-field-postal",
  marketo : "LeadSource"
}

as object properties are no longer ordered after initialization.)

Clearly the intent was to create a map between the ids of HTML (text) inputs (somewhat strange in its own right as the correct HTML attribute would be name) to Marketo field names. But the execution is so far off kilter, I want to see all the surrounding setup, the actual HTML form, and the explicit goal.

P.S. Also, in your code, if you choose to depend on jQuery, you don't need to require the user to include the library separately. Use MktoForms2.$ instead of $.

    Alexandra_Aghin
    Alexandra_AghinAuthor
    Level 2
    March 5, 2019

    Hi Sanford,

    Yes, you're right - we're trying to pass data to Marketo from a WordPress LP using a hidden Marketo form, so we can trigger campaigns based on form sign-ups.

    I've created a form with no fields, just the submit button -

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

    <form id="mktoForm_1038"></form>

    <script>MktoForms2.loadForm("//app-ab34.marketo.com", "091-OYP-062", 1038);</script>

    - and our WordPress admin embedded it in this test landing page here​ & created the code to submit the form (what I posted above).

    The smart campaign uses a 'Fills Out Form' trigger with a URL referrer constraint.

    Terms & ConditionsAccessibility statement

    Loading footer...