Designer Courses / Create in Ceros
Embed a HubSpot Form
In this lesson, we are going to embed a HubSpot form into a Ceros experience. For the sake of context we created this functionality in a somewhat built out Ceros Experience, however, you can easily recreate these steps using your own experience. Before we get started, be sure to consult your Account Manager to ensure the HubSpot integration is enabled for your account. You can find additional instructions on how to set this up here.
Adding a HubSpot Form to Your Canvas
When you dive into the studio, you can see we have few different pages already set up, with a placeholder on page 3 for our HubSpot form. In this use case, we are going to use the form page to prevent users from navigating beyond page 3 until they’ve provided us with their information. To get started, navigate over to page 3 to begin setting up the form. Select the HubSpot integration icon in the menubar to load up all of the forms available from HubSpot. Your list will look a bit different than ours since it is pulling from your own HubSpot account.
To get a form into your experience you can simply select it and click Add to add it to your canvas. Ceros will generate a preview of your form directly in the Studio to give you an idea of how it will look. You can adjust the form size horizontally, however, any other changes to the look and feel will have to be performed in the CSS section of the inspector panel.
Gating Certain Pages Until Form Submit
Since we want to unlock a few additional pages on form submit, we’re going to first have to disable them by default. In the page navigator select the dropdown arrow for page 4 and select “disable page” from the selector. Repeat this step for the remaining pages in the experience so users can’t navigate past page 3.
Once you’ve disabled the remaining pages, navigate back to page 3 and select the form on your canvas. On the interaction tab let’s set up an “On submit” trigger > “Enable/disable pages” > Enable pages 4-6. Also, since we don’t want our users to see the form after they’ve already submitted their information, we can also disable page 3 on submit. The final step is to create an additional interaction to send the user to the next page in our experience. You can also set up thank you messages, toggle layers and more in this step. Feel free to play around with uncovering hidden layers, showing thank you messages and more in this step.
And that’s it. If you have any questions or comments on this build, or just looking for a particular functionality to bring your vision to life, be sure to reach out in the chat widget, and we’ll be happy to help.