WordPress Forms – WPForms

Published: February 6th, 2024

WP Forms work out of the box for identifying users in Bread & Butter. Give it a try by entering a test submission on your form, and confirm that your name and email are captured in the Bread & Butter Dashboard.

If you’re not seeing it working, you can quickly and easily add the code snippets below.

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="wpforms[fields][0][first]"]';
    const _last_name = 'input[name="wpforms[fields][0][last]"]';
    const _email = 'input[name="wpforms[fields][1]"]';
    const _form_button = '#wpforms-892 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[name="wpforms[fields][0][name]"]';
    const _email = 'input[name="wpforms[fields][1]"]';
    const _form_button = '#wpforms-892 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="wpforms[fields][0][first]"]';
    const _last_name = 'input[name="wpforms[fields][0][last]"]';
    const _email = 'input[name="wpforms[fields][1]"]';
    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.