How to connect your existing Form

Last updated 02/13/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.

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", function(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]';

    let loadForm = ()=> {
        let form_button = document.querySelector('FORM_ID button[type=submit]');
	    form_button.addEventListener('click', async function(event) {
            await identifyUser();
        });
    };
    
    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.

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

document.addEventListener("DOMContentLoaded", function(event) {
    const _name = 'input[name="FIELD_NAME"]';
    const _email = 'input[name="FIELD NAME"]';
    const _form_button = 'FORM_ID button[type=submit]';

    let loadForm = ()=> {
    	let form_button = document.querySelector('FORM_ID button[type=submit]');
	    form_button.addEventListener('click', async function(event) {
            await identifyUser();
        });
    };
    
    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 _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