Identify Non-HubSpot Forms with CSS Selectors

If your site already has embedded forms, you can still connect them to Hubspot by identifying each non-native form with its CSS selector and mapping it to your CRM.

This guide walks you through how to locate a form’s selector in your browser, then configure it in your HubSpot forms settings so submissions are captured and tracked correctly.

Why Connect Non-Native Forms to HubSpot

Many websites use third-party or custom forms. Instead of rebuilding everything, you can let HubSpot detect those existing forms and treat their submissions like any other lead capture.

Connecting non-native forms to HubSpot allows you to:

• Centralize contact creation and updates in your CRM
• Trigger HubSpot workflows from external form submissions
• Use existing site design without replacing current forms
• Track form performance in HubSpot analytics

To make this work, HubSpot needs an accurate CSS selector for each form you want to track.

How HubSpot Uses CSS Selectors for Forms

A CSS selector is a way to target a specific element on a page, such as a form tag or a form wrapper. HubSpot uses this selector to recognize which HTML form should be treated as a non-native form submission.

In practice, you will:

1. Inspect the form element in your browser
2. Copy a unique CSS path or selector
3. Paste that selector into the non-native forms settings in HubSpot

After saving, HubSpot can watch the page for submissions that match this selector.

Prerequisites Before Setting Up in HubSpot

Before configuring non-native form detection in HubSpot, confirm these prerequisites:

• The HubSpot tracking code is installed on the site where the form lives
• You can access browser developer tools (Chrome, Firefox, Edge, or Safari)
• You have edit permissions to configure forms or tracking settings in HubSpot

Once these prerequisites are met, you can safely capture external form submissions in your HubSpot account.

Step-by-Step: Find the Form Selector for HubSpot

Use your browser’s inspector to generate a reliable CSS selector. The basic process is the same across modern browsers.

Step 1: Open Developer Tools for HubSpot Form Mapping

1. Open the webpage that contains the non-native form you want HubSpot to track.
2. Right-click directly on the form area (for example, on a field or the submit button).
3. Select Inspect or Inspect Element to open developer tools.

The HTML panel now shows the element you clicked, usually a field, label, or button within the form you want HubSpot to identify.

Step 2: Locate the Form Element Used by HubSpot

1. From the highlighted element in the HTML panel, move up the DOM tree until you find the surrounding <form> tag.
2. Confirm that this form wraps all the fields you want to send to HubSpot.
3. Check if the form has an id or distinctive class attributes that make it easy to target.

A clear id like id="newsletter-form" is ideal for HubSpot, because it becomes a simple selector such as #newsletter-form.

Step 3: Copy a Unique CSS Selector for HubSpot

Next, you need a selector that uniquely identifies the form so HubSpot does not confuse it with other elements.

Typical selector options include:

• #form-id if the form has a unique ID
• .form-class if a class is unique on the page
• A hierarchical selector such as form[action="/submit"] or div.wrapper form

In most browsers you can:

1. Right-click the <form> element inside the HTML panel
2. Choose an option such as Copy > Copy selector
3. Paste the copied selector into a text editor to review and simplify if needed

A cleaner, shorter selector often performs more reliably for HubSpot than a long, auto-generated path, as long as it remains unique.

Configure the Non-Native Form in HubSpot

Once you have a working selector, you can add it to your account so HubSpot recognizes the form.

Step 4: Open Non-Native Form Settings in HubSpot

1. Sign in to your HubSpot account.
2. Go to your Forms or tracking settings area, depending on your subscription and interface.
3. Locate the configuration for Non-HubSpot forms or Collected forms.

This section lets you control how HubSpot listens for external submissions and what it does when a match is found.

Step 5: Add the CSS Selector for the Form

1. Create a new non-native form configuration or edit an existing one.
2. Paste the CSS selector you collected into the selector field.
3. Give the form a clear internal name so you recognize it in HubSpot reports.
4. Map any fields if your tool provides options to match external field names to HubSpot properties.

After saving, publish or confirm changes so HubSpot can begin listening for submissions on that selector.

Step 6: Test That HubSpot Is Capturing Submissions

1. Open the live page in an incognito or private window.
2. Fill out the non-native form with test data and submit.
3. Return to HubSpot and check your recent contacts or form submissions.
4. Confirm that a new contact or submission record appears with the expected values.

If nothing appears, recheck the selector, ensure the HubSpot tracking code fires, and confirm there are no JavaScript errors preventing submission capture.

Best Practices for Stable HubSpot Form Selectors

Because sites change over time, follow these tips to keep your HubSpot tracking stable:

• Avoid selectors that rely on auto-generated or changing class names
• Prefer unique IDs or semantic classes for each form
• Coordinate with developers so form markup does not change unexpectedly
• Re-test forms after major site updates or template changes

Stable selectors ensure that HubSpot continues to detect and process form submissions without manual rework.

Learn More About HubSpot and Non-Native Forms

You can find the original reference for identifying non-native forms and their CSS selectors on the official documentation here: HubSpot non-native form selector guide.

For broader CRM and marketing operations strategy around HubSpot, you may also want expert consulting and implementation support. A good place to explore those services is Consultevo, which focuses on digital optimization and growth.

By combining accurate CSS selectors with consistent testing, your existing website forms can work seamlessly with HubSpot, giving you a complete, centralized view of your leads and customer interactions.