Open Knock Scheduling after a HubSpot form submission

Use Knock Scheduling after someone successfully submits a HubSpot form on your website.

The HubSpot form continues to collect and submit the lead normally. After the submission succeeds, you can take the email collected by the form and open Knock Scheduling.

The Knock tag must be on the page first.

How it works

The flow is:

The visitor completes your HubSpot form.
HubSpot successfully submits the form.
Read the email from the submitted HubSpot form.
Pass the email to Knock.scheduling.load().
Open Knock Scheduling.

HubSpot’s current Forms API exposes the hs-form-event:on-submission:success browser event for a successful form submission. You can get the relevant form instance from that event and retrieve its field values.

Example

window.addEventListener(
  'hs-form-event:on-submission:success',
  async (event) => {
    const form = HubSpotFormsV4.getFormFromEvent(event);
    const fields = await form.getFormFieldValues();

    const emailField = fields.find(
      (field) => field.name === 'YOUR_EMAIL_FIELD_NAME'
    );

    if (!emailField?.value) return;

    withKnock((Knock) => {
      const scheduling = Knock.scheduling.load({
        magicLinkId: 'your-magic-link-id',
        email: emailField.value,
      });

      scheduling.open();
    });
  }
);

Replace:

'YOUR_EMAIL_FIELD_NAME'

with the field name used for email in your HubSpot form.

HubSpot’s getFormFieldValues() method returns the form fields as name/value pairs.

Waiting for the Knock tag

function withKnock(callback) {
  if (window.Knock) {
    callback(window.Knock);
  } else {
    window.addEventListener(
      'knock:ready',
      () => callback(window.Knock),
      { once: true }
    );
  }
}

For all available Knock Scheduling options, handles, and statuses, see Opening the Knock scheduling modal from your own code.

On this page