Gating your Foleon Docs with an Eloqua 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 an Eloqua form.

Why gate forms with an Eloqua 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 to access your content (or the rest of it).

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

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

How to gate your Foleon Doc with an Eloqua form

There are a few steps we need to take to gate content with an Eloqua form.

1. Create a new Eloqua form.
2. Create a secured microsite.
3. Create a landing page in Eloqua.
4. Create a Thank-you landing page in Eloqua.
5. Redirect to the Thank-you landing page from the form.
6. Enable Eloqua lead generation in Foleon.

The Eloqua form will be used to gate the Foleon Doc. Unfortunately, Eloqua doesn’t allow us to embed the form itself. So we need to add the form to a landing page and embed the landing page. The landing page then needs to be hosted on a secured microsite.

The Thank-you page will let Foleon know once the form has been submitted successfully, so we can allow the user to enter the gated part of the Foleon Doc. We’ll explain these steps in more detail below.

• Step 1: Create a new Eloqua form
  To use an Eloqua form for lead generation, create a form in Eloqua.
  • Navigate to Assets, then click Forms.
  • Click Create a Form to open the Template Chooser window.
  • Select the Blank Form and click Choose.
  • Click the settings button (gear icon) to configure your form settings and change your form name.
  • Build your form by adding contact fields, form elements, and field groups to the canvas.
  • Click Save.

• Step 2: Create a secured microsite in Eloqua
  Once your form has been created, we need to create a secured microsite. This is needed to host the landing page (which we’ll create in the next step). Which will host the form.
  Follow these steps provided by Eloqua to create a new secured microsite.

• Step 3: Create a landing page in Eloqua
  Once we have our microsite or are waiting for it to be finished, we can create a new landing page. The landing page will host the form, which we’ll eventually use to gate our Foleon Doc.

  • Navigate to Assets, then click Landing Pages.
  • Click Create a Landing Page to open the Template Chooser window.

• • Choose “Blank Responsive Landing Page”.
  • Name your landing page by clicking Untitled Landing Page in the top left and give it a new name.
  • Add a form by dragging the form item from the left pane of the landing page to the canvas. Click browse and select the form created in step 1.

• • Click on the Style tab to set both the Background Color and Canvas Color to No Color.

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;
}
window.addEventListener('DOMContentLoaded', function (event) {
  parent.postMessage(JSON.stringify({
    location: window.location,
    context: "foleon-iframe-DOMContentLoaded"
  }), "*");
});
window.addEventListener('resize', sendHeight);
window.addEventListener('load', function (event) {
  var targetNode = document.body;
  var config = {
    attributes: true,
    childList: true,
    subtree: true
  };
  var documentObserver = new MutationObserver(sendHeight);
  documentObserver.observe(targetNode, config);
});

• • Save the landing page.
  • Copy the landing page URL from the settings tab, which will be used in the next step.

• Step 4: Create a thank-you landing page in Eloqua.

  We now have created almost everything we need. The last thing we need to create is a thank-you landing page. The form will redirect to this thank-you landing page and it will communicate to Foleon that the form has been submitted successfully.

  • Navigate to Assets, then click Landing Pages.
  • Click Create a Landing Page to open the Template Chooser window.
  • Choose “Blank Responsive Landing Page”
  • Name your landing page by clicking Untitled Landing Page in the top-left and typing a new name.
  • Click the settings tab (gear icon) to configure your landing page settings.
  • In the Code and Tracking section, copy and paste the following script:
  • window.top.postMessage(JSON.stringify({
location: window.location,
context: "foleon-form-submitted"
}), "*");
  • Save the landing page.
    
    
• Step 5: Redirect to the thank you landing page from the form.
  We have now created everything we need. The last thing we need to do in Eloqua is to make sure that the form we created in step 1 redirects to the thank-you landing page we just created.
  • Navigate to Assets, then click Forms
  • Open the form created in Step 1.
  • Click the Processing button.
  • Click the plus icon to open the list of processing steps and add Redirect to a Web page as a processing step.
  • In General settings select Send to an Eloqua Landing Page option
  • Select: Always redirect to the same landing page
  • Select: Thank you Landing page created in Step 5.
  • Save these settings.
    
    

• Step 6: Enable Eloqua lead generation in Foleon.
  The last step we need to take is to set up the lead generation feature in your Foleon Doc and connect it to the Eloqua form. To do that, make sure to copy your landing page URL. You can find that in the settings of your newly created landing page.

  

  On your dashboard, open a Foleon Doc. Then select Foleon Doc settings. In the lead generation section, turn on Gate your Foleon Doc and choose Eloqua as your preferred gating method. Choose your layout template, and hit Save.

  

  If the setup is successful, your lead generation gate will now show in the pages overview.

  

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.

Grab the lead generation gate and drag and drop it in front of the page where 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.

In the image below, you see what an Eloqua lead generation gate might look like in your Foleon Doc. You can now test it in the preview.

Allow reader 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 Eloqua’s dashboard by following these steps:

• Navigate to Eloqua’s dashboard.
• Select the “hamburger” menu button in the top left part of the screen.

• In the dropdown, select the Assets option and then the Forms option.

• Select the form in the list you wish to add/edit the success message for.

• While on the form page, select the Processing option in the top right part of the screen.

  

• Select Redirect to Web Page option from the sidebar (if it’s not present, add it by clicking on the plus icon button) and then check the Send to an Eloqua Landing Page.

  

  ⚠️ You need to create and configure a landing page before you can use it as a success message. You can do that by selecting the “hamburger” menu icon in the top-left option. You will end up on a page that lets you create new landing pages and edit the existing ones.

  

Styling your form

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

If you want to prevent spam form submissions, learn how to set this up in Eloqua's documentation: Enabling spam protection for forms.

In addition to the styling options in the Eloqua Form Design Editor, you can apply styling by inserting custom CSS code into the Doc’s remarketing field in the Foleon Doc settings.