Contact Form - Text Entry Area Not Available

Topic summary

A user is experiencing an issue where the text input area on their contact form works on desktop but not on mobile devices. They shared a link to the affected page and included CSS code from their contact form section.

Proposed Solutions:

CSS Fix (BSS-Commerce):

  • The problem stems from hidden code in section-contact-form.css that hides the ContactForm-body on mobile
  • Two solutions offered:
    1. Navigate to Shopify admin → Themes → Edit code, find the file and locate the media query @media(max-width: 756px) that sets #ContactForm-body { display: none; }, then change “none” to “block”
    2. Add #ContactForm-body { display: block !important; } at the end of the CSS file

Alternative Approach (EasifyApps-Zoe):

  • Suggested using the Easify Product Options app (free plan available) as an alternative to the contact form
  • Allows customers to add custom text fields directly on product pages without coding
  • Includes a Font Picker feature so customers can preview their engraving in different styles
  • Provided demo screenshots showing how to set up engraving options

The discussion remains open with no confirmation of which solution was implemented.

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

Hi, I’m having an issue getting the text input area on the mobile side of our theme to work. It works perfect on a desktop though. It wouldn’t allow me to attach a picture so here’s a direct link to the contact page for your phone.

https://mtrdefense.com/pages/custom-engraving

Can anyone please help me get this sorted out? Thank you in advance.

{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}

  ## {{ section.settings.heading | escape }}
  {%- form 'contact', id: 'ContactForm' -%}
    {%- if form.posted_successfully? -%}
      {% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}

    {%- elsif form.errors -%}
      
        ## {% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}
      

      
        - {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
          
        
      

    {%- endif -%}
    
      

        
        
      

      
        
        
        {%- if form.errors contains 'email' -%}
          <small>
            {{ 'accessibility.error' | t }}
            {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
          </small>
        {%- endif -%}
      

    

    
      
      
    

    
      
      
    

    
      
    

  {%- endform -%}

{% schema %}
{
  "name": "t:sections.contact-form.name",
  "tag": "section",
  "class": "spaced-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Contact form",
      "label": "Heading"
    }
  ],
  "presets": [
    {
      "name": "t:sections.contact-form.presets.name"
    }
  ]
}
{% endschema %}

Hi @ForemostScott

We checked and saw that in the file section-contact-form.css, there is a hidden code for ContactForm-body. To fix this problem, you can do the following:

  1. From Shopify admin → Themes → Edit code:

  1. Then you find the file section-contact-form.css and add the following code at the end of the file:
#ContactForm-body {
   display: block !important;
}

Or you can find the following code in that file and change “none” to “block”:

@media (max-width: 756px)
#ContactForm-body {
    display: none;
}

I hope that this can help you solve the issue.

Hi @ForemostScott ,

I recommend exploring an alternative approach to offer custom engraving services for your products. The Easify Product Options app (with a free plan available) is an excellent tool for this purpose. It allows you to effortlessly integrate custom text fields directly onto your product pages, no coding required. This way, customers can easily select engraving options and provide their desired text without navigating to other pages, streamlining the purchasing process :hugs: .

I’ve put together a quick demo of how to set up engraving options using the app below:

In addition to text fields, you can also implement the Font Picker option. This feature enables customers to choose their preferred engraving font and preview their text in the selected style.