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

Version 2

    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="http://www.externalpage.com" />

    New: <input type="hidden" name="returnURL" value="http://www.externalpage2.com" />

         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="http://go.example.com/js/mktFormSupport.js"></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.