How to Add One-click Forms

Last updated 12/21/2022

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.

Pre-Requisites: Before getting started, you’ll need your App ID and your user event code.

Your App ID can be found on the Settings page in Bread & Butter. Don’t have an App yet? See How to Create an App.
Create your user event under User Events in Bread & Butter. For steps on how to do this, check out our User Events page.

Step 1

Add a new form to your website, or find a page with an existing form.

Step 2

In the initialization script, find the line:

BreadButter.configure({app_id: "[APP_ID]"});

Step 3

Next, add the Bread & Butter IO JavaScript code to the same page

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'
        });

Step 4

Replace FORM_ID with the ID of the form.
If you have a field each for first name and last name, replace FIRST_NAME_FIELD_ID & LAST_NAME_FIELD_ID with the IDs for those fields. Remove the line with FULL_NAME_FIELD.
If you only have one field for name, replace FULL_NAME_FIELD_ID with the ID for that field. Remove the lines with FIRST_NAME_FIELD & LAST_NAME_FIELD.
Replace EMAIL_FIELD_ID with the ID for the email address field.
If you have a "Confirm Email" field, replace CONFIRM_EMAIL_FIELD_ID with that field ID.
Replace SUBMIT_BUTTON_ID with the ID for the submit button.

Step 5

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.