HubSpot Form Not Showing on Website

Your HubSpot form isn’t showing up? This common issue often boils down to a few key problems:

• Missing or incorrect tracking code: Without the HubSpot tracking code installed on your website, forms won’t load.
• Embed code issues: The form's embed code might be placed incorrectly or have errors.
• JavaScript or CSS conflicts: Other scripts or styles on your site could be interfering with the form.
• Platform-specific problems: WordPress plugins, Squarespace navigation scripts, or caching tools can block forms.
• Form settings: Unpublished forms or progressive fields may hide certain elements for returning users.

Quick Fixes:

1. Verify the HubSpot tracking code is installed on all pages.
2. Check the form’s embed code placement in your site’s HTML.
3. Use browser developer tools (F12) to identify JavaScript errors or CSS conflicts.
4. Test the form’s standalone URL to rule out page-specific issues.
5. Clear browser and site cache to ensure updates are applied.

If these steps don’t resolve the issue, you may need to adjust platform settings, fix visibility settings, or contact HubSpot Support for further assistance. Let’s dive into the details to get your form working.

How to Embed HubSpot Forms on Your Site

Check HubSpot Tracking Code Installation

The HubSpot tracking code is a small but essential JavaScript snippet that needs to be installed on every page of your website. It plays a critical role in enabling form functionality and collecting real-time data. Without it, your forms simply won’t load, even if everything else is configured correctly.

What the HubSpot Tracking Code Does

At its core, the HubSpot tracking code is the backbone of all HubSpot features on your site. It ensures that HubSpot forms and other tools work seamlessly. Think of it as the foundation that powers everything.

Here’s how it works: the tracking code sets up the global infrastructure across your website, while the form embed code is specific to each individual form. The embed code tells HubSpot where to display a particular form. The key takeaway? The tracking code is installed once across your entire site, while the form embed code is unique to each form. You need both for everything to function properly.

How to Verify Tracking Code Installation

To check if the tracking code is set up correctly, start with these steps:

1. Locate the tracking code in your HubSpot account: Go to Settings > Tracking Code in HubSpot. Here, you’ll find your unique code snippet that needs to be added to every page of your site.
2. Check your website’s source code: Open your site’s page source (right-click and select "View Page Source" or press F12). Look for the HubSpot tracking code, which typically starts with "hbspt.cta" or includes your portal ID. If it’s missing, the code hasn’t been installed on that page.
3. Test with a standalone page: Every HubSpot form has a standalone URL that displays the form independently of your site’s code or style. Open this URL in a new browser tab. If the form works there but not on your website, the tracking code might not be installed or functioning properly on your site.
4. Use browser developer tools: Open the Network tab in your browser’s developer tools (F12) and look for requests to HubSpot domains. If you see failed requests (e.g., 404 or 403 errors), the tracking code isn’t loading correctly. The Console tab can also reveal JavaScript errors that might point to conflicts with other scripts.

Once you’ve confirmed the tracking code is installed, you can move on to troubleshooting common issues that might interfere with its functionality.

Fix Common Tracking Code Problems

If the tracking code isn’t working as expected, there are several potential culprits to investigate:

• Installation issues: On WordPress, the tracking code can be added via the official HubSpot plugin or manually in your theme’s header.php file. Place it before the closing </head> tag or in the footer, depending on your theme’s setup.
• Plugin conflicts: Sometimes, other plugins can interfere with the HubSpot tracking code. To identify the problem, disable plugins one by one and test your forms. If a specific plugin is causing the issue, reach out to its support team or explore alternative solutions.
• Caching problems: WordPress caching plugins can prevent the tracking code from loading correctly. Clear both your WordPress cache and browser cache, then test your site in an incognito window. If forms only appear when you’re logged into WordPress, caching is likely the issue.
• Consent banners and cookie settings: If your site uses a cookie consent banner, it might block the tracking code until visitors accept cookies. Work with your consent management platform (CMP) to ensure the HubSpot script loads as required by your privacy policy.
• Platform-specific setups: For platforms like Shopify, add the tracking code under Online Store > Preferences > Additional Scripts. On custom-built sites, include the code in the <head> section of your HTML or a global header file. Platforms like Wix, Squarespace, and Webflow have their own methods for injecting custom code.
• CORS errors or script blocking: If you see CORS (Cross-Origin Resource Sharing) errors in the Console tab, it means the tracking code or form is being blocked by security settings or browser extensions. Temporarily disable those settings or extensions to test.

If forms still don’t display after resolving these issues, try setting the HubSpot form to Raw HTML mode. This lets your site’s CSS handle the styling, which can sometimes fix display problems.

Review Form Embed Code and Placement

Once you've confirmed the tracking code is in place, the next step is to ensure the embed code is correct and positioned properly on your website.

Where to Find the Embed Code

You can locate your form's embed code directly in your HubSpot account. Open the form you want to use, and click the "Embed" button in the top-right corner of the form editor. This will generate a unique embed code specifically for that form.

The embed code is a JavaScript snippet, typically starting with a <script> tag, and includes references to js.hsforms.net along with your unique form ID. This code tells your website how to load and display the form. Since each form has its own embed code, make sure you're copying the one tied to the specific form you want to add.

Be sure to copy the entire code block - including both the <script> tag and the form initialization script. For example, the complete code should include:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "123456",
    formId: "abcdefg-hijk-lmnop-qrst-uvwxyz123456"
  });
</script>

After copying, paste the code into a plain text editor. This step helps avoid introducing unwanted formatting or special characters that could break the script. Double-check the pasted code against the original in HubSpot to ensure it's an exact match.

How to Embed Forms Correctly

Once you have the correct embed code, placing it in the right spot on your website is just as important as the code itself. The embed code should be added to the body section of your HTML, precisely where you want the form to appear on the page.

Avoid placing the embed code inside other script tags, within conditional comments, or in areas where it might conflict with your page's CSS or JavaScript. For better control, wrap the embed code in a dedicated container (e.g., a <div> element). This allows you to style and position the form without interference from surrounding elements.

Here are some platform-specific tips for embedding forms:

• WordPress: Use an HTML module or a custom code block to add the form. Avoid using the visual editor, as it may strip out or alter the script tags.
• Squarespace: Some templates only render scripts during the initial page load, which can cause forms to disappear when navigating between pages. If this happens, disable Ajax loading in your Squarespace settings or switch to a template that handles external scripts more reliably.
• Other platforms: Refer to the platform's documentation for adding custom HTML. Typically, you'll need to use a custom code or HTML block, as regular text fields won't execute JavaScript.

Make sure the embed code is placed after the tracking code. The tracking code must load first to establish a connection with HubSpot's servers, enabling the form to function properly.

If the form doesn't display as expected, inspect the container's CSS. Issues like incorrect positioning, margins, or padding might be causing the problem. Use your browser's developer tools (press F12 and use the inspect tool) to identify any CSS rules affecting the form's placement. Adjust the styling as needed.

Test Forms on Standalone Pages

Every HubSpot form comes with a standalone URL where the form is displayed independently of your website's code or styling. This is a handy diagnostic tool.

Open the standalone URL in a new browser tab. If the form loads correctly there but not on your site, the issue likely stems from conflicts on your page - such as JavaScript errors, CSS interference, or incorrect embed code placement. If the form doesn’t display on the standalone page either, revisit the form's configuration and ensure the tracking code is set up correctly.

This isolation method can save you a lot of troubleshooting time by narrowing down whether the issue is with the form itself or your website's setup. Once the form is embedded, test it thoroughly in multiple browsers and on various devices. Submit a test entry using a dummy email address to confirm that the form not only displays correctly but also captures and sends data to your HubSpot account.

If the form still doesn't display, open your browser's developer tools and check the console for JavaScript errors. Look for network requests to js.hsforms.net to confirm the script is loading. Any failed requests or error messages will guide you to the next steps in resolving the issue.

Fix Page-Level Conflicts

Even with the correct tracking and embed codes in place, page-level code conflicts can prevent HubSpot forms from displaying correctly. This is one of the most common reasons forms fail to appear on HubSpot-hosted or external pages. The problem often lies with CSS stylesheets or JavaScript scripts on the hosting page, which can interfere with form rendering, making them either invisible or non-functional.

To resolve these issues, you’ll need to identify where the conflicts occur and address them using your browser’s built-in tools.

Use Browser Developer Tools to Spot Conflicts

To start troubleshooting, press F12 (or right-click on the page and select "Inspect") to open the developer tools panel.

• Check the Console tab: Look for red error messages related to HubSpot, form scripts, or js.hsforms.net. These errors might point to jQuery conflicts, undefined variables, or blocked resources.
• Inspect the Elements tab: Find the <div> or section where your form should appear. Examine the applied CSS rules for properties such as display: none, visibility: hidden, or opacity: 0, which could be hiding the form. Also, check for zero width or height values or positioning rules that might push the form off-screen.
• Review CSS overrides: CSS frameworks like Bootstrap often apply broad styling rules that can conflict with HubSpot’s form elements. Look for any CSS rules overriding HubSpot’s styles.

Once you’ve identified the conflicts, you can modify the CSS or JavaScript to resolve the issue.

Fix CSS and JavaScript Conflicts

Addressing conflicts requires isolating problematic scripts or adjusting styles that interfere with your form.

• Resolving JavaScript conflicts: Temporarily disable third-party scripts to pinpoint the issue. In your HTML, comment out script tags one by one, testing the form after each removal. Scripts from analytics tools, chat widgets, or ad platforms are frequent culprits. Once you identify the problematic script, try updating it to a compatible version, loading it after the HubSpot form script, or using a different implementation method.
• Fixing CSS conflicts: If your site’s CSS is causing display issues, consider using HubSpot’s Raw HTML mode for forms. This mode allows your site’s CSS to take precedence over HubSpot’s default styling, which can resolve layout problems. To enable this, go to your form settings in HubSpot and select the Raw HTML option. Keep in mind that you’ll need to manually style the form to match your website’s design.

For persistent CSS conflicts, apply custom styles directly to the form container. For example, if the form is hidden, you can use:

.hbspt-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

Document any conflicting scripts or styles for a long-term solution.

Fix WordPress and Platform-Specific Issues

WordPress sites often present unique challenges, such as plugin conflicts, incorrect tracking code installation, or page builder limitations.

If your forms only appear when logged in, follow this troubleshooting sequence:

1. Log out of your HubSpot plugin in WordPress.
2. Temporarily remove the plugin.
3. Log out of WordPress completely.
4. Clear your browser cache and cookies.
5. Log back in and test the form.

This process resets the connection between WordPress and HubSpot, which often resolves visibility problems.

For page builders like Elementor, compatibility issues can arise when inserting HubSpot forms. Instead of using the builder’s native form insertion tools, embed the form using a custom HTML block. Paste the HubSpot form embed code into this block. If that doesn’t work, try embedding the form outside the page builder by editing the page template or using a different section of the page.

Additionally, check that the page builder isn’t applying restrictive CSS rules that hide external forms. Some builders use their own CSS frameworks, which can conflict with HubSpot’s styles. Adjust the page builder’s settings to ensure external scripts load correctly.

If platform-specific issues persist despite your efforts, consider switching to a dedicated form solution like Reform. Reform integrates seamlessly with various page builders and WordPress setups, eliminating many of the common conflicts that arise with HubSpot forms on complex websites.

sbb-itb-5f36581

Adjust Form Visibility and Progressive Field Settings

HubSpot's progressive field feature can sometimes make forms appear incomplete because it hides fields when visitor data is already stored.

How Progressive Fields Work in HubSpot

Once you've addressed page-level fixes, it's important to review HubSpot's progressive field settings to ensure your form fields are visible.

Progressive fields work by automatically hiding themselves if HubSpot already has the relevant information about a visitor. For example, if someone has previously entered their email address on one of your forms, HubSpot remembers it and won't show the email field again on forms where that field is set as progressive.

This feature helps returning visitors by reducing the need to re-enter data already stored in their contact record. However, during testing, you might notice that while all fields appear initially, fewer fields show up on subsequent visits. This happens because HubSpot identifies you as a returning visitor, which can complicate the process of verifying how the form looks to first-time users.

Things get trickier when you need to gather updated information. For instance, if a contact's job title has changed but the job title field is set as progressive, the field will remain hidden, assuming the old data is still valid.

Change Visibility Settings for All Users

To make sure your forms display consistently for everyone, you might want to disable progressive settings. While this eliminates the streamlined experience for returning users, it ensures a uniform display for all visitors.

In HubSpot's form editor, you can turn off the progressive toggle for each field and then publish the updated form.

After saving, test the form by opening its standalone URL in an incognito window (after clearing your cache and cookies) and submitting a test entry to confirm everything works as intended.

Disabling progressive fields means every visitor will see the same form fields, even if they've already submitted the form in the past. This can be helpful when you need to collect updated information regularly, but it might annoy returning users if they're asked for details they've already provided.

For a more balanced solution, consider which fields need to be visible to every visitor. For example, essential contact information like an email address could remain progressive, while fields that often require updates - like current challenges or budget details - might be better set as regular fields.

If the progressive settings don't align with your data collection goals, you might want to explore tools like Reform. Reform's smart field logic offers more flexibility, ensuring all necessary fields stay visible for both new and returning visitors, making it easier to enrich your leads.

Once you've addressed visibility issues, you can move on to verifying browser compatibility in the next section.

Test for Browser and Platform Compatibility

Once you've ensured proper code placement and resolved any conflicts, the next step is to check if browser or platform compatibility issues are preventing your form from displaying. Since browsers can behave differently, it's essential to test your form's standalone URL across multiple browsers - such as Chrome, Firefox, Safari, and Edge - on both desktop and mobile devices. This will help pinpoint whether the issue lies with the browser, the platform, or the page itself.

Test on Different Browsers and Devices

Start by determining if the issue is browser-specific. Open your form's standalone page URL in one browser. If it displays there but not on the embedded page, the problem is likely tied to the page rather than the browser.

Systematically test the embedded form on major browsers using desktop computers. For mobile testing, focus on iOS Safari and Android Chrome, as mobile browsers often handle scripts differently from their desktop counterparts. Testing on actual devices - like smartphones, tablets, and laptops - is crucial since device-specific issues can arise independently of browser choice.

While testing, use developer tools to check for JavaScript errors. Open the Console tab to identify any script conflicts that might prevent the form from loading. Document your findings: note which browsers succeed, take screenshots, and record error messages. This methodical approach can reveal patterns pointing to specific compatibility problems.

Be aware that browser extensions can block HubSpot forms. Extensions like AdBlock, uBlock Origin, Privacy Badger, Ghostery, and NoScript often prevent third-party scripts from running. To rule out extension interference, open your form in an incognito or private browsing window where extensions are usually disabled. If the form appears in incognito mode but not in regular browsing, an extension is likely the culprit.

Finally, confirm that your embedded code functions properly on your chosen platform.

Clear Cache and Cookies

Browsers store cached versions of pages and scripts to improve load times, but this can create problems when testing updates. Your browser might load an outdated version of the page, missing your latest embed code or form adjustments.

HubSpot also uses cookies to track visitor interactions and remember previously filled form fields. If you've been testing the form repeatedly, these cookies might interfere with its display - especially if you're using progressive field logic.

To address this, clear your browser's cache and cookies. In Chrome, click the three-dot menu, go to Settings > Privacy and Security, and select "Clear browsing data." Choose "All time" as the time range, then check "Cookies and other site data" and "Cached images and files" before clicking "Clear data." Other browsers have similar procedures.

After clearing your cache and cookies, log out of WordPress if you're using it to manage your site. Close all browser tabs, restart your browser, and test the form again. This ensures you're viewing the most up-to-date version without interference from stored data.

Once you've done this, check for platform-specific settings that might be causing display issues.

Fix Platform-Specific Embedding Issues

Certain platforms, like WordPress and Elementor, come with unique challenges that can prevent HubSpot forms from appearing. For instance, in WordPress, forms may only display when you're logged into the admin panel but not for regular visitors. This often happens when the HubSpot tracking code isn't properly installed or activated on the public-facing site.

To fix this, go to Settings > Tracking Code in your HubSpot account and verify that the tracking code is installed on your WordPress site. You can add it via a WordPress plugin or by manually inserting it into your site's header.

Elementor introduces its own challenges. Forms might remain invisible in both the editor and on live pages because Elementor's native form handling can block the HubSpot embed script. To address this, use an HTML module instead of a form widget when adding a HubSpot form. Paste the complete HubSpot embed code into the HTML module, then save and publish.

If the form still doesn't appear, switch the HubSpot form to "Raw HTML" mode in your form settings. This ensures that your site's CSS is applied correctly without clashing with Elementor's styling. Additionally, deactivate WordPress plugins one by one to identify any that might be interfering with third-party scripts.

For Squarespace users, the issue often stems from Ajax loading. Some Squarespace templates only execute scripts on the initial page load, so your form might appear on the first page a visitor lands on but disappear as they navigate the site. To resolve this, disable Ajax loading in your Squarespace settings or switch to a template that handles scripts more consistently.

If you've thoroughly tested across browsers, cleared cache and cookies, and addressed platform-specific issues but the form still won't display, it's time to reach out to HubSpot Support. Be sure to provide detailed documentation of your troubleshooting steps to help them assist you effectively.

When to Contact HubSpot Support

If you've tried every troubleshooting step and your HubSpot form still won't display, it's time to reach out to HubSpot Support. This includes verifying the tracking code, testing across different browsers, clearing your cache, and resolving potential conflicts. If none of these work, support can help.

You should also contact HubSpot Support if the form fails to show even on its standalone page URL. This often points to a configuration issue rather than a problem with the page itself. Other scenarios that warrant support include persistent submission errors, forms appearing in the wrong position despite updating the embed code, or needing assistance with consent banners or privacy compliance.

If you’ve checked all the basics and the form remains invisible, escalating to HubSpot Support is your best option.

What to Prepare Before Contacting Support

Having the right information ready can make your interaction with HubSpot Support much smoother and help them resolve your issue faster. Here's what you should gather:

• Screenshots of the problem: Take clear screenshots showing the form not displaying on your live page and its standalone page URL for comparison.
• Form settings details: Confirm that your form is published (not in draft mode). Note if progressive fields are enabled and which ones are set as progressive. Ensure the standalone URL for the form is accessible.
• Embed code: Provide the complete form embed code exactly as it appears in HubSpot. Mention where this code is placed on your page.
• Technical and platform information: Specify your website platform (e.g., WordPress, custom HTML, or a page builder like Elementor). If you're using WordPress, list active plugins and note if the form displays when plugins are temporarily deactivated.
• Console error logs: Open your browser's developer tools, go to the Console tab, and capture any error messages. Include details about custom CSS classes or JavaScript libraries running on the page.
• Testing log: Document the browsers and devices you tested, whether incognito mode made a difference, and any patterns you noticed.
• Page URL and tracking code: Share the exact URL where the form should appear and confirm that the HubSpot tracking code is installed on the page.

With this information in hand, HubSpot Support can quickly pinpoint the issue and guide you toward a solution.

Consider Other Form Solutions

If HubSpot Support can't resolve your issue quickly or if similar problems keep occurring, it might be time to explore other form tools. Ongoing compatibility issues can disrupt your lead generation efforts, and switching to a dedicated form solution could save you time and frustration.

Reform is one alternative that offers a no-code platform focused on conversions. It eliminates many common embedding challenges and comes with features like multi-step forms, conditional routing, spam prevention, email validation, lead enrichment, and real-time analytics. Plus, it integrates seamlessly with tools like HubSpot, so you won’t need to overhaul your workflows.

Switching platforms might make sense if you’re dealing with recurring display issues, if your website’s structure conflicts with HubSpot’s embedding requirements, or if you need advanced features that HubSpot forms don’t provide. Reform even offers a free plan with unlimited responses, so you can test it out without any upfront costs. This makes it a practical option for ensuring your forms work reliably while meeting your lead generation needs.

Conclusion

When your HubSpot form doesn't show up on your website, the issue typically falls into a few key areas. The most common culprits include missing or incorrectly installed tracking codes, conflicts with CSS or JavaScript, or errors in the embed code - tracking code problems being the most frequent.

A step-by-step troubleshooting approach usually resolves these problems. However, if routine checks don't work, don't let the issue drag on. If you've spent more than 4–6 hours trying to fix it, it might be time to reach out to HubSpot Support or reevaluate your setup. Some website structures simply aren't compatible with HubSpot's embedding requirements, and extended troubleshooting could mean missed opportunities. In such cases, a specialized solution like Reform might be worth exploring. It simplifies lead capture and reduces the technical hassle.

To avoid these issues in the future, routine maintenance is key. Regularly clear your cache, test changes, and keep detailed documentation of fixes. This ensures your forms stay functional, minimizing downtime and helping you capture more leads.

FAQs

How do I verify that the HubSpot tracking code is properly installed on my website?

To make sure the HubSpot tracking code is properly installed on your website, start by reviewing your site's source code. The tracking code snippet should be located just before the closing </body> tag on every page you want to monitor.

Another way to verify the installation is by using HubSpot's Tracking Code Validator, available in your account settings. If the code is missing or not working, you can reinstall it by copying the code from your HubSpot account and pasting it into your website's global footer. For those using a content management system (CMS), check if HubSpot offers integrations or plugins to streamline the setup.

Still having trouble? Double-check that your browser isn’t blocking scripts and make sure the tracking code isn’t clashing with other scripts on your site.

Why isn’t my HubSpot form showing on my website even after checking the tracking and embed codes?

If your HubSpot form isn’t showing up even after double-checking the tracking and embed codes, a few common culprits might be at play:

• JavaScript conflicts: Your website’s scripts might be clashing with the HubSpot form script. Try disabling other scripts temporarily to see if the form appears.
• Caching issues: Sometimes, cached data can cause problems. Clear both your browser and website cache to ensure you’re loading the most up-to-date version of your site.
• Domain settings: Confirm that the HubSpot tracking code is properly installed on the domain where your form is embedded.

Still stuck? You might want to explore tools like Reform, which let you design branded forms that integrate effortlessly with your website and marketing workflows.

Why isn’t my HubSpot form displaying on my website, and how can I fix potential JavaScript or CSS conflicts?

If your HubSpot form isn’t showing up on your website, the issue might stem from JavaScript or CSS conflicts. These conflicts can occur when other scripts or styles on your site interfere with the form’s behavior.

Here’s how you can troubleshoot and fix it:

• Check for JavaScript errors: Open your browser’s developer tools (press F12) and look at the console for any errors. Pay close attention to conflicts involving third-party scripts or libraries.
• Inspect CSS rules: Review your site’s styles to see if custom CSS is overriding or completely hiding the form’s design.
• Test in a clean environment: Temporarily disable other plugins or scripts on your site. If the form starts working, re-enable them one at a time to pinpoint the conflict.

If these steps don’t resolve the issue, it’s a good idea to contact HubSpot support or consult with your developer for additional help.

Related Blog Posts

• How to Embed Forms on Any Website
• Google Forms to HubSpot: Step-by-Step Guide
• How to Debug HubSpot Form Field Mapping
• HubSpot Email Form Integration: Best Practices