Webflow One-click Forms

Last updated 10/05/2023

Before adding a One-click form 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.

If you configure the name and email fields on your form (see step 5 below), the name and email fields will be auto filled (and will not be editable) after the users convert or sign in. This prevents users from signing in and then changing their address or name, further increasing the quality of your form submissions.

This guide explains how to take the id and names from the Webflow UI and insert them into the Bread & Butter script tag tag. This links the Bread & Butter code directly into your form. Please note that you need to be using Webflow’s drag and drop form functionality for this to work.

Note: You don’t need to add the ‘Continue with’ widget snippet for the One-click Forms widget to work. The ‘Continue with’ pop up will be launched on its own.

Step 1

Select your form. You can find your form by selecting it on the page, or by finding it in the Navigator in the left menu. You'll know you have the right element if you see "Form Settings" at the top of the Settings tab in the right pane.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: contact_form), and record it for use in a later step.

Step 2

If your form has one field for full name:

Select the Name field. You can find the Name field by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: full-name), and record it for use in a later step.
Skip the next step.

Step 3

If your form has separate fields for First Name and Last Name:

Select the First Name field. You can find the First Name field by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: first-name), and record it for use in a later step.
Repeat the above steps for the Last Name field.

Step 4

Select the email address field. You can find the email address field by selecting it on the page, or by finding it in the Navigator in the left menu.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: email), and record it for use in a later step.

Step 5

Select the Submit button. You can find the Submit button by selecting it on the page, or by finding it in the Navigator in the left menu where it is labelled as a button.
In the right pane, click on the gear icon to go to Element Settings.
Then, set the ID to a unique value (eg: contact-submit), and record it for use in a later step.

Step 6

At the top left of the Designer screen, click on the "W" Webflow icon, and select Site Settings.

Step 7

Select the Custom Code from the left menu.

Step 8

In the Head Code field, paste in the following script tag after the Bread & Butter initialization script tag:

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    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',
        submit: 'SUBMIT_BUTTON_ID',
        event: 'CUSTOM_EVENT_NAME'
    });
});
</script>

Note: If you have other Bread & Butter feature snippets, just add this snippet below them.

Step 9

Replace FORM_ID with the ID you set in Step 1.
If you have a field each for first name and last name, replace FIRST_NAME_FIELD_ID & LAST_NAME_FIELD_ID with the IDs you set in Step 3. Remove the line with FULL_NAME_FIELD.
If you only have one field for name, replace FULL_NAME_FIELD_ID with the ID you set in Step 2. Remove the lines with FIRST_NAME_FIELD & LAST_NAME_FIELD.
Replace EMAIL_FIELD_ID with the ID for the email address field you set in Step 4.
Replace SUBMIT_BUTTON_ID with the ID for the submit button that you set in Step 5.

Step 10

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 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.

Step 11

Click Save Changes.
Publish your website, when ready.

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