Last updated: October 13, 2020
If the HubSpot form you've embedded on an external page isn't working, is getting cut off, or doesn't look correct, confirm that the embed code on your external page is correct.
- In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
- Click the name of the form.
- In the upper right of the form editor, click Share.
- In the dialog box, click Copy.
- In your browser, navigate to Diff Checker, a text comparison tool. In the Original Text section, paste the form embed code.
- Right-click anywhere on the external page and select View page source. Locate the form embed code on the page and copy it.
- Navigate back to Diff Checker. In the Changed Text section, paste the externally embedded code.
- Click Find Difference to look for missing or broken code.
If the externally embedded code is incorrect, re-embed the correct code on your external page.
If the externally embedded code is correct, something in the HTML or JavaScript on your external page may be interfering with the form's embed code. If this is the case, work with your designer to address what may be conflicting.
On WordPress
If your form is embedded on a WordPress page, there are two additional points to note:
- WordPress may convert '&' in the embedded form code to '&' which will break the functionality of the code.
- XHTML Wordpress themes will add <![CDATA[ ]]> tags around the JavaScript, which should not affect whether the form renders.
If you see that WordPress is altering the embed code, use a third-party plugin (e.g., Insert HTML Snippet) to add the form to the page or post in the form of a shortcode to preserve the script tags.
On Squarespace
If your form is embedded on a Squarespace page, it may not work because in certain templates, Squarespace renders scripts only upon the first page load and not thereafter. Refer to this Squarespace post for more details and possible workarounds.