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!
Solved! Go to 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.
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.
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.
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
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.
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.)
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">
Found you helping someone in a similar situation here Make a Marketo Form Submission in the background
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");
})
Yep.