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