Using the Marketo form element

Our native Foleon form element lets you quickly create and style forms in your content. However, sometimes you may want to use one of your Marketo forms so that your marketing automation kicks in right after a reader clicks the submit button. In this article, we show you how to use the Marketo form element.

What to do in Marketo

To use the Marketo form element, you must create a form in Marketo. Once you’ve created the form and the input fields, search for the embed code in the form actions dropdown.

Click on Embed code, where you will find the following variables:

• Base URL (make sure to include the “//”)
• Munchkin ID
• Form ID

In the embed code, you can find these variables in the second script element.

<script>MktoForms2.loadForm("//Base URL", "Munchkin ID", Form id);</script>

Here’s a full example of such an embed code:

<script src="//app-ab**.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1562"></form>

<script>MktoForms2.loadForm("//app-****.marketo.com", "875-JTE-***", 1562);</script>

From this embed code, you can extract the following variables (example):

• Base URL - //app-****.marketo.com

• Munchkin ID - 875-JTE-***

• Form ID - 1562

The next step is establishing a connection between your Foleon project and your Marketo account.

What to do in Foleon

Go to Foleon, open the project settings, and scroll down to Marketo tracking. Toggle on Marketo page tracking, and paste in the Marketo ID (for example "875-JTE-***").

Make sure to save your project settings.

Using the Marketo form element

In your Foleon Doc, open the elements bar and drag the Marketo form element to your page.

A modal will ask you to add the Base URL and Form ID. Add your form ID and hit Save.

In the image below, you see what a Marketo form element might look like in your Foleon Doc. You can now test it in the preview.

Once a visitor has filled in your Marketo form, they will see a default success message to inform them their submission was successful.

Learn how to customize this success message below.

Set up a success message

In the form settings, you can set up a success message for when a visitor of your content submits the form.

Click the cogwheel icon in the blue element bar, go to the general settings, and fill in your custom success message in the text field. 

Styling your form

When you create a form in Marketo to use in your Doc, there are limited styling options in Foleon. However, Marketo allows you to customize your form to suit your needs.

In addition to Marketo pre-built themes, you can apply styling by inserting custom CSS code into the Doc’s remarketing field in the Foleon Doc settings.

If you want to prevent spam form submissions by enabling reCAPTCHA, learn how to set this up in Marketo's documentation: Setting up reCAPTCHA v3.