Using the Salesforce Pardot form element

Our native Foleon form element enables you to quickly create and style forms in your content. However, sometimes you may want to use one of your Salesforce Pardot 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 Salesforce Pardot form element.

Creating a Salesforce Pardot form

To use a Salesforce Pardot form for lead generation, create a form in SalesForce Pardot. Create the input fields and style the form to your liking.

Next, go to Home Marketing Form Edit form Look and Feel

Above the form, switch to the source view by clicking on the source icon button in the text editor.

Then add the following code to the field:

<script type="application/javascript" async>
function sendHeight(){
    var body = document.body;
    var html = document.documentElement;
    var contentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    if(window.foleonPreviousContentHeight !== contentHeight){
        parent.postMessage(JSON.stringify({
            location: window.location,
           context: "foleon-iframe-resize",
           height: contentHeight
        }), "*");
    }
    window.foleonPreviousContentHeight = contentHeight;
};

var targetNode = document.documentElement;
var config = { attributes: true, childList: true, subtree: true };
var documentObserver = new MutationObserver(sendHeight);
documentObserver.observe(targetNode, config);

window.addEventListener('DOMContentLoaded', (event) => {
    parent.postMessage(JSON.stringify({
        location: window.location,
        context: "foleon-iframe-DOMContentLoaded"
    }), "*");
});
</script>

Go to step 4: Completion Actions. Click the second tab named Thank You Code and paste the following script in the source code:

<script type="application/javascript" async>
    parent.postMessage(JSON.stringify({
        location: window.location,
        context: "foleon-form-submitted"
    }), "*");
</script>

This script will communicate to Foleon that the form has been submitted successfully. It should look something like the following image:

Using the Salesforce Pardot form element

The first thing you need to do is get your form link from Salesforce Pardot. Go to the form you created in Salesforce Pardot and copy it to your clipboard.

Go to your Foleon Doc, drag the Salesforce Pardot form from the elements bar and drop it onto your canvas.

A pop-up will appear asking you to add your form link. Paste your form link in the field and save your changes.

Your Salesforce Pardot form has been added to your page and can be tested in the preview.

In the image below, you see what a Salesforce Pardot form might look like in your Foleon Doc. If you want to change the styling of the form to match your brand, follow the steps in Styling your form.

When you've gated your Foleon Doc with a Salesforce Pardot form, and you add the same Salesforce Pardot form as an element elsewhere in your content, the gate will also close when the non-gated form has been filled in by the reader.

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 Salesforce Pardot to use in your Doc, there are limited styling options in Foleon. However, Salesforce Pardot allows you to customize your form to suit your needs.

If you want to prevent spam form submissions by enabling reCAPTCHA, learn how to set this up in Salesforce Pardot's documentation: Bot Protection and Forms. 

In addition to Salesforce Pardot layout templates, you can apply styling by inserting custom CSS code into the Doc’s remarketing field in the Foleon Doc settings.