How to Embed Forms on a HubSpot Page

A large number of our customers prefer using external forms (like FormCrafts, Typeform, Jotform etc ...) over HubSpot's default forms. External platforms provide functionality missing from default HubSpot forms, like:

1. Multi-step forms
2. More styling options
3. Advanced fields
4. Conditional logic

The App Marketplace over at HubSpot has a ton of options for you to choose from.

In this tutorial we will learn how to embed external forms on a website or landing page created in HubSpot using FormCrafts as an example.

Step 1: Create your form

If you don't have a FormCrafts account already you can signup for one here. We also have tutorials on how to create a form in FormCrafts and connect it to HubSpot. Here is one article that demonstrates how to create a contact / lead generation form in FormCrafts and connect it to HubSpot.

Once your form is ready we will move on to the next step.

Step 2: Copy the embed code

Most form builders provide you with an embed code. In FormCrafts the embed code is available on the form edit page, on the top-left corner. Look for the Share / Embed button.

The Share / Embed tab looks something like this:

FormCrafts offers different types of embed codes, which can be grouped into 3 types:

1. Inline JavaScript
   This is the most commonly used embed type. Simply put, it allows you to add a form anywhere on the page, next to your content. The form loads alongside your content.
2. Popup JavaScript
   This allows you to add a link or button on the page which would then show the form on click
3. Inline iFrame
   This is a variation of the first option. Visually it is very similar. We recommend this option only when you are having issues with the first option. This usually happens when a CMS does not support JavaScript. Luckily, HubSpot does support JavaScript so we don't need this embed code.

Copying the embed code is rather simply. Click on copy.

Step 3: Edit your HubSpot page

External forms can be embedded on a HubSpot website or a HubSpot landing page. You can access your landing pages in HubSpot via Marketing -> Landing Pages. You can access your websites via Marketing -> Websites -> Website Pages. HubSpot's page editor is largely the same for both so the steps below remain unchanged between landing pages and website pages.

For this tutorial we created a website using HubSpot's webinar template, which already contains a placeholder for a form. Remove this placeholder form element and replace it with a Rich Text block. Your page should now look something like this:

Here is the important bit. Select this Rich Text block and click on Advanced -> Source code.

This opens up a dialog. Replace all the contents with our embed code (which was copied in Step #2), and click on Save.

That is all we have to do. You can now preview the page and it should contain your form.

Variation: Popup forms

As we noted before, FormCrafts also supports popup forms. What if you didn't want the form to appear on page load, but rather when the visitor clicks on Request quote or Signup here. This can be achieved via popup embed codes.

We go back to the FormCrafts page where we copied the embed code, and click Share / Embed again. Click on Popup form. You will notice that our embed code now has two parts. For the inline form we coped our embed code and pasted it in the source code of HubSpot's Rich text block. With popup forms we would do the same. We will copy both parts of our embed code and paste them in the same spot.

Now hit Save Changes, and click on preview. Here is our popup form in action:

Conclusion

HubSpot has excellent support for external forms, and the HubSpot marketplace has a plethora of options to choose from. This makes using external form builders a no-brainer. The highest rated form builder on the App Marketplace is FormCrafts. You can learn more about FormCraft's HubSpot integration and features here.