Skip to main content

Set Up ZoomInfo FormComplete on Form CTAs

Published Date

Integrating ZoomInfo FormComplete with your Hub Form CTAs will make it easier for prospects to fill out your forms. Simply ask for an email address and then let ZoomInfo do the rest. This integration will allow you to only show fields with unknown data on a prospect, increasing the chance for form conversions. Reduce friction as field data already known by ZoomInfo based on email address will not be shown and submitted in the background.

 

Before you begin

  • To create this integration, you need to be an Account Admin or Content Manager.
  • Have access to ZoomInfo and FormComplete functionality.
  • Hub is on the Front End V2 framework. See this article to determine which version your Hub uses.

 

Step 1: Create a New Form in ZoomInfo

  1. Go to https://login.zoominfo.com/ and log in to your account.
  2. Access the FormComplete section of the app.
  3. Follow these steps outlined by ZoomInfo, starting at the Create a New Form (Manual Mode) section. When creating your form, it should look something like this:


  4. Set up the form as shown above. This example is if you are using Email, First Name, Last Name, and Company Name on your form. You can add fields as needed based on your requirements. Where your form setup might differ is highlighted in red:
    1. The Whitelist Domains section should include the domains of the Hub(s) you are installing this on (Eg. hub1.acme.com and hub2.acme.com)
    2. The input data-mapping values will be dependant on the API names in your MAP (Eg. the field First Name has an API name of firstName).
  5. Once the form setup is complete, select Save & Install and copy the HTML snippet ZoomInfo provides. It should look something like this:

 

Step 2: Add the ZoomInfo Code to Your Hub

  1. Log in to Uberflip.
  2. Go to Hubs > Appearance > Custom Code.


  3. Click on the +Add Code button.
  4. The Add New Code window will appear. Begin by typing in a name and (optionally) description for this piece of custom code (e.g. "ZoomInfo Integration"). Then, click on the Add Code button.
  5. This will take you to the Edit Custom Code view. Scroll down and click on the Code tab.
  6. Under Placement, use the dropdown to choose Head (it may already be selected by default).
  7. In the code field underneath, paste in the following code: 
    <style>
    div[data-zi-mapped-form] div:not(.uf-email-field) {
    display: none;
    }
    div[data-zi-mapped-form] div[data-zi-field-enriched="false"],
    div[data-zi-mapped-form] div[data-zi-field-enriched="false"] .control,
    div[data-zi-mapped-form] div.uf-email-field .control{
    display: block !important;
    }
    div[data-zi-mapped-form] div[data-zi-field-enriched="true"] {
    display: none !important;
    }
    </style>
    <script>
    window.addEventListener('uberflip.ctaActivate', () => {
    (function () {
    window._zi = { formId: '[YOUR FORM ID]', formLoadTimeout: 4000 };
    var zi = document.createElement('script');
    zi.type = 'text/javascript';
    zi.async = true;
    zi.src = 'https://ws-assets.zoominfo.com/formcomplete.js';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(zi, s);
    })();
    });
    </script>
  8. In the code snippet, replace the section [YOUR FORM ID] with the ID from the snippet you saved from ZoomInfo in Step 1.
  9. Click on the Save button below the code field.
  10. Lastly, scroll back up and switch the toggle under Enable Custom Code to the on (green) position.

And that's it — you've successfully integrated ZoomInfo FormComplete with your Hub Form CTAs!

 

Examples: See it in Action

  1. Full Match: Email is typed in. First Name, Last Name and Company Name are all known, therefore none are shown and instead submitted in the background when the form is completed.
  2. Partial Match: Email is typed in. First Name and Company Name are known, but Last Name isn't known, therefore only Last Name is prompted. The remaining fields aren't shown and submitted in the background.
  3. No Match: Email is typed in. First Name, Last Name and Company Name are all unknown, therefore the visitor is prompted to fill them out.