Adding Hidden Fields to Webflow
Webflow’s default form building tools don’t give you an easy way to add hidden fields to your forms, but it is possible by placing an Embed element within the Form Block.
Here’s how to do it:
Step 1: Add an Embed element to your form
The first step is to add an Embed element to your form. The best place to do this is just above the Submit button and below the last input field in your form that your visitors will actually complete.
Step 2: Add code to your Embed element
The next step is to add hidden fields by entering the raw HTML code. This is essentially what Webflow’s form builder adds to your page anyway, it’s just you are adding it by writing out raw HTML as opposed to using Webflow drag and drop builder.
The code you need to add to your form element is:
<input type="hidden" class="form-item field hidden" id="attributer-channel" name="attributer-channel" value="[channel]"> <input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown1" name="attributer-channeldrilldown1" value="[channeldrilldown1]"> <input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown2" name="attributer-channeldrilldown2" value="[channeldrilldown2]"> <input type="hidden" class="form-item field hidden" id="attributer-channeldrilldown3" name="attributer-channeldrilldown3" value="[channeldrilldown3]"> <input type="hidden" class="form-item field hidden" id="attributer-landingpage" name="attributer-landingpage" value="[landingpage]"> <input type="hidden" class="form-item field hidden" id="attributer-landingpagegroup" name="attributer-landingpagegroup" value="[landingpagegroup]">
Simply copy and paste the code from above and enter it into the Embed block
Step 3: Publish your site and test
Finally, publish your site and then navigate to the page your form is on. Complete the form and submit it.
If it’s working correctly, you should see a form submission in Project Settings > Forms that looks something like this:
As you can see, the Channel & Landing Page data captured by Attributer is contained in the ‘attributer-channel’ and ‘attributer-landingpage’ fields.
You can now send that data over to your CRM however you normally would (I.e. via Zapier, CSV downloads, etc).
The Attributer information will also be sent with the standard ‘New form submission’ emails that Webflow sends.
Can't find the answer you need? Contact us!
Our team are available to answer any questions you have