In your HubSpot Marketing Basic, Professional, 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.