Connect a HubSpot form

For external form import in general, see What is external form import?.

Jicoo runs routing when it receives the submission-complete notification that HubSpot publishes. Only the newer embed format publishes that notification.

If your embed code contains v2.js or hbspt.forms.create, it is the older format. Submissions cannot be detected in that case — go back to the HubSpot form editor and get the newer embed code.

Jicoo detects submissions through code that runs on the page where your form is displayed, so you need to be able to add that code to the page.

Note: whether you can add code to a HubSpot page depends on your HubSpot plan. If the option is unavailable, consider embedding the form on a page of your own site instead.

Create an embedded form from the form builder. For a demo or a trial run, a set of fields like this works well.

Include one choice field such as "Inquiry type" so you can route submissions based on the answer.

A choice field has to be connected to a CRM property. If the field editor shows that it is not connected, create one from Create new property.

If the property label contains only non-Latin characters, HubSpot cannot generate an internal name and the create button stays disabled. Use Edit internal name and enter something like inquiry_type in ASCII characters.

Option internal values cannot be generated from non-Latin labels either, so HubSpot fills them with random strings such as 2yWP_B7CqLOsyIjVcTjz.

That still works, but Jicoo's routing screen shows those raw strings, which makes the rules hard to read. We recommend overwriting the value fields on the right with the option labels, or with readable ASCII values.

If you keep HubSpot's "First name" and "Last name" as separate fields, only the first name is carried into the booking form. To carry the full name, combine them into a single field in HubSpot. See "Limitations" at the end of this article.

Publish the form and copy the embed code from Share.

Add the embed code to the page where you want the form to appear, and publish it. Do this now even if you are using a HubSpot landing page.

Make a note of the published page URL. You will register it in Jicoo in the next step.

In the dashboard, go to Routing → Add Form → Import from Other Services → Create, then choose Create under HubSpot.

Note: if an introduction screen appears and you cannot continue, reach us from the chat at the bottom right.

Enter the URL of the page hosting your form under Form URL and select Load. You cannot add fields until you do this.

HubSpot forms cannot always be read automatically. It is fine if you see "No form fields were detected" — add them by hand with Add field.

Configure each field as follows.

For choice fields, enter the HubSpot option internal values under Choices, one per line.

You can check an internal name in the HubSpot form editor by selecting the field and looking at the panel on the right.

To see exactly what gets submitted, open the page hosting your form in a browser, run the following single line in the developer tools console, then submit the form. The submitted field names and values are printed as a list.

window.addEventListener('hs-form-event:on-submission:success', async (e) => console.log(await window.HubSpotFormsV4.getFormFromEvent(e).getFormFieldValues()));

Note: field names may appear in a form such as 0-1/email. Jicoo accepts either that full form or the shortened form (email).

Decide what happens based on the answers.

A newly added route starts with No routing selected. Nothing will happen after submission until you change it, so be sure to choose a destination.

Note: the Routing timing setting is not used with the HubSpot integration. Routing runs as soon as Jicoo receives HubSpot's submission-complete notification, so either option behaves the same.

Copy the generated code. Copy it exactly as shown, without editing it. Retyping any part of the address will stop it from working.

Note: with the HubSpot integration you do not need to install anything on a thank-you page. The page hosting the form is enough.

Add the copied code to the page hosting your form.

In the page editor, open Settings → Advanced and paste it into Head HTML under additional code snippets.

After saving, you must publish the page again. The change does not reach the live page until you select Update at the top right of the editor. Saving the settings alone is not enough — check this first if things are not working.

Add it to the same page as the HubSpot embed code. It works inside <head> or anywhere after the form.

Open the published page, choose an answer that matches your booking-page condition, and submit the form for real.

Also check that the email and name are already filled in on the scheduling screen.

Even when something is misconfigured, the form submission itself still succeeds and no error appears on screen. Please always test before going live.

If it still does not work, contact Jicoo support with the following:

If you keep HubSpot's "First name" and "Last name" as separate fields, only the first name is carried into the booking form. This does not change even when the booking page splits its own name field into first and last name.

To carry the full name, combine them into a single field in HubSpot and set it up as one field with the Name field type in Jicoo.

Fields with the Name, Email, or Phone number field type are carried into the booking form automatically.

To carry company, inquiry type, or a question specific to the booking page, map them under Prefill mapping in the external form edit screen. Mapping is configured per booking page.

Note: you cannot assign more than one field to the same booking form input.

If you use separate pages for testing and production, create a separate external form for each. The same embed code cannot be reused across several domains.