Easiest way to Embed Marketo forms onto our Webpage

Anonymous · ‎01-29-2013

I thought it would be a simple as viewing the source code on the form page (campaigns.doubledutch.me/RequestaDemo.html), then copying it, customizing the css, and pasting the code into our webpage to replace our form and get the marketo form working. For some reason we are not able to view the source code. Any thoughts?

Then, I found this super complex-looking procedure which my web designer understands: https://community.marketo.com/MarketoArticle?id=kA050000000Kyqg&src=comm

Is this what we have to do to get these forms up?

Thanks!

Anonymous · ‎06-20-2013

Adam, we have been using iframes to display our Marketo forms, but recently needed to embed one on an external page. I followed the instructions on the Put a Marketo Form on a Non-Marketo Page help article, but the resulting formatting was horrid including no red asterisks after the labels indicating required fields. Also, the help article indicates that you need to use an iframe for progressive profiling and pre-fill.

So I found this article, inspected your example landing page (thanks for leaving it up there!) and discovered a few style sections that you had included that were not shown in the help article as well as a couple of scripts defining the profiling. After adding the missing code, the format was perfect, and the profiling and pre-fill worked as well!

Unfortunately the form's hidden fields that would populate with cookie values when the form is in Marketo are not being populated when using the embedded form :0( We have the javascript on the page that allows the cookie value to be read, but we need to use a token in the "value=" portion below - does anyone know what that token should be?

<li class='mktField' style="display: none;"><label>utm_medium:</label><span class='mktInput'><input class='mktFormHidden' name="utm_medium" id="utm_medium" type='hidden' value="none" /><span class='mktFormMsg'></span></span></li>

Anonymous · ‎03-06-2013

OK. Thanks Adam.

Anonymous · ‎03-06-2013

Unfortunately by removing the text from the marketo landing page requires you to make updates to your website in the event that your form changes. So yes, re-post the code if changes are made to the form.

Anonymous · ‎03-06-2013

Adam - Very cool. Just the validation I needed. But once you have your form embedded do changes you make to a form in Marketo automatically update the form on the web page? Or do you have to re-post the code?

Greg

Anonymous · ‎02-13-2013

wait, a forced refresh? as in hitting f5 or the refresh button on the url bar? Atleast in Firefox the data remains. I just tested your testing and didn't have the same experience. Peer review!

Anonymous · ‎02-13-2013

Duly noted. This is a feature I can live without. But good eye!

Anonymous · ‎02-13-2013

Adam,

I just tested your form. The validation worked and it submitted. I pressed back and my information was still there...but then I forced-refreshed the page, and my info was gone. When you force refresh a Marketo page w/ a cookie, the information doesn't disappear. There is still a lack of full capabilities not using a Marketo page/iframe.

Anonymous · ‎02-13-2013

Ah, so in my version, i had all forms, not progressively profiled. I figured the profiling didn't work cross domain. I just went to test it, and was super disappointed with the javascript validation rules didn't work. It just submitted and went to the proper page. I was very bummed out, but then I checked to see if I'd provided specific locations for the relative urls and one JS file right before the submit button hadn't been specified. Once I added my company's marketo CDN I hit refresh. Boom, progressively profiled form. Blank submit, NO! Error!

So great news! Here it is in a test environment http://planonsoftware.com/marketo-form (note, i typically only keep test items around for a few months, so it'll probably be gone by April if you're reading this later on, but for now)

If I lost anyone, you probably shouldn't do this. But since I'm a nice guy I'll make a tutorial if you ask. 🙂

Anonymous · ‎02-13-2013

Adam,

Did you copy all of the Javascript files and on-page code that powers validation, etc? I'd be interested to see if everything works right...

Anonymous · ‎02-13-2013

I tested this the otherday and it's quite easy to do. Create a form, create a landing page. Then preview the page, view the source, and copy only the Form related things. Then paste that HTML onto your corporate site. I tested it, it works just fine.

Anonymous · ‎01-30-2013

I have submitted an idea for Marketo to do Javascript-based form embedding vs iFrame, but even that method has its drawbacks.

FWIW, Marketo itself doesn't use iFrames on their corporate site (see http://www.marketo.com/global-enterprise/marketo-sales-insight/); they use either the underlying form code or their API.

Anonymous · ‎01-30-2013

This is a bigger concern to me in 2013. Subscribing incase others post interesting additional thoughts. For the record I'm not a fan of the iFrame method.

Anonymous · ‎01-29-2013

Hi Jen, it's actually not as complicated as it appears. Below is the form code to provide to your designer so they can add whatever styling they'd like and place it on your site. Good luck!

<label>First Name:</label>

<label>Email Address:</label>

<label>Phone Number:</label>

<label>Lead Source:</label>

<label>Middle Name:</label>

<input style='display: none;' id='mktFrmReset' type='reset'

value='Clear' name='resetButton' onclick='formReset(document.getElementById("mktForm_1005")); return false;' />

</li>

</ul>

</span>

</form>

function formSubmit(elt) {

return Mkto.formSubmit(elt);

}

function formReset(elt) {

return Mkto.formReset(elt);

}

</script>

Kimi_Heskett1 · ‎01-29-2013

our web designer uses iframes to embed marketo forms on our site: https://community.marketo.com/MarketoArticle?id=kA050000000KzRQ&src=comm