Open Knock Scheduling after a Marketo form submission

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

The Marketo 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 Marketo form.
Marketo successfully submits the form.
Read the email from the submitted Marketo form.
Pass the email to Knock.scheduling.load().
Open Knock Scheduling.

Marketo’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 = MarketoFormsV4.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 Marketo form.

Marketo’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