Skip to main content

Track UTMs in Squarespace Forms

Prerequisites

Capture UTM parameters in your native Squarespace form submissions, even when the visitor lands on one page and submits the form on another.

Before you start

  • ASquarespace Business plan or higherplan: on Squarespace. Code Injection (usedis inrequired, Step 1)which is not available on the PersonalCore, Plus and Advanced plans (and legacy Business/Commerce plans). It is not available on the Basic plan.
  • Your UTM Simple license key.

Step 1: Add hidden fields to your form

Edit your form block and add a Hidden field for each value you want to capture, named exactly:

  • utm_source
  • utm_medium
  • utm_campaign
  • utm_term
  • utm_content

Squarespace renames these automatically (for example utm_source becomes SQF_UTM_SOURCE). That's expected, and the genericscript in Step 2 accounts for it.

See What can I track with UTMSimple? for other values you can capture, such as gclid or fbclid.

Step 2: Add the script

Go to Settings → Developer Tools → Code Injection (on older sites: Settings → Advanced → Code Injection,) and addpaste the following script tointo the Header box:box. Replace <license key> with your license key, then save.

<script>
handl_custom_params=[];var handl_js=document.createElement("script");handl_js.setAttribute("src","https://track.utmsimple.com/utm.js?license=<license key>"),document.head.appendChild(handl_js),handl_js.onload=function(){
  var fields = ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"];
  var all = HandL.getAll(), url = new URL(window.location.href);
  fields.forEach(function (x) {
    if (all[x]) url.searchParams.set("SQF_" + x.toUpperCase(), all[x]);
  });
  history.replaceState(null, "", url.toString());
};
</script>

ReplaceIf <licenseyou key>added with your own UTM Simple license key, then save.

Step 2: Addextra hidden fields toin yourStep form

1

Squarespace(for formsexample don'tgclid), have a native "hidden field" option, so this is added per form block viaadd the form'ssame Custom HTML / embed option, or by using a Markdown/Code block placed right nextnames to the form containing:

<div style="display:none;">
  <input type="text" name="utm_source" id="utm_source">
  <input type="text" name="utm_medium" id="utm_medium">
  <input type="text" name="utm_campaign" id="utm_campaign">
</div>

The field namefields attributeslist must match our naming convention exactly — see What can I track with UTMSimple? forin the full list of fields you can capture.script.

Step 3: Test

it

  1. Open your pagesite with sometest UTMUTMs, parametersfor in the URL (e.g.example ?utm_source=test&utm_medium=test&utm_campaign=test),.
  2. Go to the page with your form (it can be a different page) and submit theit.
  3. form, and check that
  4. Check the submission includes(in theyour form's storage, such as email or Google Sheets). The UTM values.

    values
    should

    Note:appear Squarespace native forms submit via AJAX without a page reload, soin the hidden fieldsfields.

  5. need
to

Need alreadyhelp? beReach filledout invia beforechat theor visitorat clicks submit — the script fills them as soon as it loads, so this works as long as the script and fields are both present on the page.support@utmsimple.com.