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

Last updated: December 6, 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 ways: use the HubSpot form embed code or HubSpot's Forms API.

The embed code gives you access to all the benefits of HubSpot forms including the contacts database integration 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's 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.

Open form

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

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. 

Click Options at the top of the forms editor. Then select Redirect to another page. From the dropdown menu, select the page you wish visitors to be redirected to after submitting the form.

Alternatively, you can select Display a thank you message and type a thank you message in the text field.

If your account is integrated with Salesforce, you can select an active Salesforce campaign to include contacts in upon submission. To do so, select Actions > Embed code in the upper right-hand corner of the forms editor. In the dialog box, select the Salesforce campaign from the dropdown menu. 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.

Copy the embed code

Once you've set up your redirect or thank you page and set a Salesforce campaign if necessary, click Actions > Embed code. 

In the dialog box, you can choose to select or deselect Include default styling depending on whether you'd like to preserve the styling of your form. Click Copy to copy your embed code.

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 deselecting Include default styling 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.

Save and publish your form

Click Save and then Publish in the upper right-hand corner.

Embed your HubSpot form on your external page

Paste the form's embed code 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 that 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, and more. 

Was this article helpful?

Previous article:

Next article: