WordPress Forms

Last updated 07/11/2025

Bread & Butter works out of the box with most of your existing forms. You don’t need to enable anything, or configure any options.

When users submit a form with a name and email address, the user is automatically converted in your Bread & Butter Dashboard.

Supported forms:

WP Forms
Gravity Forms
Formidable Forms
Ninja Forms
Contact Form 7
HubSpot Forms
HappyForms
Forminator
Everest Forms
Fluent Forms

You can also gate the entire page using Content Gating.

Have a different type of form? You can also do it yourself with the following code snippets:

Identify Users on Submit for any type of form:

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="FIELD_NAME"]';
  const _last_name = 'input[name="FIELD_NAME"]';
  const _email = 'input[name="FIELD_NAME"]';
  const _form_button = '#FORM_ID 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.

If your form only has one field for first and last name, use the following:

document.addEventListener("DOMContentLoaded", (event) => {
  const _name = 'input[name="FIELD_NAME"]';
  const _email = 'input[name="FIELD NAME"]';
  const _form_button = '#FORM_ID 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();
});

Custom code examples for some specific forms:

Auto-fill fields with user profile information

If you’d like to step it up a notch, you can configure your forms so that signed in users will have their name and email address automatically filled in. Just 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="FIELD_NAME"]';
    const _last_name = 'input[name="FIELD_NAME"]';
    const _email = 'input[name="FIELD_NAME"]';
    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