Is there a way to add hidden values to a form in Webflow without having to manually edit the HTML after exporting it?

Published on
September 22, 2023

Yes, there is a way to add hidden values to a form in Webflow without manually editing the HTML after exporting it. Webflow provides a feature called "Custom attributes" that allows you to add additional attributes to form fields, including hidden values.

To add a hidden value to a form field in Webflow, follow these steps:

  1. Open your Webflow project and go to the Form section.
  2. Drag and drop a form field onto your form.
  3. Select the form field and go to the Settings panel on the right-hand side.
  4. Scroll down to the "Custom attributes" section.
  5. Click the "+" button to add a new custom attribute.
  6. In the "Attribute name" field, enter "type" (without the quotes).
  7. In the "Attribute value" field, enter "hidden" (without the quotes).
  8. Click outside the attribute input fields to save the custom attribute.

This will add a hidden input field to your form. You can then use other custom attributes to set the field's name and value as needed. To do this, follow these additional steps:

  1. Select the form field again.
  2. Add a new custom attribute with the "Attribute name" set to "name" and the "Attribute value" set to the desired name for the hidden field.
  3. Add another custom attribute with the "Attribute name" set to "value" and the "Attribute value" set to the desired value for the hidden field.

By using custom attributes in Webflow, you can easily add hidden values to your forms without having to manually edit the HTML after exporting it.

Example

Let's say you want to add a hidden field called "source" with the value "webflow" to your form. Here's how you would do it using custom attributes:

  1. Drag and drop a form field onto your form.
  2. Select the form field and go to the Settings panel.
  3. Scroll down to the "Custom attributes" section.
  4. Add a custom attribute with the "Attribute name" set to "type" and the "Attribute value" set to "hidden".
  5. Add another custom attribute with the "Attribute name" set to "name" and the "Attribute value" set to "source".
  6. Add a final custom attribute with the "Attribute name" set to "value" and the "Attribute value" set to "webflow".

Now, when the form is submitted, the hidden field "source" with the value "webflow" will be included.

Benefits of using hidden values in forms:

  • Gather additional information without displaying it to the user.
  • Pass data between pages or systems.
  • Track the source or origin of the form submission.
  • Customize form behavior based on hidden values.

Additional questions:

  • How can I use hidden values to track conversions in Webflow?
  • Can I dynamically set the value of a hidden field in Webflow?
  • What other types of custom attributes can I add to form fields in Webflow?