Last updated 02/22/2024
To add the Identify and Profile auto-fill to your WP Forms, simply add these code snippets:
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(); });
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.
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
Add authentication & API event tracking to your website/app with a script tag & configuration