Embedding form on website without form tag

[Hayley_Iacocca]

We want to embed a Marketo form on a page of our website. When we provided the form embed code, our developers shared that our website already has the asp form tag on the page. Since the Marketo embed code also has a form tag in it, it won't work on our webpage. Does any know of any other options, that doesn't include a form tag, for embedding a Marketo form (e.g. javascript)?

[Micah_Anglin]

We had a similar problem at our place. We chose send the values, that would eventually go to Marketo, into our existing form. In this case it went into our CRM system. Then with a middleware solution (Vertify), we sent those values from the CRM into Marketo. This has been very reliable for us. We found the embedded/hidden Marketo form submission to be unreliable - which I think was due to issues with Javascript from our CRM front end.

[SanfordWhiteman]

We found the embedded/hidden Marketo form submission to be unreliable

Well, a hidden form post using the Forms JS API is a lot more reliable than any back-end integration, which has an inherent DoS vulnerability.

[Micah_Anglin]

I like how you quoted half of my sentence. I explained it was due to other javascript on the page. So for our case it is less reliable. To be specific, it was 3rd party JS that we can't modify, which got an error preventing the javascript engine from submitting the Marketo form.

Sandford, if you're not too busy taking people's comments out of context, maybe you have a suggestion for getting around 3rd party code that prevents the javascript engine from executing.

About your point of the inherent DoS vulnerability... the back-end integration is behind our firewall and the APIs are only accessible with network credentials over a VPN. I don't see DoS attacks happening much that way. With 2 forms on a public html page though, that seems like 2x the DoS vulnerability. In my case I have just 1 form submitting, which has to be submitted anyhow.

[SanfordWhiteman]

I like how you quoted half of my sentence. I explained it was due to other javascript on the page.

You said "I think" -- so it wasn't out of context. Realize that any FUD, even if just an unintentional suggestion, spreads like wildfire in the Marketo community ("I've heard the form post is unreliable" is something I'll hear from a client for reasons like this).

maybe you have a suggestion for getting around 3rd party code that prevents the javascript engine from executing.

Sure, if you show me the code that was stopping the Forms JS API from working, happy to see if there's a workaround. There may well not be: some stuff is so broken by bad code that you can't plug in good code, that's definitely true.

About your point of the inherent DoS vulnerability... the back-end integration is behind our firewall and the APIs are only accessible with network credentials over a VPN. I don't see DoS attacks happening much that way. With 2 forms on a public html page though, that seems like 2x the DoS vulnerability. In my case I have just 1 form submitting, which has to be submitted anyhow.

Every API-based attempt to simulate a Marketo form post requires 2 REST API calls. You have 50,000 API calls per day shared across all your integrations; that's a maximum of 25,000 pseudo-posts. And hitting your page 25K times in a half-hour (allowing for the API's point-in-time rate limits) is trivial for a mildly curious hacker.

The true Marketo Forms endpoint, in contrast, accepts 30 form posts per minute per source IP, that is 43,200 posts per day per every public IP in the world.

[SanfordWhiteman]

The embed code only includes the <form> tag for convenience. As long as your <form> has the id="mktoForm_nnn" it will work just as well, just remove the <form> from the embed code.

[Hayley_Iacocca]

Thanks for this recommendation, Sanford. I just checked with our developer but she said it won't work. She said the solution still depends on having the form tag on the page and we can't add the id="mktoForm_nnn" to our existing form tag.

[Josef_Lobotka]

we can't add the id="mktoForm_nnn" to our existing form tag.

You don't have to.

You can add it to a custom attribute, e.g. data-marketo-id="mktoForm_1113".

Then, after the page has fully loaded, you can use JS to pick up the value stored in `data-marketo-id` attribute and pass it to MktoForms2 method loadForm (https://developers.marketo.com/javascript-api/forms/api-reference/). This will return a virtual <form> Object that you can manipulate all you want before you append it into the page (e.g. add the ASP attributes you need to maintain).

[SanfordWhiteman]

You have to add the id to the form, at least temporarily. Marketo forms do not directly take an HTMLFormElement as an argument.

I don't understand a situation in which you must use an existing form element but cannot add any attributes.

[Hayley_Iacocca]

We cannot change the form tag on the webpage because it’s a template that’s used across our entire website. Our website uses an ASPX form page (view-source:https://www.cooperators.ca/en.aspx), and we can’t have a form within a form. So we’re trying to see if there’s another option or a workaround that allows for the same functionality (i.e. individual enters their information which then feeds into our Marketo database), without actually using a form.

[Bryan_Epstein]

Hayley, this is something that had worked where we did utilize a hidden form to guide submissions to the Marketo database. This was at the last company I worked at. The blog post Sandy references points to the following page on the Marketo documentation.

Sanford Whiteman​, one of the issues that we had run into was that individuals were feeding into SFDC as leads through our lifecycle model. As a means to prevent this from happening in Hayley's instance, would she just have to add a filter [Filled Out Form is NOT Hidden Form]?

[SanfordWhiteman]

..individuals were feeding into SFDC as leads through our lifecycle model. As a means to prevent this from happening in Hayley's instance, would she just have to add a filter [Filled Out Form is NOT Hidden Form]?

Sure, if this form is an outlier and not meant to send leads through a typical flow you can constrain Filled Out Form on the form name.

[Arun_Sharma9]

I think the best approach should be hide the current <form> tag on your website using CSS rules by using the class or id element present on that particular form but making sure the CSS is affecting that form on the page you wanted to load the Marketo form.

Then you can just use the Marketo embed code on the page where you want to show the form.

If above also don't work, then you can remove the <form> element from the page by using SetTimeout function of JavaScript after page is loaded and then load the Marketo form after that timeout, this will allow any other <form> element to get removed from page and loading of Marketo form.

Furthermore, If you can provide link to the page where you wanted to embed Marketo form, any other solution can also be provided.

Solution provided by Sanford will also work.

[SanfordWhiteman]

Hayley specifically and repeatedly stated that the developer refused to remove the existing form. If the developer were willing to do what you describe, they would've already done it.

(And setTimeout should never be used for DOM timing. Use the events provided by the browser API (DOMContentLoaded) for elements included in the HTML response, or the events provided by a specific library API (such as the whenReady event of the Forms 2.0 API) for elements injected asynchronously. Countless sites are horribly broken by misuse of setTimeout to guess (and guess wrong!) when elements or objects are ready.)

[SanfordWhiteman]

An option on the client side is to make a hidden Marketo form post in the background, supplying the values from your non-Marketo form. This has been discussed here in the past, if you search the Nation. This blog post has a basic example.

This is the only scalable, reliable alternative to a Marketo form.