SOLVED

Simple web to lead using POST method

Go to solution
Joe_Barrett
Level 2

Simple web to lead using POST method

Does marketo have a simple web-form  to new-lead option using POST method? I'm getting tired of all the scripts and inline styles and form conflicts etc of the form 2.0 to collect a simple email address. Other CRM's like zoho do this and it is very handy in a lot of instances. Thanks in advance!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Simple web to lead using POST method

Of course. The <noscript> variant of a Marketo form, posting to the HTTP-redirecting /save endpoint, is exactly that.

But it's a lot easier to use the Forms JS API to post a form in the background. You don't need your visible form to be a Marketo form. It can be a completely bespoke form, just capture the fields and relay them to a hidden Marketo form and call the Marketo form's submit(). This is a very common setup.

I don't know what you mean by "form conflicts" however.

View solution in original post

11 REPLIES 11
SanfordWhiteman
Level 10 - Community Moderator

Re: Simple web to lead using POST method

Of course. The <noscript> variant of a Marketo form, posting to the HTTP-redirecting /save endpoint, is exactly that.

But it's a lot easier to use the Forms JS API to post a form in the background. You don't need your visible form to be a Marketo form. It can be a completely bespoke form, just capture the fields and relay them to a hidden Marketo form and call the Marketo form's submit(). This is a very common setup.

I don't know what you mean by "form conflicts" however.

Joe_Barrett
Level 2

Re: Simple web to lead using POST method

Ahhh, Sanford with a great solution, every time. Where can I see some examples/documentation on the JS API, I'm no JS-wonder.

As for conflicts, multiple forms on one page, which can be avoided in other ways ideally though.

SanfordWhiteman
Level 10 - Community Moderator

Re: Simple web to lead using POST method

The quickest jump into a background form post is here: Make a Marketo Form Submission in the background

However, it does leave out one important step, which is that the native HTML form's submit method needs to be stopped.

In other words:

<form id="visibleForm">

  <input name="whatever">

  <button type="submit">

</form>

<script>

  document.querySelector("#visibleForm").addEventListener("submit",function(e){

    e.preventDefault();

    // now you can continue to add fields to the Marketo form and call its submit(), and the HTML form won't also submit!

  });

</script>

As for conflicts, multiple forms on one page, which can be avoided in other ways ideally though.

With the fix here, multiple forms are no problem: Multiple Marketo forms, multiple times… on the same page

Joe_Barrett
Level 2

Re: Simple web to lead using POST method

The issue I had with that Example (Make a Marketo Form Submission in the background ) is:

1. Display:none doesn't seem to be working on the  Marketo Form element

2. How do I collect / change the values that are submitted. ...

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

myForm.addHiddenFields({

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

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

"Whatever":"whatever",

"LastName":"Doe"

});

myForm.submit();

I suppose I need to find a real, working example (im all over google atm) to really understand what I need to do.

SanfordWhiteman
Level 10 - Community Moderator

Re: Simple web to lead using POST method

1. display:none doesn't seem to be working on the Marketo Form element

Are you overriding display with an !important somewhere? Should be a no-brainer to hide the form.

2. How do I collect / change the values that are submitted. ...

Reading values from HTML forms depends on the field type.

For any text-like field type (<input type="text"> and related) it's simply the .value property of the element.

For <input type="checkbox">, <input type="radio">, and <select>, the procedure is somewhat more complicated because you need to find the selected item(s) and concatenate their values. (Marketo expects semicolon-delimited strings for multivalued fields.)

Joe_Barrett
Level 2

Re: Simple web to lead using POST method

Thanks, I'm sure I'll be back begging for more of your time. It's a great thing you do for this community.

And yes this form is still visible,

<form id="mktoForm_xxxx" style="display:none !important;"></form>

It renders in the browser inspector like this:

<form id="mktoForm_xxxx" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft">

Joe_Barrett
Level 2

Re: Simple web to lead using POST method

Found you helping someone in a similar situation here Make a Marketo Form Submission in the background 

Joe_Barrett
Level 2

Re: Simple web to lead using POST method

Ahhh, this was loading in the footer on a separate form. I should assign this code to a form by ID I guess to avoid stripping the inline style I give to <form>

MktoForms2.whenReady(function(form){ 

  var formEl = form.getFormElem()[0]; 

  formEl.removeAttribute("style"); 

})

SanfordWhiteman
Level 10 - Community Moderator

Re: Simple web to lead using POST method

Yep.