Gating your Foleon Docs with a Salesforce Pardot form

Your audience can provide a lot of valuable information. Think about personal details such as email addresses, which you can use for your marketing campaign. In this article, we show you how to generate leads with a Salesforce Pardot form.

Why gate forms with a Salesforce Pardot form?

Our lead generation feature allows you to block (further) access to your Foleon Doc on any page. Visitors are prompted with a pop-up form and will have to fill in their personal details in order to access your content (or the rest of it).

As a marketer or demand generation specialist, you want to have this information in Salesforce Pardot instantly. So you can automatically assign leads to your sales reps, do lead scoring and marketing automation right when they convert.

The benefit is that you won’t have to manually upload all leads on these platforms. Next to that, you will have correct attribution in Salesforce Pardot as well.

How to gate your Foleon Doc with a Salesforce Pardot form

To use a Salesforce Pardot form for lead generation, you need to 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:

<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>

This script will ensure that the form loads quickly and is sized correctly.

It should look something like this:

Next, go to step 4 Completion Actions.

Click the second tab named "Thank You Code" and paste the following script into 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:

Next, you have to add the form link to your Foleon Doc. Go to your form and open the form contents overview. Copy the link variable that is displayed in that overview, which should look something like this:

https://go.demo.pardot.com/l/XXXXX/2019-11-21/XXXXX

Go back to your Foleon Doc in the editor and open Settings Foleon Doc settings. On the left-hand side of your settings page, you will see the section Lead generation. Click on that link or scroll down until you reach the lead generation settings.

Turn on Gate your Foleon Doc and choose Salesforce Pardot as your preferred gating method.

Paste the form link into the required field, choose your layout template, and hit Save. If the setup is successful, your lead generation gate will now show in the pages overview.

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.

Assigning your gate to a page

When you’ve finished setting up your lead generation method, you can connect it to any of your pages.

Simply grab the lead generation gate and drag and drop it in front of the page on which you want the gate to appear. Instead of gating your entire Foleon Doc, you can give your readers access to a limited portion and make them hungry for the rest.

Once you’re satisfied with your Foleon Doc and the gate you’ve created, hit Publish or Preview to test your gate.

Allow readers to skip

If you want to offer readers the choice to skip and keep reading your pages without completing a form, that's possible! First, go to Pages, and click on the relevant Lead Generation gate. In Lead Generation's settings, click on General Settings, toggle on the "Allow Reader to Skip" option, and remember to republish your Doc to save the changes.

How to set up a success message

It's possible to add or edit a success message via Salesforce Pardot’s dashboard, by following the next steps.

• Navigate to the Salesforce Pardot dashboard.
  
  In the top menu, select the Content option. Make sure “Forms” is selected in the sidebar, and then click on a form you wish to add/edit the success message for.

  

• On the form page, select the Edit form option in the top menu.

  

• When editing the form, select the Completion Actions step in the form editing steps. After this, you can add/edit the form’s success message.

  

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.

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.

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.