Easiest way to Embed Marketo forms onto our Webpage

[Anonymous]

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!

[Kimi_Heskett1]

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

[Anonymous]

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!

<form class="lpeRegForm formNotEmpty" method="post" enctype="application/x-www-form-urlencoded" action="http://campaigns.doubledutch.me/index.php/leadCapture/save" id="mktForm_1005" name="mktForm_1005">

  <ul class='mktLblLeft'>

    <li  class='mktFormReq mktField' >

      <label>First Name:</label>

      <span class='mktInput'>

      <input class='mktFormText mktFormString mktFReq' name="FirstName" id="FirstName" type='text' value=""  maxlength='255' tabIndex='1' />

      <span class='mktFormMsg'></span></span></li>

    <li  class='mktFormReq mktField' >

      <label>Last Name:</label>

      <span class='mktInput'>

      <input class='mktFormText mktFormString mktFReq' name="LastName" id="LastName" type='text' value=""  maxlength='255' tabIndex='2' />

      <span class='mktFormMsg'></span></span></li>

    <li  class='mktFormReq mktField' >

      <label>Email Address:</label>

      <span class='mktInput'>

      <input class='mktFormText mktFormEmail mktFReq' name="Email" id="Email" type='text' value=""  maxlength='255' tabIndex='3' />

      <span class='mktFormMsg'></span></span></li>

    <li  class='mktFormReq mktField' >

      <label>Phone Number:</label>

      <span class='mktInput'>

      <input class='mktFormText mktFormPhone mktFReq' name="Phone" id="Phone" type='text' value=""  maxlength='255' tabIndex='4' />

      <span class='mktFormMsg'></span></span></li>

    <li  class='mktField' style="display: none;">

      <label>Lead Source:</label>

      <span class='mktInput'>

      <input class='mktFormHidden' name="LeadSource" id="LeadSource" type='hidden' value="Web Lead" />

      <span class='mktFormMsg'></span></span></li>

    <li  class='mktField' style="display: none;">

      <label>Middle Name:</label>

      <span class='mktInput'>

      <input class='mktFormHidden' name="MiddleName" id="MiddleName" type='hidden' value="NONE" />

      <span class='mktFormMsg'></span></span></li>

    <li id='mktFrmButtons'>

      <label>&nbsp;</label>

      <input id='mktFrmSubmit' type='submit' style="width: auto; overflow: visible; padding-left: .25em; padding-right: .25em;" value='I want a demo now!' name='submitButton' onclick='formSubmit(document.getElementById("mktForm_1005")); return false;' />

      &nbsp;

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

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

    </li>

  </ul>

  <span style="display:none;">

  <input type="text" name="_marketo_comments" value="" />

  </span>

  <input type="hidden" name="lpId" value="-1" />

  <input type="hidden" name="subId" value="159" />

  <input type="hidden" name="munchkinId" value="540-SUV-462" />

  <input type="hidden" name="kw" value="" />

  <input type="hidden" name="cr" value="" />

  <input type="hidden" name="searchstr" value="" />

  <input type="hidden" name="lpurl" value="http://campaigns.doubledutch.me/RequestaDemo_DemoRequest.html?cr={creative}&kw={keyword}" />

  <input type="hidden" name="formid" value="1005" />

  <input type="hidden" name="returnURL" value="http://campaigns.doubledutch.me/RequestaDemo_DemoRequest.html" />

  <input type="hidden" name="retURL" value="http://campaigns.doubledutch.me/RequestaDemo_DemoRequest.html" />

  <input type="hidden" name="returnLPId" value="1021" />

  <input type="hidden" name="_mkt_disp" value="return" />

  <input type="hidden" name="_mkt_trk" value="" />

</form>

<script type="text/javascript" src="http://campaigns.doubledutch.me/js/mktFormSupport.js"></script> 

<script type="text/javascript">

function formSubmit(elt) {

  return Mkto.formSubmit(elt);

}

function formReset(elt) {

  return Mkto.formReset(elt);

}

</script>

[Anonymous]

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]

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]

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]

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]

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]

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]

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