Issue with the contact us form

Store Design
,

Topic summary

A Shopify contact form has input fields (name, email) that are visually hidden while the form structure remains visible, making it unusable. The issue appears to be CSS-related.

Proposed Solutions:

Two users suggested similar CSS fixes:

  • Add z-index: 1 !important; to #contact_form .input__field
  • One recommends placing this in base.css, the other in theme.css
  • Additional transform properties for .input__label states were mentioned but appear incomplete

Status: The thread remains open with no confirmation whether the suggested CSS fixes resolved the visibility issue.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have an issue with the Shopify Contact form, where the fields for name, email… disappeared but the stage remains except for the message, making the form useless. I think it’s a CSS issue, can you help?

https://hecandi.com/pages/contact-us

2

@celine79 - please add this css to the very end of your base.css file and check

#contact_form .input__field{z-index: 1 !important;}
3

Add this css in your Edit code > Theme.css File

#contact_form .input__field{
  z-index: 1 !important;
}
.input__field:focus-within~.input__label, .is-filled~.input__label {
    transform: scale(0.733) translateY(calc(-24px - -0.2em)) translate(3.665px) !important;
}