Skip to main content
All CollectionsGet StartedGet Started
Guide to Finding the querySelector for Email Input Fields
Guide to Finding the querySelector for Email Input Fields

Connecting your forms to Source

Updated over 5 months ago

This guide provides detailed instructions for identifying the querySelector for email input fields on your website. The querySelector is crucial for our tracking pixel to accurately monitor user interactions across your site's pages.

Table of Contents

  1. Introduction

  2. Prerequisites

  3. Step-by-Step Guide

    • Accessing the Web Page

    • Using Browser Developer Tools

    • Identifying the Email Input Field

    • Options for Finding the querySelector

  4. Common Issues and Troubleshooting

Introduction

To track user interactions with email input fields, we need to identify the correct querySelector for each field. This involves using browser developer tools to locate the precise selector that corresponds to the email input field.

Prerequisites

Before you start, ensure you have the following:

  • Access to your website.

  • Google Chrome browser (recommended for its Developer Tools).

  • Basic understanding of HTML and CSS (optional but beneficial).

Step-by-Step Guide

Accessing the Web Page

  1. Open Google Chrome.

  2. Navigate to the web page containing the email input field you want to track.

Using Browser Developer Tools

  1. Right-click on the page and select Inspect, or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open the Developer Tools.

Identifying the Email Input Field

  1. In the Developer Tools, use the Elements tab to inspect the HTML structure of the page.

  2. Locate the email input field. You can do this by hovering over elements in the Elements tab until you see the email input field highlighted on the page.

Options for Finding the querySelector

Using ID (the best approach)

If the email input field has a unique id attribute, you can use it directly as the querySelector.

document.querySelector('#emailInputID')

Using Class

If the email input field has a class attribute, you can use the class as the querySelector. Note that if multiple elements share the same class, you might need to make the selector more specific.

document.querySelector('.emailInputClass')

Using Attribute Selectors

If the email input field has specific attributes, you can use attribute selectors. This is useful for fields identified by type, name, or other attributes.

document.querySelector('input[type="email"]') document.querySelector('input[name="email"]')

Using Hierarchical Selectors

If the email input field is within a specific section or nested within other elements, you can use hierarchical selectors to pinpoint it.

document.querySelector('form#signupForm input[type="email"]') document.querySelector('div.registration-container input.emailInputClass')

Using Selector Copy (not recommended)

Once the email input field is highlighted, right-click on the HTML element and select Copy > Copy selector. This will copy the CSS selector for the email input field to your clipboard.

this approach is not recommended because it is prone to break with any change that’s made to your websites html, but if you are not able to do any of the ones above feel free to use this one, just keep in mind you might have to update your querySelectors a lot more

Testing the querySelector

  1. To ensure the copied querySelector is correct, go to the Console tab in the Developer Tools.

  2. Type document.querySelectorAll('PASTE_SELECTOR_HERE') and press Enter. Replace PASTE_SELECTOR_HERE with the selector you copied or constructed.

  3. If the correct element is selected the NodeList [...] will appear like in the image below. If NodeList(x) appears where x is a number bigger than 1 than it means multiple nodes where found for the same selector, if this happens then you have to be more specific with the querySelector. In the image below you see what you should expect (disregard the body and the array content)

Common Issues and Troubleshooting

  • Multiple Matches: If your querySelector matches multiple elements, you may need to refine it by adding more specific attributes (e.g., input[type="email"]#uniqueID).

  • Dynamic Content: If the email input field is loaded dynamically (e.g., via JavaScript), ensure the field is present in the DOM when you copy the selector.

    Identifying Email Input Fields for Tracking - Watch Video

Did this answer your question?