WordPress Forms – Gravity Forms

Last updated 02/22/2024

To add the Identify and Profile auto-fill to your Gravity Forms, simply add these code snippets:

Identify Users on Submit:

Add the following to your form page, replacing the field names and form name to match your specific form:

document.addEventListener("DOMContentLoaded", (event) => {
    const _first_name = 'input[name="input_1"]';
    const _last_name = 'input[name="input_3"]';
    const _email = 'input[name="input_4"]';
    const _form_button = '#gform_2 button[type=submit]';

    const loadForm = () => {
      const form_button = document.querySelector(_form_button);
      form_button.addEventListener('click', async (event) => {
          await identifyUser();
      });
  };
  
  const identifyUser = () => {
      return new Promise((resolve) => {
          const first_name = document.querySelector(_first_name).value;
          const last_name = document.querySelector(_last_name).value;
          const email = document.querySelector(_email).value;
          BreadButter.api.identifyUser(email, first_name, last_name, resolve);
      });
  };
  loadForm();
});

On submit, the user’s first name, last name, and email address will appear on your Bread & Butter Dashboard, identifying your users.

Don’t have separate first and last name fields on your form? Use the following:

document.addEventListener("DOMContentLoaded", (event) => {
    const _name = 'input[name="input_1"]';
    const _email = 'input[name="input_4"]';
    const _form_button = '#gform_2 button[type=submit]';

    const loadForm = () => {
    const form_button = document.querySelector(_form_button);
      form_button.addEventListener('click', async (event) => {
          await identifyUser();
      });
  };
  
  const identifyUser = () => {
      return new Promise((resolve) => {
          let first_name = document.querySelector(_name).value.trim();
          let last_name = "";
          const email = document.querySelector(_email).value.trim();
          if (first_name.indexOf(' ') > -1) {
              last_name = first_name.substr(first_name.indexOf(' ') + 1);
              first_name = first_name.substr(0, first_name.indexOf(' '));
          }
          BreadButter.api.identifyUser(email, first_name, last_name, resolve);
      });
  };
  loadForm();
});

Auto-fill fields with user profile information

Add the following to your form page, replacing the field names to match your specific form:

document.addEventListener("DOMContentLoaded", (event) => {
    const _first_name = 'input[name="input_1"]';
    const _last_name = 'input[name="input_3"]';
    const _email = 'input[name="input_4"]';
    BreadButter.getProfile((profile) => {
        if (profile && profile.first_name)
            document.querySelector(_first_name).value = profile.first_name;
        if (profile && profile.last_name)
            document.querySelector(_last_name).value = profile.last_name;
        if (profile && profile.email_address)
            document.querySelector(_email).value = profile.email_address;
    });
});

When signed in users go to your form, their name and email address will be automatically entered.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data

BOOK A DEMO