WordPress Forms – Ninja Forms

Published: February 7th, 2024

Ninja 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="nf-field-5-textbox"]';
    const _last_name = 'input[name="nf-field-6-textbox"]';
    const _email = 'input[name="email"]';
    const _form_button = '#nf-field-8';
    let retry = 0;
    let loadForm = ()=> {
        let form_button = document.querySelector(_form_button);
        if (form_button) {
	        form_button.addEventListener('click', async function(event) {
                await identifyUser();
            });
        } else if (retry++ < 3) {
            setTimeout(()=> {
                loadForm();
            }, 1000);
        }
    };
    
    let identifyUser = () => {
        return new Promise((resolve) => {
            let first_name = document.querySelector(_first_name).value;
            let last_name = document.querySelector(_last_name).value;
            let 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="nf-field-5-textbox"]';
    const _email = 'input[name="email"]';
    const _form_button = '#nf-field-8';
    let retry = 0;
    let loadForm = ()=> {
        let form_button = document.querySelector(_form_button);
        if (form_button) {
	        form_button.addEventListener('click', async function(event) {
                await identifyUser();
            });
        } else if (retry++ < 3) {
            setTimeout(()=> {
                loadForm();
            }, 1000);
        }
    };
    
    let identifyUser = () => {
        return new Promise((resolve) => {
            let first_name = document.querySelector(_name).value.trim();
            let email = document.querySelector(_email).value.trim();
            let last_name = "";
	        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, function(){
                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 _name = 'input[name="nf-field-5-textbox"]';
    const _email = 'input[name="email"]';
    BreadButter.getProfile((profile) => {
        let name = "";
        if (profile) {
            name = (profile.first_name ? profile.first_name : "") + " " + (profile.last_name ? profile.last_name : "");
            name = name.trim();
        }         
        if (name)
            document.querySelector(_name).value = 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.