Liquid, JavaScript, themes, sales channels
Hi
Does anyone know how to format the text of the dropdown box --Select category-- so that it appears in the same format as the the remaining fields. Also how can I make the Select Category and Message fields required?
Here is the code I'm currently using:
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } {%- endstyle -%} <div class="color-{{ section.settings.color_scheme }} gradient"> <div class="contact page-width page-width--narrow section-{{ section.id }}-padding"> {%- if section.settings.heading != blank -%} <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2> {%- else -%} <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2> {%- endif -%} {%- form 'contact', id: 'ContactForm', class: 'isolate' -%} {%- if form.posted_successfully? -%} <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</h2> {%- elsif form.errors -%} <div class="form__message"> <h2 class="form-status caption-large text-body" 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 }}" required> <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }} <span aria-hidden="true">*</span> </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="contact__fields"> <div class="field"> <input class="field__input" type="text" id="ContactForm-order" name="contact[order]" value="" placeholder="Order Number"> <label class="field__label" for="ContactForm-order">Order Number</label> </div> <div class="field"> <select id="ContactForm-contact-concern" name="contact[customer concern]" class="select__select"> <option value="">--Select Category--</option> <option value="Order question">Order Question</option> <option value="Feedback">Feedback</option> <option value="Collaboration Request">Collaboration Request</option> <option value="Other">Other</option> </select> </div> </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 }}required" > {{- form.body -}} </textarea> <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }} <span aria-hidden="true">*</span> </label> </div> <div class="contact__button"> <button type="submit" class="button"> {{ 'templates.contact.form.send' | t }} </button> </div> {%- endform -%} </div> </div> {% schema %} { "name": "t:sections.contact-form.name", "tag": "section", "class": "section", "settings": [ { "type": "text", "id": "heading", "default": "Contact form", "label": "Heading" }, { "type": "select", "id": "heading_size", "options": [ { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" }, { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" }, { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" } ], "default": "h1", "label": "t:sections.all.heading_size.label" }, { "type": "select", "id": "color_scheme", "options": [ { "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" }, { "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" }, { "value": "background-1", "label": "t:sections.all.colors.background_1.label" }, { "value": "background-2", "label": "t:sections.all.colors.background_2.label" }, { "value": "inverse", "label": "t:sections.all.colors.inverse.label" } ], "default": "background-1", "label": "t:sections.all.colors.label" }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ], "presets": [ { "name": "t:sections.contact-form.presets.name" } ] } {% endschema %}
Anyone know if this is possible?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024