How to replace an existing form with a HubSpot form on your external website

Last updated: June 15, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

HubSpot understands that some of our customers maintain a website not hosted on HubSpot, but still want the ability to capture lead information and store it in HubSpot. We provide two options: Forms API and the form embed code. Using the embed code gives you access to all of the benefits of HubSpot forms like contacts database integration, smart fields, and progressive profiling (Professional and Enterprise accounts), on your external site with the HubSpot tracking code installed. In order to take advantage of all of HubSpot's form functionality, the tracking code should be on each web page you have live before adding form embed code.

If you need additional form functionality but still want to send captured contact data into HubSpot, you can code your own form and use the Forms API to pass that data into HubSpot via your server-side form action script. Using the Forms API requires a server-side developer, but some of the basic concepts are outlined here. If want more information on the Forms API, please check out our developers docs.

Since the embed code contains Javascript, you'll first need to make sure that your other CMS allows for usage of Javascript in the content areas of your pages.

With your HubSpot form placed on your external website (with the tracking code), it will function the same way it would on a HubSpot page; you will be able to view the source of your contacts' arrivals, view the data they submit and on which page, analyze the views to submissions ratio to see how your forms are performing, create lists based on this data, execute workflows based on submitting the form and more. While using HubSpot forms on HubSpot landing pages and site pages keeps all your content in one location, and making, sharing and analyzing each page's performance easier, it is still simple to use these forms externally.

Instructions

Follow these instructions to copy the embed code for a HubSpot form.

1. Open form

From Contacts > Forms, open an existing form or create a new form.

2. Select Embed

Once your form is ready and saved, select Embed button.

3. Insert a redirect URL or an inline thank you message

Type or paste your redirect URL in the first line.

To use a HubSpot form externally, the form submission must redirect your leads to a thank you page or set an inline thank you message. 

Or you can insert your own inline thank you message to display after someone has filled out your form.

If you're integrated with Salesforce, you can select an active Salesforce campaign to include contacts in that campaign upon form submissions. When your contacts submit the form and sync back to Salesforce, they will be a part of your selected campaign. Only active campaigns will appear in this picklist.

While most changes to your form within HubSpot's app will automatically update your embedded form, changing the Salesforce campaign requires replacing your embed code. If you decide to change campaigns after embedding the form:

  • Go back into the form
  • Select a new campaign
  • Embed the new form code on your external website.

New submissions will be tied to the new campaign (based on the ID in the embed code). Old submissions will need to be moved to the new campaign in Salesforce.

4. Copy the embed code

In the window, copy the embed code that appears. All pieces of the code must be present in order to properly capture lead information and pass it back to HubSpot.

If you add new properties or edit existing property options to your form, they will appear on your external page with the new field options.

5. Save form

Lastly, save your form as there are new options associated with your form.

6. Embed your HubSpot form on your external page

In this step, you will take the form's embed code (copied on step 4) and paste it within your external page. With that said, this requires you to access the HTML code of the external page in question. Normally, if you are unsure of where to insert the form's embed code within the HTML of your external page, we recommend consulting with your website administrator to ensure the form is embedded appropriately in the desired spot.

Modifying your embed code (Advanced)

There are some situations where you may want to modify your embed code to further customize the presentation and other form options. For example, embeded HubSpot forms automatically load some styling to help ensure that the form looks good on any page, regardless of that page's CSS. However, some advanced users may want to customize the look for their form, by modifying the embed code. A full list of form embed customization options can be found here.

Was this article helpful?

Previous article:

Next article: