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.
💡 This feature is not included in every plan. If you're interested in using this functionality, please get in touch with our Customer Success Management team.
In this article
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.
⚠️ When you've added a Salesforce Pardot form, you might see some Salesforce tracking scripts being loaded (even if you’ve disabled Salesforce tracking in the project settings). This could happen when the form is loading or when the form validation is triggered.
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.
💡 Learn more in Salesforce Pardot's documentation: Customizing 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.
⚠️ Any custom code that has been implemented is the responsibility of the creator. Although this feature is easy to use, ensure you know your custom code inside out. If you're not very experienced with coding, we don't recommend using this feature.