Contact Form - Text Entry Area Not Available

ForemostScott
Visitor
1 0 0

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 }}

<div class="contact page-width page-width--narrow spaced-section">
  <h2 class="title">{{ section.settings.heading | escape }}</h2>
  {%- form 'contact', id: 'ContactForm' -%}
    {%- if form.posted_successfully? -%}
      <div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
    {%- elsif form.errors -%}
      <div class="form__message">
        <h2 class="form-status caption-large" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
      </div>
      <ul class="form-status-list caption-large" role="list">
        <li>
          <a href="#ContactForm-email" class="link">
            {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
          </a>
        </li>
      </ul>
    {%- endif -%}
    <div class="contact__fields">
      <div class="field">
        <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
        <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
      </div>
      <div class="field field--with-error">
        <input
          autocomplete="email"
          type="email"
          id="ContactForm-email"
          class="field__input"
          name="contact[email]"
          spellcheck="false"
          autocapitalize="off"
          value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
          aria-required="true"
          {% if form.errors contains 'email' %}
            aria-invalid="true"
            aria-describedby="ContactForm-email-error"
          {% endif %}
          placeholder="{{ 'templates.contact.form.email' | t }}"
        >
        <label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
        {%- if form.errors contains 'email' -%}
          <small class="contact__field-error" id="ContactForm-email-error">
            <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
            <span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
          </small>
        {%- endif -%}
      </div>
    </div>
    <div class="field">
      <input type="tel" id="ContactForm-phone" class="field__input" autocomplete="tel" name="contact[{{ 'templates.contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" placeholder="{{ 'templates.contact.form.phone' | t }}">
      <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
    </div>
    <div class="field">
      <textarea
        rows="10"
        id="ContactForm-body"
        class="text-area field__input"
        name="contact[{{ 'templates.contact.form.comment' | t }}]"
        placeholder="{{ 'templates.contact.form.comment' | t }}"
      >
        {{- form.body -}}
      </textarea>
      <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
    </div>
    <div class="contact__button">
      <button type="submit" class="button">
        {{ 'templates.contact.form.send' | t }}
      </button>
    </div>
  {%- endform -%}
</div>

{% 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 %}

 

Replies 2 (2)

BSS-Commerce
Shopify Expert
3398 450 503

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:

view - 2023-01-13T132208.937.png

2. 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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

EasifyApps-Zoe
Shopify Partner
582 14 38

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 🤗.

 

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

EasifyAppsZoe_0-1696827942978.png

EasifyAppsZoe_1-1696828008470.png

EasifyAppsZoe_4-1696828123597.png

 

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.

EasifyAppsZoe_3-1696828052764.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support