WordPress Forms

Last updated 04/17/2024

Connecting your web form to Bread & Butter is quick and easy. With just a few lines of code, you can:

Identify users (email address and name) when they submit your form
Auto-fill first name, last name, and email address field for signed in users.

You can also gate the entire page using Content Gating.

Custom code examples for your specific form:

Have a different type of form? You can also do it yourself with the following 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="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();
});

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="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