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">inside a form block via an Embed element for reliable hidden fields. - Do not rely on
class="hidden"unless you explicitly define styles likedisplay: none. - Ensure the hidden input is inside the form wrapper and verify it appears in the published site using browser DevTools.
If you're attempting to hide a text field in Webflow using <input class="hidden"> or <input type="hidden"> and it's not working after publishing, the issue typically stems from incorrect use of HTML overrides or misunderstanding Webflow's form behavior.
1. Misuse of <input class="hidden">
- In Webflow, adding a class named "hidden" does not automatically apply
display: noneunless you define that style yourself. - If you use custom code and add an input like
<input class="hidden">inside an Embed element, make sure the “hidden” class is actually styled to hide the element (e.g.,display: none). - Webflow may also strip or ignore some custom HTML in published sites if not placed correctly (e.g., in a valid Embed block inside the Designer or in a code embed using Site Settings > Custom Code).
2. Improper Use of type="hidden"
- If you want a hidden input to submit data through a form,
type="hidden"is correct and is the most reliable method. - However, Webflow forms do not support adding
type="hidden"inputs directly through the Designer UI. You must: - Use a HTML Embed element.
- Insert your hidden input, e.g.,
<input type="hidden" name="fieldName" value="yourValue">. - Ensure this is placed inside the form block so it’s properly submitted.
3. Form Block Placement Issues
- If your hidden input is placed outside the form element, it won’t be submitted.
- Always confirm that your
<input type="hidden">is located within the form wrapper in the DOM structure.
4. Conflicts with Webflow’s Auto-Cleaning
- Webflow may strip or ignore certain input types or attributes when placed incorrectly.
- Avoid using custom code in the Designer’s Settings → Custom Code for form inputs. These should go in Embed elements within the form, not in global header/footer code.
5. Input Not Visible in the Designer
- Webflow Designer won't render
type="hidden"inputs visually, but they will be published if placed correctly. - Use the published site’s browser inspector (DevTools) to verify if the input is there.
Summary
To hide inputs in Webflow reliably, use <input type="hidden"> inside an Embed element located within a form block. Avoid relying on a class="hidden" unless you've specifically defined a hidden style. Always verify the input is within the form and published correctly.