support Contact Support | system status System Status
Page Contents

    Creating Lead Forms in Oracle Eloqua

    In this topic you will learn how to create an Oracle Eloqua form that can be used to capture lead data during video playback.

    Brightcove Campaign provides the ability to create lead forms which allow you to capture viewer information during video playback. Forms give 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.

    Creating a form in Eloqua

    Eloqua provides the ability to create forms that can be used to capture viewer information. The form HTML that is generated will be used when creating a lead form inside Brightcove Campaign. 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, expand the Field Groups panel.
    5. In the Field Groups panel, click Basic Contact Info and drag it to the form template.
      eloqua drag element
    6. Confirm that the fields have been added to the form.
      eloqua form fields
    7. By default, the fields are added using a field merge. This will cause strange text to appear in the fields when used in Brightcove Campaign. To remove the field merge, select the First Name field by clicking on it.
    8. In the left navigation panel, locate the General Properties section and set the Prepopulate field data property to None.
      eloqua form properties
    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.
      eloqua form list

    Copying the form HTML

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

    1. Click Actions > View Form HTML... The form HTML will be displayed.
      eloqua form html
    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 lead form is displayed, the form will display on a transparent background over the player. You will 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:

    eloqua styled form

    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:

    eloqua styled form advanced

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

    
    <script>
      var labels = document.getElementsByClassName('elq-label'),
          eForm = document.querySelector('form.elq-form'),
          submitButton = document.getElementsByClassName('submit-button-style')[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 < 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 Brightcove Campaign lead form

    Once the form has been created and styled, the form HTML will be used inside Brightcove Campaign when creating a lead form. For information on creating a lead form, see Creating Lead Forms.

    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 Actions > View Submission Data... The form data will be displayed.
      eloqua lead form data

    Page last updated on 29 Sep 2020