SourceTag

Form Setup

Set up SourceTag with Webflow Forms

Webflow’s built-in form builder renders standard HTML forms, which makes adding hidden fields straightforward. You add hidden <input> elements using an Embed element placed inside the form, and SourceTag populates them with attribution data.

This guide covers Webflow’s native form builder. If you are using a third-party form tool embedded on a Webflow site (e.g. Typeform, JotForm), see the guide for that specific tool instead.

What you need

  • SourceTag installed on your Webflow site (via Project Settings > Custom Code, or in the page-level head code)
  • A page with a Webflow form

Step 1: Open the page in the Webflow Designer

Open the Webflow Designer and navigate to the page that has your form.

[IMAGE: Screenshot of Webflow Designer showing a form on the canvas]

Step 2: Add an Embed element inside the form

  1. In the Webflow Designer, click on your Form Block to select it
  2. Add an Embed element inside the form (press A to open the Add panel, then search for “Embed” or find it under Components)
  3. Place the Embed element inside the form block, before the submit button

The Embed element must sit inside the Form Block. If it is outside the form, the hidden inputs will not be submitted.

[IMAGE: Screenshot of Webflow Designer with an Embed element being placed inside a form]

Step 3: Paste the hidden input fields

Double-click the Embed element to open the code editor. Paste the following:

<!-- SourceTag core fields -->
<input type="hidden" name="st_fc_channel" value="">
<input type="hidden" name="st_fc_detail_1" value="">
<input type="hidden" name="st_fc_detail_2" value="">
<input type="hidden" name="st_fc_detail_3" value="">
<input type="hidden" name="st_fc_detail_4" value="">
<input type="hidden" name="st_lc_channel" value="">
<input type="hidden" name="st_lc_detail_1" value="">
<input type="hidden" name="st_lc_detail_2" value="">
<input type="hidden" name="st_lc_detail_3" value="">
<input type="hidden" name="st_lc_detail_4" value="">
<input type="hidden" name="st_fc_landing_page" value="">
<input type="hidden" name="st_lc_landing_page" value="">

If you have enabled extended field groups in your SourceTag dashboard, also add:

<!-- SourceTag optional fields -->
<input type="hidden" name="st_fc_click_id" value="">
<input type="hidden" name="st_lc_click_id" value="">
<input type="hidden" name="st_visits" value="">
<input type="hidden" name="st_days_to_convert" value="">
<input type="hidden" name="st_device" value="">

Remove any optional fields you do not need. Click Save & Close on the Embed editor.

[IMAGE: Screenshot of Webflow Embed element code editor with hidden inputs pasted]

Step 4: Publish and test

Publish your site. Then visit the page with UTM parameters:

?utm_source=test&utm_medium=cpc&utm_campaign=webflow-test

Submit the form. Check the form submission in your Webflow dashboard (under the form’s submissions tab), or in your email notification or connected integration. The hidden fields should contain your attribution data.

[IMAGE: Screenshot of Webflow form submission showing populated hidden fields]

Tips

  • Webflow form submissions include all fields, including hidden ones. They appear in the Webflow dashboard alongside your visible fields.
  • If you are sending form data to a third-party service (Zapier, Make, a webhook, etc.), the hidden field values are included in the payload automatically.
  • You can also use Webflow’s custom attributes feature on regular form fields to set them as hidden, but the Embed method shown here is simpler and more reliable.
  • If you have multiple forms on the same page, add the Embed element to each form block separately.
  • You can copy field names from the Fields page in your SourceTag dashboard (each name has a copy button).
  • Because Webflow forms are standard HTML, this is one of the most straightforward integrations.