Last updated 01/29/2024
Before adding One-click Forms make sure you have added the initialization script tag.
The One-click form feature makes your forms more effective. When users click on your form, the Bread & Butter ‘Continue with’ widget will prompt users to convert or sign in, and users will have to authenticate before they can fill out the form. One-click forms work with many different types of forms.
This guide covers generating your code script, and inserting it onto your form page.
Prerequisites: Before getting started, you’ll need your App ID and your user event code.
Add a new form to your website, or find a page with an existing form. Add an id
attribute to the <form>
element and to any form fields whose content you would like to send to Bread & Butter. For example:
<form>
<label for="firstName">First Name</label>
<input type="text" id="firstName" />
</form>
On the same page as your form and directly after the BreadButter.configure()
initialization script, add the following JavaScript:
BreadButter.ui.applyFormControl({ form: 'FORM_ID', first_name: 'FIRST_NAME_FIELD_ID', last_name: 'LAST_NAME_FIELD_ID', name: 'FULL_NAME_FIELD_ID', email: 'EMAIL_FIELD_ID', email_confirm: 'CONFIRM_EMAIL_FIELD_ID', submit: 'SUBMIT_BUTTON_ID', event: 'CUSTOM_EVENT_NAME' });
CUSTOM_EVENT_NAME is optional. If you remove this line, the “Form Submit” system event will be automatically created.
If you want to have your own custom user event created on Submit, simply create a Custom Event on the User Events page in Bread & Butter, and replace CUSTOM_EVENT_NAME with the custom event code you created.
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