What could be the problem with hiding a text field in Webflow using the <input class="hidden"> or <input type="hidden"> tags, as it is not working even after publishing?

TL;DR

Use Webflow’s native Hidden input type for form submissions, or manually create a class like "hidden" and set its display to "none" in the Designer.
Ensure changes are published, clear browser cache if needed, and use Embed elements if inserting custom HTML.

You're trying to hide a text field in Webflow using either class="hidden" or type="hidden", but it's not behaving as expected even after publishing. Here's what you need to know.

1. Difference Between `type="hidden"` and `class="hidden"`

type="hidden": This attribute correctly hides the input from the browser’s view. It won’t be rendered visibly on the page for users but still sends data when you submit a form.
class="hidden": This is just a CSS class and must be styled manually in Webflow (e.g., setting display: none). If no CSS is applied, it won't hide anything.

2. Issues Using `class="hidden"` Without Proper Styling

In Webflow, adding a class called hidden alone doesn't automatically hide the element.
You must create a class named "hidden" (or any name) and then set its display property to "none" in Webflow’s Designer.
Without this, the element remains visible on the page.

3. How to Properly Add `type="hidden"` Fields in Webflow

Go to your Form Block in the Designer.
Add a Form Input element.
Set the input's Type to "Hidden" via the Input Settings panel.
Do not use a visible text input and simply rely on CSS to hide it if you intend it to be a true hidden form field.

4. Why it's Not Working Even After Publishing

If you used class="hidden" but forgot to apply any "display: none" styling, the field would still be visible.
If you manually tried to insert raw HTML for a hidden input, Webflow may sanitize or modify it unless used in an Embed element.
If caching issues occur, sometimes old versions might display despite updates; clear browser cache or use incognito mode to test.

5. Solutions

Use Webflow’s native Hidden input field if you need the field for form submissions.
If using a custom class, make sure to define the 'hidden' class with Display: None styling.
Check Publishing: Ensure you clicked Publish to Selected Domains after making changes.

Summary

To hide a field correctly in Webflow, either set the input type to "hidden" via the Designer settings or, if using a CSS class like hidden, make sure the class explicitly sets display: none. Using just class="hidden" without CSS won't automatically hide anything.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I clear all items in the shopping cart on my Webflow site? Is there a way to clear the user's cache or use a button that reloads the page and empties the shopping cart?

Can the play, pause, and stop functions of a Lottie animation be controlled through JavaScript calls in Webflow?

Is anyone else experiencing an issue where the invite link in the Webflow dashboard for a client's site is not clickable?

Does Webflow support built-in read more/less expanding div functionality for use with the CMS? Specifically, I want to have Events with a limited description of 50 characters, and a read more link that reveals the rest of the text without the need for coding. Is this possible in Webflow?

Can I send the price of services to clients by email in Webflow and have a form on the website where clients can fill in the amount to pay and be redirected to the bank's payment gateway with the amount pre-filled?

Can Webflow create a map element on a Collection Page that shows multiple locations using latitude and longitude attributes stored in a CMS Collection?

What does "Domains have different publish dates. Republish all domains to enable single-item publish" mean in Webflow?

How can I fix the issue of blurry images on my Webflow website that are fine in the designer but blurry when published?

What are the limitations of shape dividers in Webflow compared to Elementor?

What options should I set in Webflow to make this text wrap to a new line and align the "5 videos ^" to the right?

How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.

Is there a way to update the image names on my Webflow website for SEO optimization, even if they have already been uploaded without renaming them? Are there any plugins available to help with this task?

Is there a reference or page that lists these .svg icons in Webflow? Is a membership required to access them? Is there anyone who can share icons like the example provided?

Why aren't my blog pages being indexed by Webflow?

What could be causing the scroll issue on my published Webflow website?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?

Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?

How can I close a dropdown in Webflow when clicking on a link?