The Ultimate Guide to Pre-Populating GoHighLevel Form Fields

In the GoHighLevel (GHL) ecosystem, pre-populating form fields (also known as pre-filling or autofilling) is a critical technique for reducing friction and increasing conversion rates. Pre-populating form fields prevents visitors from re-entering information when they have already made a choice—such as selecting a service tier, clicking a personalized email link, or arriving from a partner site.

This comprehensive guide covers everything from native GHL features to advanced JavaScript methods to streamline the form-filling experience.

1. Why Pre-Populate Form Fields?

Pre-populating form fields acts as a strategic conversion tool rather than just a convenience by reducing manual entry.

• Higher Conversion Rates: Pre-populating forms lowers the barrier to entry, significantly increasing the likelihood of submission.
• Improved Data Accuracy: Pre-filling eliminates typos in critical fields like email addresses, phone numbers, or referral codes.
• Service & Plan Selection: Pre-populating automatically fills in a "Plan Name" or "Price" when a user clicks a specific pricing tier on a previous page.
• Referral & Internal Tracking: Hidden fields capture partner referral codes or assign sales reps without exposing internal data to the user.
• Personalized Experiences: Pre-populating provides a tailored experience by addressing a lead by name within the form or pre-selecting their industry based on their journey.

2. Method 1: Using URL Query Parameters (The Core Method)

Appending query strings to the URL is the most common method to pre-populate GHL form fields. GoHighLevel automatically scans the URL upon loading and injects matching data into the form fields.

The Anatomy of a Pre-Populated URL

A query string starts with a ? and connects key-value pairs with &.

https://your-funnel-link.com/page?field_key=value&field_key2=value2

Step-by-Step Implementation

1. Identify the Field "Unique Key": Locate the Unique Key in the right-hand sidebar after clicking a field in the GHL Form Builder.
2. Construct the URL: Start with your base URL, add a ?, and then the key-value pair (e.g., ?first_name=John).
3. URL Encoding: Form URLs require encoding for spaces or special characters, using %20 or + for spaces and %26 for ampersands.

Common GoHighLevel Field Reference

Standard contact fields follow a predictable pattern. Use this table as a quick guide for URL parameter keys:

Practical Example (Pricing Tiers):

Link three CTA buttons on a pricing page as follows:

• Starter: /get-started?plan=Starter&price=97
• Growth: /get-started?plan=Growth&price=297
• Scale: /get-started?plan=Scale&price=497

3. Method 2: Handling Custom & Hidden Fields

Pre-populating custom and hidden fields is vital for internal routing and lead attribution.

1. Locate the Key: Navigate to the GoHighLevel CRM Settings > Custom Fields to find the specific "Field Key" (e.g., contact.favorite_color).
2. Refine for the URL: If the full key (contact.key) fails in the URL, try removing the contact. prefix.
3. Hidden Fields: Pass tracking data using the same URL parameter logic (e.g., ?source=facebook_ads&rep=John) by adding a field to your form and setting visibility to "Hidden."

4. Method 3: External Site Iframe Embeds

The iframe acts as an isolated window, so URL parameters on the parent page do not automatically pass to the iframe when embedding a GHL form on an external site (WordPress, Webflow, etc.).

• Static Implementation: Append parameters directly to the iframe src: <iframe src="https://link.msgsndr.com/widget/form/ID?email=test@test.com"></iframe>
• Dynamic Implementation: Use JavaScript on the parent page to "read" the browser's URL and inject those parameters into the iframe src dynamically.

5. Method 4: Enabling "Sticky Contact"

GoHighLevel features a native toggle called Sticky Contact. This feature uses browser cookies to remember a user's information from previous interactions within your GHL funnels.

• How to Enable: Go to Settings > Toggle on "Sticky Contact" in the Form Builder.
• Best Use Case: Sticky Contact is ideal for multi-step funnels. For example, capturing an email on Page 1 (Lead Magnet) automatically pre-populates that email on Page 2 (Booking Page or Survey).

6. Method 5: Advanced Pre-population via JavaScript

Advanced pre-population requires JavaScript for complex scenarios—like popup forms that don't trigger a page reload or data that must persist across multiple sessions.

A. Pre-Populate on Button Click (Same-Page/Popups)

URL parameters won't work if your form is in a popup because the page doesn't reload. Use this script to map button clicks to form values.

1document.querySelectorAll('.plan-button').forEach(button => {
2    button.addEventListener('click', function() {
3        const planValue = this.getAttribute('data-plan'); // e.g., "Growth Plan"
4
5        // GHL fields often use the data-vv-as attribute (the field label)
6        const field = document.querySelector("input[data-vv-as='plan_name']");
7
8        if (field) {
9            field.value = planValue;
10            // Trigger 'input' event so GHL registers the change in the CRM
11            field.dispatchEvent(new Event('input', { bubbles: true }));
12        }
13    });
14});
Copy

B. Using Local Storage for Multi-Step Flows

Local storage saves a selection on one page and "reads" it into a form on a subsequent page.

Step 1: Storing the value (Page 1)

1localStorage.setItem('selected_tier', 'Premium');
Copy

Step 2: Reading the value (Page 2)

1document.addEventListener('DOMContentLoaded', function() {
2    setTimeout(function() {
3        const savedValue = localStorage.getItem('selected_tier');
4        const field = document.querySelector("input[data-vv-as='tier']");
5        if (field && savedValue) {
6            field.value = savedValue;
7            field.dispatchEvent(new Event('input', { bubbles: true }));
8        }
9    }, 1000); // 1-second timeout allows GHL form to load asynchronously
10});
Copy

7. Troubleshooting & Best Practices

• Asynchronous Loading: GHL forms load via scripts. JavaScript won't find the fields if it runs too fast, so always use a setTimeout (usually 1000ms) or a MutationObserver.
• Exact Key Matches: GHL field keys are case-sensitive. service_interest is not the same as Service_Interest.
• Field Labels vs. Keys: The data-vv-as attribute in the DOM (browser inspector) is often the most reliable way to target GHL fields via JavaScript.
• Dropdowns & Selects: These fields often require a change event instead of an input event to register the selection in the CRM.
• Security: Never pass sensitive data (like passwords or SSNs) through URL parameters.

8. Frequently Asked Questions (FAQ)

Can I make a pre-populated field read-only?

Yes. Use JavaScript to target the field and add the attribute: field.setAttribute('readonly', true); This attribute prevents users from changing an assigned plan or referral code.

Does this work for GoHighLevel Surveys?

Yes. The principles for URL parameters and field keys are identical for GoHighLevel Surveys. However, only fields on the first slide of the survey visibly show the pre-filled data.

Can I pre-populate checkboxes or radio buttons?

Yes, passing the exact value of the option in the URL pre-populates checkboxes or radio buttons. However, selecting multiple checkboxes via URL is not natively supported and requires custom JavaScript logic to loop through and check the correct boxes.

What if the value appears then disappears?

This disappearance usually happens because GHL's internal scripts re-rendered the form after your script ran. Increasing the setTimeout delay usually fixes this issue.