Product

Templates

Resources

Pricing

Support

Product

Templates

Resources

Pricing

Support

Framer Form Academy

Add Hidden Fields

Add Hidden Fields

Track where users come from, tag leads, or pass data silently behind the scenes. Hidden fields are your unfair advantage and they’re stupidly easy to add.

There are 4 types of hidden fields:

  • Variable

  • Referrer URL

  • URL parameter

  • Current URL

Variable

A variable hidden field allows you to send different types of data with your form responses, such as text, numbers, toggles, links, dates, and colors. A common use is to add a CMS field, like the title of the current CMS item, to help you distinguish between submissions from different pages.

Referrer URL

The referrer URL shows the last website a user visited before coming to yours. For example, if someone clicked a link from insertframe.io, that would be the referrer URL you can include in your form responses.

URL Parameter

A URL parameter is a part at the end of the URL after a ? symbol. For example, if the URL is “framerforms.com/?id=123&type=House”, the URL parameters are “id” and “type”, with values of “123” and “House”. This hidden field type passes the value of a specific URL parameter or nothing if it doesn’t exist in the page URL.

Current URL

This hidden field captures the current page's URL and adds it to form submissions. It is useful for forms on multiple pages, so you can see which page each submission comes from.

Editing hidden fields

When you add a hidden field to your Framer project, it will initially appear as a visible rectangle labelled with the type of hidden field. This helps you find it easily.

However, in the preview or live website, hidden fields are invisible. After you set up your hidden fields, fill out your form once to test that everything works correctly. You should see the hidden field included in the form submission.

GET STARTED WITH FRAMERFORMS

GET STARTED WITH FRAMERFORMS

Building custom forms in Framer has never been easier. Start today.