FORMS 1.0 - Put a Marketo Form on a Non-Marketo Page

Document created by 08b21bd4b65c4441fd72920f489da6afa097beae on Jan 2, 2015Last modified by 7c0530b8c4efdd5734ac0e37c02a18c0a98056cf on Sep 27, 2017
Version 2Show Document
  • View in full screen mode

You can use Marketo forms on your website too.  Here is how.


Note: Developer knowledge required.

Learn how to:

Create a Form


Tip: If you want to keep progressive profiling and pre-fill Put a Marketo Form on a Non-Marketo Page Using an Iframe.
1.1Create a Marketo form with all the fields you would like to have on your page, see Create a Basic Form for details.

Create a Landing Page

2.1 Create a Marketo landing page using the blank template, see Create a Landing Page for details.

Add Your Form to Your Landing Page


3.1 Add the form you created above to the landing page, see Add a form to a Landing Page for details.


Reminder: Approve the landing page.

Copy Form HTML


     4.1 View the approved version of the above landing page by clicking on View Approved Page.


Tip: Clear your browser cookies before clicking on View Approved Page so that the prefill information is not in the HTML.

     4.2 View the Page Source.

     4.3 Copy the highlighted section of the code. <form> to </form> and be sure to include the two following script blocks.

     4.4 Paste it into the plain text editor of your choice.

Modify Form HTML


Make the following changes to the HTML you copied in the previous step:


     5.1 Change the value for the lpId input to "-1".

Old: <input type="hidden" name="lpId" value="1117" />

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

     5.2 Update the URL you want the user directed to after they submit this form:

Old: <input type="hidden" name="returnURL" value="" />

New: <input type="hidden" name="returnURL" value="" />

     5.3 Change the value for the returnLPID to "-1".

Old: <input type="hidden" name="returnLPId" value="1117" />

New: <input type="hidden" name="returnLPId" value="-1" />

     5.4 Clear the value for the _mkt_trk input.

Old: <input type="hidden" name="_mkt_trk" value="id:066-WBT-195" />

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

     5.5 In the <script> block towards the end add your CNAME.

Old: <script type="text/javascript" src="/js/mktFormSupport.js"></script>

New: <script type="text/javascript" src=""></script>


Embed HTML on Your Site

     6.1 Take the modified HTML from the previous step and add it to your non-Marketo page.


     6.2 Make sure you have the Munchkin tracking code on your page, see Add Munchkin Tracking Code to Your Website for details.


     6.3 Copy the <script> block under <!-- SYSTEM JAVASCRIPT - DO NOT EDIT --> from the original source and add it to your page.


Finally ensure that your page is set to UTF-8: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />.


Customizing Your Form's Style


If you want to use the form's default CSS, find the span with class "lpContentsItem formSpan" in your landing page and copy the <style>...</style> tags to your destination page. You are also free to use your own CSS.


Form validation is based on <li> and <span> tags/IDs. Making changes can break validation.