How to Pre-Populate GoHighLevel Form Fields: URL Parameters, Buttons, and JavaScript

Pre-populating form fields eliminates friction. When a visitor has already made a choice -- selected a service tier, clicked a specific offer, or arrived from a tagged link -- there is no reason to make them re-enter that information in a form. GoHighLevel supports several approaches for pre-filling form data, from simple URL parameters to JavaScript-driven dynamic values.

This guide covers the most practical methods agencies use to pre-populate GHL form fields, with working code examples for each.

Why Pre-Populate Form Fields?

Reducing the number of fields a visitor has to fill out manually increases conversion rates. But beyond convenience, pre-population is a strategic tool:

• Service or plan selection -- A visitor clicks "Get Started with Agency Unlimited" and the plan name is already filled in when the form opens.
• Referral source tracking -- A partner sends traffic with a referral code in the URL, and the code gets captured in a hidden field automatically.
• Multi-step funnels -- Information collected on one page gets passed forward to the next form via URL parameters.
• Personalized experiences -- Addressing a lead by name in a form or pre-selecting their industry based on the page they came from.
• Internal routing -- Passing a sales rep name or team identifier into a hidden field so the lead gets assigned correctly in the CRM.

Method 1: Pre-Populate via URL Parameters

The simplest and most common method. GoHighLevel forms automatically recognize URL parameters that match field names and fill in the corresponding values.

How It Works

If your form has a field named service_interest, you can pre-fill it by adding that parameter to the URL:

1https://yoursite.com/contact?service_interest=Website+Design
Copy

When the page loads, GHL reads the URL, finds service_interest=Website+Design, and fills in the matching field.

Step-by-Step Setup

1. Create your form in GHL with the fields you want to pre-populate.
2. Note the exact field names. In the form builder, each field has a name/key. Use that exact name as your URL parameter.
3. Build your URL with the parameters appended after a ? character. Separate multiple parameters with &.

Example with multiple pre-filled values:

1https://yoursite.com/booking?first_name=Sarah&company=Acme+Agency&plan=Growth+Plan
Copy

Practical Example: Service Tier Selection

Suppose you have a pricing page with three tiers. Each tier has its own CTA button linking to the same form, but with different URL parameters:

1Starter button  → /get-started?plan=Starter&price=97
2Growth button   → /get-started?plan=Growth&price=297
3Scale button    → /get-started?plan=Scale&price=497
Copy

Add a hidden or read-only field named plan to your form. When the visitor clicks a tier button and lands on the form page, the plan name is already filled in.

Tips for URL Parameter Pre-Population

• URL-encode special characters. Spaces become + or %20. Ampersands in values need %26.
• Field names are case-sensitive. `ServiceInterest` and `serviceinterest` are not the same.
• This works for both visible fields and hidden fields.
• For GHL funnel pages, append the parameters to the funnel step URL.

Method 2: Pre-Populate on Button Click with JavaScript

Sometimes the form is on the same page as the selection -- a popup form that opens when a button is clicked. In this case, URL parameters do not help because the page is not reloading. You need JavaScript to set the field value when the button is clicked.

Basic Example

This script maps specific buttons to values. When a button is clicked, it finds the target form field and sets its value.

1<script>
2  // Configuration
3  var fieldName = "service_tier";
4
5  var buttons = [
6    { selector: '#btn-starter', value: 'Starter Plan' },
7    { selector: '#btn-growth', value: 'Growth Plan' },
8    { selector: '#btn-scale', value: 'Scale Plan' }
9  ];
10
11  // Attach click handlers
12  buttons.forEach(function(btn) {
13    var el = document.querySelector(btn.selector);
14    if (el) {
15      el.addEventListener('click', function() {
16        // Find the form field by its data attribute
17        var field = document.querySelector("[data-vv-as='" + fieldName + "']");
18        if (field) {
19          // Set the value
20          field.value = btn.value;
21
22          // Trigger input event so GHL registers the change
23          field.dispatchEvent(new Event('input', { bubbles: true }));
24        }
25      });
26    }
27  });
28</script>
Copy

How to Find the Right Field Selector

GHL form fields use a data-vv-as attribute that corresponds to the field label. To confirm the exact attribute:

1. Open the page with the form in your browser.
2. Right-click the form field and choose Inspect (or open Developer Tools).
3. Look at the <input> element. You will see an attribute like data-vv-as="service_tier".
4. Use that value in your JavaScript selector.

Alternatively, you can target fields by their name attribute or a custom id if you have assigned one.

Making the Field Read-Only After Selection

If you want to prevent the visitor from changing the pre-filled value, disable the field after setting it:

1el.addEventListener('click', function() {
2  var field = document.querySelector("[data-vv-as='" + fieldName + "']");
3  if (field) {
4    field.value = btn.value;
5    field.setAttribute('readonly', true);
6    field.style.backgroundColor = '#f0f0f0';
7    field.dispatchEvent(new Event('input', { bubbles: true }));
8  }
9});
Copy

Method 3: Pre-Populate from Local Storage or Cookies

For multi-step flows where the visitor moves between pages, you can store values in local storage on one page and read them into the form on another.

Storing a Value

On the page where the visitor makes their selection:

1<script>
2  document.querySelectorAll('.plan-button').forEach(function(btn) {
3    btn.addEventListener('click', function() {
4      localStorage.setItem('selected_plan', this.dataset.plan);
5    });
6  });
7</script>
Copy

With buttons like:

1<button class="plan-button" data-plan="Starter">Choose Starter</button>
2<button class="plan-button" data-plan="Growth">Choose Growth</button>
3<button class="plan-button" data-plan="Scale">Choose Scale</button>
Copy

Reading the Value into the Form

On the form page, read from local storage and inject the value:

1<script>
2  document.addEventListener('DOMContentLoaded', function() {
3    var savedPlan = localStorage.getItem('selected_plan');
4    if (savedPlan) {
5      // Wait briefly for the GHL form to fully render
6      setTimeout(function() {
7        var field = document.querySelector("[data-vv-as='plan']");
8        if (field) {
9          field.value = savedPlan;
10          field.dispatchEvent(new Event('input', { bubbles: true }));
11        }
12      }, 1000);
13    }
14  });
15</script>
Copy

The setTimeout delay is important because GHL forms load asynchronously. Without it, the script might try to set the value before the form fields exist in the DOM.

Method 4: Pre-Populate Hidden Fields for Internal Routing

Hidden fields are especially useful for passing data that the visitor should not see or modify -- referral codes, campaign IDs, sales rep assignments, or A/B test variants.

Example: Referral Source Tracking

1<script>
2  document.addEventListener('DOMContentLoaded', function() {
3    setTimeout(function() {
4      var params = new URLSearchParams(window.location.search);
5
6      var mappings = {
7        'ref': 'referral_source',
8        'rep': 'assigned_rep',
9        'campaign_id': 'campaign_id'
10      };
11
12      Object.keys(mappings).forEach(function(paramName) {
13        var value = params.get(paramName);
14        if (value) {
15          var field = document.querySelector(
16            "[data-vv-as='" + mappings[paramName] + "']"
17          );
18          if (field) {
19            field.value = value;
20            field.dispatchEvent(new Event('input', { bubbles: true }));
21          }
22        }
23      });
24    }, 1000);
25  });
26</script>
Copy

With a URL like:

1https://yoursite.com/signup?ref=partner_abc&rep=John&campaign_id=camp_2026_q1
Copy

This fills three hidden fields automatically: the referral partner, the assigned rep, and the campaign identifier.

Method 5: Pre-Populate from the GHL Form Embed on External Sites

If you are embedding a GHL form on a non-GHL website using an iframe, you pass values through the iframe URL just like the URL parameter method:

1<iframe
2  src="https://link.msgsndr.com/widget/form/YOUR_FORM_ID?plan=Growth&source=partner_site"
3  style="width:100%;height:600px;border:none;"
4></iframe>
5<script src="https://link.msgsndr.com/js/form_embed.js"></script>
Copy

The parameters appended to the iframe src URL will be picked up by the form and used to fill matching fields.

For dynamic values, build the URL with JavaScript:

1var formId = 'YOUR_FORM_ID';
2var plan = 'Growth';
3var source = document.referrer || 'direct';
4
5var iframe = document.querySelector('#my-ghl-form');
6iframe.src = 'https://link.msgsndr.com/widget/form/' + formId +
7  '?plan=' + encodeURIComponent(plan) +
8  '&source=' + encodeURIComponent(source);
Copy

Troubleshooting

Field value does not persist after form submission:

• Make sure you are targeting the correct field. Inspect the form HTML to confirm the field name or data-vv-as attribute matches what your script uses.

The value appears briefly then disappears:

• GHL forms render asynchronously and may reset field values after initial page load. Increase the setTimeout delay or use a MutationObserver to wait for the form to finish rendering before setting values.

Dropdown or select fields are not filling:

• Dropdowns require setting both the underlying value and triggering a change event rather than an input event. The exact approach depends on whether GHL renders the dropdown as a native <select> or a custom component.

Values contain special characters:

• Always use encodeURIComponent() when building URLs with dynamic values. Decode on the receiving end if needed.

Wrapping Up

Pre-populating form fields is a small technical effort that pays off in smoother user experiences, higher conversion rates, and cleaner data in your CRM. Whether you are routing leads by service tier, tracking referral partners, or building multi-step funnels, the methods covered here -- URL parameters, button click handlers, local storage, and iframe URL injection -- cover the full range of scenarios agencies encounter with GoHighLevel forms.

Start with URL parameters for the simplest cases, and layer in JavaScript when you need dynamic or same-page behavior. The code examples above are ready to adapt to your specific forms and workflows.