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

Last updated: June 15, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

If you maintain a website that is not hosted on HubSpot, but still want the ability to capture lead information and store it in HubSpot, you can do so in one of two options: by using the HubSpot form embed code or HubSpot's Forms API.

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. In order to take advantage of HubSpot's form functionality, the Hubspot tracking code must be installed on each of your pages before adding the form embed code. You can find instructions for using the embed code below. 

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 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 you'd like more information on the Forms API, please check out our developers docs.

Please note: the HubSpot form embed code contains JavaScript so you'll need to make sure that your CMS supports the use of JavaScript in content areas of your pages.

Instructions

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

1. Open form

In your HubSpot Marketing BasicProfessional, or Enterprise account, navigate to Contacts > Forms. Open an existing form or create a new form.

2. Select Embed

Once you've updated or created your form, go to the Embed tab in the left sidebar.

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

To use a HubSpot form externally, you must set up either a redirect to a thank you page or an inline thank you message. 

If you'd like visitors to be redirected to a thank you page, select Redirect, then enter the URL of your thank you page into the field below. 

Alternatively, you can insert an inline thank you message to display after someone has filled out your form.

If your account is integrated with Salesforce, you can select an active Salesforce campaign to include contacts in upon submission. When your contacts submit the form and sync back to Salesforce, they will be added to the selected campaign. Only active campaigns will appear in this dropdown menu.

While most changes to your form in HubSpot will automatically update your embedded form, if you change the Salesforce campaign after embedding the form, you will need to replace the code. If you decide to change campaigns after embedding the form:

  • Return to the form.
  • Select a new campaign.
  • Embed the new form code on your external website following the steps below.

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 manually.

4. Copy the embed code

Once you've set up your redirect or thank you page and set a Salesforce campaign if necessary, click Copy embed code to copy the entire code to your clipboard. All pieces of the code must be present in order to properly capture lead information and pass it back to HubSpot.

Please note: embedded 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 of their form (a full list of form embed customization options can be found here)If you would like to override HubSpot's default styling, you can do so by checking the Remove HubSpot default styling box prior to copying the code. It is highly recommended that you work with a web developer to implement custom styling.

If you add new fields or edit properties that appear on your form, the live version of your form will automatically be updated.

5. Save form

Click Save form in the top right-hand corner to save your changes.

6. Embed your HubSpot form on your external page

You'll now need to paste the form's embed code (copied in step 4) in the HTML of your external page. If you are unsure of where to paste the form's embed code, we recommend consulting with your website administrator to ensure the form is embedded in the correct place.

With your HubSpot form placed on your external website (with the tracking code), you will be able to view the source of your contacts' conversions, 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. 

Was this article helpful?

Previous article:

Next article: