Creating Custom Lead Forms for Oracle Eloqua

Product(s)
Video Cloud
Role(s)
Studio User
Topic(s)
Audience/Marketing Automation

In this topic you will learn how to use an Oracle Eloqua form to capture lead data inside of a Brightcove Player.

The Audience module provides the ability to create lead forms which allow you to capture viewer information as videos are played inside of Brightcove players. This gives you the ability to include whatever fields you need (visible or hidden) and also give you the ability to take advantage of features like progressive profiling (if available). The lead data is sent to, and processed by, Eloqua.

To create a custom lead form, the following steps must be performed.

  1. Create a form in Eloqua.
  2. Copy the form HTML.
  3. Style the form.
  4. Create a custom lead form in the Audience module.
  5. Assign the lead form to a player.
  6. Validate the form data in Eloqua.

Note: For information on standard lead forms which capture viewer information and save the data in Video Cloud, see Creating an Audience Lead Form.

Creating a form in Eloqua

Eloqua provides the ability to create forms to capture viewer information. These forms can be displayed inside of Brightcove players. The data that is captured can then be used in customizing future communications. The steps below will create a simple form to capture first name, last name and email address. For complete details on Eloqua Forms, see the Eloqua documentation.

  1. Sign in to your Eloqua account.
  2. Navigate to Assets > Forms and then click Create a Form. The form Template Chooser opens.
  3. Click Blank Form and then click Choose.
  4. In the left navigation, click Field Groups.
  5. In the Field Groups panel, click Basic Contact Info and drag it to the form template.
  6. Confirm that the fields have been added to the form.
  7. By default, the fields are added using a field merge. This will cause strange text to appear in the fields when used in Audience. To remove the field merge, select the First Name field by clicking on it.
  8. On the right side of the page, click the Pre-Population button and then click None.
  9. Repeat the process for the Last Name and Email Address fields.
  10. Click Save.
  11. Give the form a name and then click Save.

Copying the form HTML

To use the form inside of the Audience module, you will need to copy the form HTML. Follow these steps to copy the form HTML.

  1. Click the Actions button (), then click View Form HTML... The form HTML will be displayed.
  2. Copy the entire HTML to the clipboard. Click Close.
  3. Paste the form HTML into your HTML editor of choice. You may want to use the code formatting feature of your editor to format the code so that it is easier to read.

Styling the form

By default, when the form is displayed inside of a Brightcove player, the form will display on a transparent background over the player. You will probably want to do some basic styling to the form using CSS. The sections below provide two examples of how the form can be styled. The associated CSS is also provided. You may need to adapt the CSS to conform to your standard colors or to handle styling of additional fields.

Simple form styling example

This example uses CSS to change the background color of the form to grey and the form will appear as follows:

For this styling, add the following CSS to the top of the form HTML <style> tag.

body {
      background-color: rgba(204,204,204,0.9);
      margin: 0;
      padding: 20px;
      height: 100%;
}
  

Advanced form styling example

This example uses JavaScript to change the background color of the form to black and does some basic field formatting. The form will appear as follows:

For this styling, add the following JavaScript to the bottom of the form HTML.


<script>
  var _50fields = document.getElementsByClassName('_50 field-style'),
      _50leftFields = document.getElementsByClassName('_50_left field-style'),
      labels = document.getElementsByClassName('label-position top'),
      eForm = document.querySelector('form.elq-form'),
      submitButton = document.getElementsByClassName('submit-button')[0],
      titleLable = document.querySelector('label.label'),
      firstName = document.getElementsByName('firstName')[0],
      lastName = document.getElementsByName('lastName')[0],
      emailAddress = document.getElementsByName('emailAddress')[0],
      i;

  for (i = 0; i < _50fields.length; i++)
     {_50fields[i].className = '_100 field-style'; }

  for (i = 0; i < _50leftFields.length; i++)
     { _50leftFields[i].className = '_100 field-style'; }

  for (i = 0; i < labels.length; i++)
     { labels[i].setAttribute('style', 'display:none;'); }

  eForm.parentNode.setAttribute('style', 'background-color:#333;height:12em;text-align:center;padding:0% 20%;');
  titleLable.setAttribute('style', 'display:none;');
  submitButton.setAttribute('style', 'height:2em;background-color:#337d87;color:#fff;border:none;border-radius:.3em;padding:.3em .5em;font-size:1em;');
  firstName.setAttribute('style', 'margin:.5em;height:2em;width:80%;padding-left:.5em;font-size:1em;border:none;border-radius:.3em;');
  firstName.setAttribute('placeholder', 'First Name');
  lastName.setAttribute('style', 'margin:.5em;height:2em;width:80%;padding-left:.5em;font-size:1em;border:none;border-radius:.3em;');
  lastName.setAttribute('placeholder', 'Last Name');
  emailAddress.setAttribute('style', 'margin:.5em;height:2em;width:80%;padding-left:.5em;font-size:1em;border:none;border-radius:.3em;');
  emailAddress.setAttribute('placeholder', 'Email');
</script>

Creating a custom lead form in the Audience module

Once the form HTML has been created in Eloqua and styled as needed, create a custom lead form in the Audience module and associate the lead form with an Audience-enabled player.

  1. Open the Audience module.
  2. Click Lead Forms in the left navigation. If any lead forms have been created, they will be displayed.
  3. Click Create Lead Form.
  4. Give the lead form a descriptive Name.
  5. Select a Form Language.
  6. Select the Form Timing. The form timing determines when the lead form will be displayed.
    lead form settings
  7. Set the form type to Custom Lead Form.
  8. Paste in the Form HTML.
    lead form html
  9. (Optional) Paste in the Confirmation HTML. The confirmation view will be display for 5 seconds and then the video will resume playing. If no confirmation HTML is included, the video will resume playing after the form submission.
  10. (Optional) Click Preview Form to open a preview of the form.
  11. Click Save to save the lead form.

Assigning a lead form to a player

Once the lead form has been created, it needs to be assigned to a player. Follow these steps to assign a lead form to a player.

  1. Click Audience Players in the left navigation.
  2. Locate your player and use the Lead Form dropdown list to select the lead form.

The setup is now complete and you are ready to capture lead information. When a video is published using an Audience-enabled player, the lead form will appear according to the form timing settings.

Validating the form data in Eloqua

There are several ways to validate that the form data has been passed to Eloqua. Follow these steps to view the form data in Eloqua.

  1. Sign in to your Eloqua account.
  2. Navigate to Assets > Forms.
  3. In the left navigation, click the All Files link to display all the forms.
  4. Double-click the form name to open it.
  5. Click the Actions button (), then click View Submission Data... The form data will be displayed.
    lead form data