Simple web to lead using POST method

[Joe_Barrett]

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!

[SanfordWhiteman · Accepted solution]

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]

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]

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]

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]

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]

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]

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

[Joe_Barrett]

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]

Yep.