Debutify Theme - Create Custom Contact Us Page

Highlighted
New Member
2 0 0

Hi, 

I am trying to add a hidden label to where the dropdown is showing. Essentially, how the "Name" is showing for the name column, "Email" is showing for the email column, I would like to have "What's Your Concern?" on the dropdown column itself so that a consumer clicks on the dropdown and selects from the given options such as "Product Details", "Shipping & Order Details" and so on. I was able to add this dropdown but I am not able to add "What's Your Concern?" to the dropdown column itself. Please see my code below for more details and an image of how my contact form looks like. Any help on my code would be greatly appreciated!

 

<!-- /templates/page.contact.liquid -->
<div class="grid">
  <div class="grid__item large--eight-twelfths push--large--two-twelfths">
 
    <div class="section-header">
      <h1 class="page-title">{{ page.title }}</h1>
    </div>
 
    {% unless page.content == blank %}
      <div class="rte">
        {{ page.content }}
      </div>
    {% endunless %}
 
    <div class="form-vertical">
      {% form 'contact' %}
 
        {% comment %}
          Successful message
        {% endcomment %}
        {% if form.posted_successfully? %}
          <p class="note form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}
 
        {{ form.errors | default_errors }}
 
        <div class="grid grid--small">
          <div class="grid__item large--one-half">
            <label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
            <input type="text" id="ContactFormName" class="input-full" name="contact[name]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}">
          </div>
 
          <div class="grid__item large--one-half">
            <label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
            <input type="email" id="ContactFormEmail" class="input-full" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
          </div>
        </div>
 
         
<label for="ContactFormCustomerConcern class="hidden-label">{{ 'contact.form.customerconcern’ | t }}</label>
<select id="ContactFormCustomerConcern” class="input-full" name="contact[Contact Form Customer Concern]” placeholder="{{ 'contact.form.customerconcern’ | t }}" {% if form.customerconcern %}{{ form.customerconcern}}{% elsif customer %}{{ customer.customerconcern}}{% endif %}">
        
        <option>Product Details</option>
        <option>Shipping and Order Details</option>
        <option>Exchanges and Returns</option>
        <option>General/Media/Business Inquiries</option>
        <option>Careers</option>
        <option>Other</option>
      
      
      </select>
 
        <label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
        <textarea rows="10" id="ContactFormMessage" class="input-full" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
 
        <div class="text-right">
          <button type="submit" class="btn btn--primary">
            {{ 'contact.form.send' | t }}   
          </button>
        </div>
 
      {% endform %}
    </div>
 
  </div>
</div>

 

 

Screen Shot 2020-09-14 at 8.37.06 PM.png

Thank You! 

0 Likes