Follow these instructions to copy the embed code for a HubSpot form.
1. Open form
In your HubSpot Marketing Basic, Professional, 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.