HubSpot One-click Forms on your site

Last updated 10/12/2022

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 HubSpot forms on a non-HubSpot hosted page (see below), or on a HubSpot hosted page.

After users authenticate, the name and email fields will be auto filled and will not be editable. This prevents users from signing in and then changing their address or name, further increasing the quality of your form submissions.

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 custom API 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 Custom API Event under API Events in Bread & Butter. For steps on how to do this, check out our API Events page.

Step 1

Log in to your HubSpot Account.


Step 2

If you have not already done so, create a HubSpot form using HubSpot's form creation guide:

https://knowledge.hubspot.com/forms/create-forms


Step 3

  • After publishing your form, click Embed at the top right of the edit page
  • Then, click on the Embed code tab, and click Copy.
Step 3

Step 4

If you have not done so already, add the HubSpot embed code to your website


Step 5

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

<script>
    window.initBreadButter  = function () {
                BreadButter.configure({
                    app_id: '[APP_ID]'
                });
            };
        (function(d, s, id){
    var js,fjs=d.getElementsByTagName(s)[0];
    if(d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
            js.src = 'https://cdn.breadbutter.io/dist/breadbutter.6.1.0.674.min.js';
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'breadbutter-js'));

    const HUBSPOT_SUBMIT_EVENT = '[EVENT_CODE]';
    window.addEventListener('message', event => {
        if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
            BreadButter.ui.applyHubspotForm();
        } else if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
            if (HUBSPOT_SUBMIT_EVENT) {
                BreadButter.events.custom(HUBSPOT_SUBMIT_EVENT);
            }
        }
    }); 
</script>

Step 6

  • Replace [APP_ID] with the App ID of your Bread & Butter app.
  • Replace [EVENT_CODE] with the API event code that you have set up for this form. See Creating a Custom API Event.