Forms

Clickport automatically tracks form submissions across your site with zero configuration. Every time a visitor submits a form, the tracker records the event and associates it with the current page and session.

How form detection works

The tracker listens for native submit events on the document using event capturing. This means it intercepts form submissions at the top of the DOM tree before any other handlers run. When a <form> element fires a submit event, Clickport records the submission.

Because the tracker uses the browser's native submit event, it works with all standard HTML forms regardless of how they are built. Contact forms, newsletter signups, checkout forms, search boxes, and login forms are all captured automatically.

What triggers a form event

• A visitor clicks a submit button inside a <form>
• A visitor presses Enter inside a form field
• JavaScript calls form.submit() or dispatches a submit event

Form identification

When a form is submitted, Clickport identifies it using the form element's attributes. The tracker checks these in order of priority:

1. id attribute (highest priority). If the form has an id, that value is used as the form identifier.
2. name attribute. If there is no id but a name is present, the name is used instead.
3. Anonymous. If neither attribute exists, the form is tracked with an empty identifier. It still appears in your data, but you cannot distinguish it from other unnamed forms.

What data is captured

Each form submission event records the following data:

• Form identifier: the id or name of the form element
• Page URL: the page where the form was submitted
• Page visit ID: links the submission to a specific pageview within the session
• Session ID: associates the submission with the visitor's session
• Timestamp: when the submission occurred

Where forms appear on the dashboard

Form submissions appear in two places on your dashboard.

Session timeline

When you expand a session in the Sessions panel, form submissions appear inline in the page timeline. Each form event shows a green F badge next to the goal name, along with the form identifier.

Goals panel

Form submissions power the Form goal type. When you create a goal that tracks form submissions, completions appear in the Goals panel with visitor counts, submission counts, and conversion rates. You can filter goals by type to see only form-based goals.

Form submissions as goal conditions

To track specific form submissions as conversions, create a goal with the Form type. Form goals support four condition fields:

• Form Name: matches the name attribute of the form element
• Form ID: matches the id attribute of the form element
• Plugin: matches the form plugin identifier (for WordPress plugin forms)
• Page URL: matches the page path where the form was submitted

Each condition supports operators: equals, not equals, contains, not contains, starts with, ends with, is empty, and is not empty. You can combine multiple conditions with AND or OR logic.

When a form submission matches a goal's conditions, the session is marked as converted. The conversion counts toward your Conversions KPI and conversion rate.

Event delivery

Form submissions are sent using fetch with keepalive: true. This ensures the event is delivered reliably even when the form submission triggers a full page navigation. If fetch is not available, the tracker falls back to navigator.sendBeacon.

The event is sent as a fire-and-forget beacon. It does not block or delay the form submission in any way. Your visitors experience no added latency.

AJAX and SPA forms

Clickport's tracker listens for the native DOM submit event, which fires for both traditional form submissions and forms that use JavaScript to prevent the default behavior and submit via AJAX (XMLHttpRequest or fetch).

The tracker captures the submission when the submit event fires, before any preventDefault() call. This means AJAX forms, React forms, and other JavaScript-heavy form implementations are tracked automatically.

For single-page applications, the tracker also works across client-side route changes. Forms on dynamically rendered pages are captured the same way because the event listener is attached to the document root, not to individual form elements.

Best practices

Always name your forms

Add an id or name attribute to every form you want to track. This makes it easy to identify forms in your analytics data and set up goal conditions. Without an identifier, all unnamed forms are grouped together and cannot be distinguished.

Use descriptive identifiers

Choose form identifiers that clearly describe the form's purpose. Good examples:

• id="contact-form"
• id="newsletter-signup"
• id="checkout-billing"
• name="search"

Create goals for important forms

If a form submission represents a business conversion (like a contact request, demo signup, or purchase), create a goal for it. This lets you track conversion rates over time and see which traffic sources drive the most form completions.

Test form tracking

After adding or changing forms on your site, submit a test entry and check the Sessions panel to confirm the form event appears with the correct identifier.

Privacy

Form tracking in Clickport is designed with privacy as a core principle.

• No field values are captured. The tracker never reads or transmits the contents of any form field. Email addresses, passwords, names, phone numbers, and all other input data stay entirely in the browser.
• No cookies. Form events, like all Clickport events, are tracked without cookies or persistent identifiers.
• No consent banner required. Because no personal data is collected from form fields, form tracking does not require additional GDPR consent beyond what Clickport already provides. See Privacy Overview for details.