How can we help?

When building forms in Framer, have you ever needed to send additional data along with form responses (like CMS fields, variables, or URL parameters)? You’re in luck, because FramerForms makes it easy with hidden fields!

You can find hidden fields in the FramerForms dashboard at the bottom. There are 4 types of hidden fields:

• Variable

• Referrer URL

• URL parameter

• Current URL

Let’s take a look at each hidden field type and how you can use them:

Variable

This type of hidden field allows you to send any kind of variable along with form responses. You can connect text, number, toggle, link, date, and color variables/fields to it.

The #1 use of variable fields is to include a CMS field. You could use it to add the title of the current CMS item if your form is on a CMS detail page, which enables you to distinguish between submissions on different pages.

Referrer URL

The page’s referrer URL is the URL of the website that the user navigated to your site from. For example, if someone clicked on a link on insertframe.io to your website, the referrer URL is “insertframe.io”. With this type of hidden field, you can include the referrer URL in 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 type adds the current page URL to form submissions as a separate field, which is useful if the same form is included on multiple pages.

Example use case: a contact form is in your website’s footer which is included on every page of the website. A hidden field for the current URL tells you which page each submission came from, even though they are the same form.

Editing hidden fields

When you copy and paste a hidden field component into your Framer project, the first thing you’ll notice is that it’s… not hidden! That’s intentional - in the editor hidden fields display as a rectangle with a label showing the type of hidden field so you’re able to find them easily. But when you preview your project or visit the live website, hidden fields are invisible.

Once you’ve added hidden fields and configured them to the data you need, fill out your form once to test that it was set up correctly. You should see the hidden field along with all other fields in the form submission!