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
<input type="hidden">only for storing values, as it won't render visibly. - To visually hide a field, either define and style a
.hiddenclass in Webflow or set the element's Display to "None" using Webflow's Designer panel. - Avoid relying on custom HTML unless using Embed elements, as Webflow may strip or override unsupported code.
If hiding a text field using <input class="hidden"> or <input type="hidden"> isn’t working in Webflow after publishing, the issue usually lies in incorrect usage of HTML attributes or CSS conflicting with Webflow's default styles.
1. <input type="hidden"> Won’t Render Visibly by Design
- Inputs with
type="hidden"are not visible in the browser, and they won’t render any visible input fields. - If you expect to see the field but simply want it visually hidden, using
type="hidden"is not appropriate—it fully removes visual rendering.
2. <input class="hidden"> Relies on Correct CSS
- Webflow does not automatically assign CSS to
.hidden. If you addclass="hidden"without any matching custom style, it will have no visual effect. - If you're trying to hide an element with
class="hidden", you must define a class namedhiddenin Webflow and explicitly set its style (e.g., Display: None).
3. Use Webflow's Built-in Display Settings
- In the Webflow Designer, select the input element and set its Display setting to “None” under the Style panel.
- This approach ensures Webflow applies the appropriate style and prevents publishing issues due to incorrectly defined or unsupported HTML/CSS.
4. Webflow May Clean or Override Custom Code
- Webflow may strip or override custom HTML tags or attributes if they’re placed outside of Embed blocks or are improperly formatted.
- If you're directly adding
<input type="hidden">in a text field or in a way Webflow doesn’t expect, it could break or be ignored on publish.
5. Alternative: Use "Custom Attributes"
- If you need a hidden input for form submission, use Webflow’s form element, then:
- Add any "Name" to the field.
- Set Display: None via the Style panel to hide it visually.
- Alternatively, set Type: Hidden using custom code or an Embed if it’s not available in UI.
Summary
Using <input type="hidden"> won’t display a field, so it’s only for storing hidden values. Using <input class="hidden"> requires a properly defined CSS class, which Webflow won’t automatically handle. Instead, use Webflow’s Display: None setting in the Designer or properly styled classes to hide elements.