Using the Eloqua form element

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

What to do in Eloqua

There are a few steps we need to take in order to create an Eloqua form element.

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. Copy the landing page URL.

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.

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

    ⚠️ Once you’ve created the form and the input fields, make sure to add "update contacts - with form-data" to your form processing rules.

    The next thing you need to do is create a new landing page, and add the form as the only element on that landing page. You can learn more about this in Eloqua documentation on creating forms.

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

    💡 It’s recommended that you make the landing page transparent so the background of the form can be controlled by the Foleon editor.

    

  • Click the settings tab (gear icon) to configure your landing page settings.

  • Select the microsite created in Step 2.

  • In the Code and Tracking section, click apply and copy and paste the following script:

  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 is redirecting 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: Copy the landing page URL
  Copy your landing page URL. You can find that in the settings of your newly created landing page.

  

Using the Eloqua form element

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

A modal will pop up asking you to add the language page URL. Add the URL to the field and click on Save.

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

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

Set up a success message

As an alternative to the thank you landing page you can set up in Eloqua, it's also possible to opt for a success message that is initiated from Foleon.

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