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?

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 add class="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 named hidden in 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.