How to add variant in page contact (VENTURE THEME)

Solved
JLbyone
Excursionist
187 17 41

Hi there guys! can i add something like this in my contact page

formcontactedit.jpg

 

and this my page contact custom file:

<div class="page-width">
  <h1 class="small--text-center">{{ page.title }}</h1>
  {% if page.content != blank %}
    <div class="content-block">
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  {% endif %}
  <div class="content-block">
    <div class="contact-form form-vertical">
      {% form 'contact' %}

        {% if form.posted_successfully? %}
          <p class="form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        {{ form.errors | default_errors }}

        <div class="grid grid--half-gutters">
          <div class="grid__item medium-up--one-half">
            <label>Nombre y Apellidos</label>
            <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
            <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder=" " value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-half">
            <label>Correo electronico</label>
            <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
            <input type="email" id="ContactFormEmail" name="contact[email]" placeholder=" " autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-hal">
            <label>Número de pedido</label>
            <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder=" " pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
          </div>
        </div>


        <label>Mensaje</label>
        <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
        <textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder=" ">{% if form.body %}{{ form.body }}{% endif %}</textarea>

        <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
      {% endform %}
    </div>
  </div>

  {% section 'featured-products-subsection' %}
</div>
0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Hi, add something in the lines of this:

<div class="checkbox__wrapper">
    <input type="checkbox" value="privacy" id="privacy" required>
    <label for="privacy">
        He leído y acepto la <a href="/privacy">política de privacidad</a> y <a href="/condiciones">condiciones de uso</a>
    </label>
</div>

Place this above the submit button:

<input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
JLbyone
Excursionist
187 17 41

Like a charm!! thanks so much 

0 Likes
PeanutButter
Shopify Partner
330 66 137

De nada amigo!

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
JLbyone
Excursionist
187 17 41

@PeanutButter veo que hablas español! muchisimas gracias por tu ayuda! igualmente creo que lo mejor es que continuemos exponiendo el contenido en ingles, ya que estamos en "EN community"

on my way to edit that page, i add some new element named "Asunto", and i want to put inside "Selecciona un asunto" but it starts with the first option. After that i want to show that message error when element is blank or not selected in that case ("Asunto")

 

this is my version:

contactedit2.jpg

and this is how i want to left it:

contactedit1.jpg

 

0 Likes
JLbyone
Excursionist
187 17 41
<div class="page-width">
  <h1 class="small--text-center">{{ page.title }}</h1>
  {% if page.content != blank %}
    <div class="content-block">
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  {% endif %}
  <div class="content-block">
    <div class="contact-form form-vertical">
      {% form 'contact' %}

        {% if form.posted_successfully? %}
          <p class="form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        {{ form.errors | default_errors }}

        <div class="grid grid--half-gutters">
          <div class="grid__item medium-up--one-half">
            <label>Nombre y Apellidos</label>
            <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
            <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder=" " value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-half">
            <label>Correo electronico</label>
            <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
            <input type="email" id="ContactFormEmail" name="contact[email]" placeholder=" " autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-hal">
            <label>Número de pedido</label>
            <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder=" " pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-hal">
            <label for="contact-concern">Asunto</label>
             <select id="contact-concern" name="contact[customer concern]" required>
               <option>COMPRAS Y PAGOS</option>
               <option>ENVIOS Y DEVOLUCIONES</option>
               <option>INFORMACIÓN DEL PRODUCTO</option>
               <option>ASISTENCIA TÉCNICA</option>
               <option>SERVICIO POSTVENTA</option>
               <option>PRIVACIDAD Y TÉRMINOS LEGALES</option>
               <option>PRENSA</option>
               <option>OTROS</option>
              </select>
          </div>
        </div>
        <label>Mensaje</label>
        <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
        <textarea rows="8" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder=" ">{% if form.body %}{{ form.body }}{% endif %}</textarea>
        <div class="checkbox__wrapper">
          <input type="checkbox" value="privacy" id="privacy" required>
          <label for="privacy">He leído y acepto la <a href="/pages/privacy-es">política de privacidad</a> y <a href="/pages/terminos-y-condiciones">condiciones de uso</a></label>
        </div>
      
        <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
      {% endform %}
    </div>
  </div>

  {% section 'featured-products-subsection' %}
</div>
0 Likes
PeanutButter
Shopify Partner
330 66 137

HI @JLbyone,

The following solution does not do exactly what your screenshot does, showing the red text error message below the field.  That would need javascript validation.

My solution uses the browser's native validation and the result is this:

Screen Shot 2021-01-28 at 09.13.07.png

The error message you see in english will appear in spanish if the user's browser language is set to ES

If this solution is ok with you, just replace your select field code with this:

             <select id="contact-concern" name="contact[customer concern]" required>
               <option value="">SELECCIONA UN ASUNTO</option>
               <option>COMPRAS Y PAGOS</option>
               <option>ENVIOS Y DEVOLUCIONES</option>
               <option>INFORMACIÓN DEL PRODUCTO</option>
               <option>ASISTENCIA TÉCNICA</option>
               <option>SERVICIO POSTVENTA</option>
               <option>PRIVACIDAD Y TÉRMINOS LEGALES</option>
               <option>PRENSA</option>
               <option>OTROS</option>
              </select>

 

As you can see, we just added the  <option value="">SELECCIONA UN ASUNTO</option> as a first option but with value set to empty

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Oh, and if you wanted to customize the validation message, you could do this:

             <select id="contact-concern" name="contact[customer concern]" required
             	oninvalid="this.setCustomValidity('Por favor, selecciona un asunto de la lista')"
  				oninput="this.setCustomValidity('')">
               <option value="">SELECCIONA UN ASUNTO</option>
               <option>COMPRAS Y PAGOS</option>
               <option>ENVIOS Y DEVOLUCIONES</option>
               <option>INFORMACIÓN DEL PRODUCTO</option>
               <option>ASISTENCIA TÉCNICA</option>
               <option>SERVICIO POSTVENTA</option>
               <option>PRIVACIDAD Y TÉRMINOS LEGALES</option>
               <option>PRENSA</option>
               <option>OTROS</option>
              </select>

This will result in:

Screen Shot 2021-01-28 at 09.28.45.png

As you can see I added the validation message in spanish, cause as it is a custom message, it will render as you define it.  If your store is multilingual, then you would have to use Shopify's translation keys filter.  Let me know if your site needs to render in several languages and I will guide you throw this. 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
JLbyone
Excursionist
187 17 41

Good morning! thanks so much, it worked really fine! but there is a possibility, to get "Selecciona un asunto" like a "placeholder" not like a one more option inside dropmenu

Just if its possible! working well right now! thanks boss!!!

0 Likes
JLbyone
Excursionist
187 17 41

@PeanutButter sorry boss, i forgot to add some fix  I would like the "EMAIL" field to be required as well

this is my final code:

<div class="page-width">
  <h1 class="small--text-center" style="text-align: center;">{{ page.title }}</h1>
  {% if page.content != blank %}
    <div class="content-block">
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  {% endif %}
  <div class="content-block">
    <div class="contact-form form-vertical">
      {% form 'contact' %}

        {% if form.posted_successfully? %}
          <p class="form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        {{ form.errors | default_errors }}

        <div class="grid grid--half-gutters">
          <div class="grid__item medium-up--one-half">
            <label>Nombre y Apellidos</label>
            <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
            <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder=" " value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-half">
            <label>Correo electronico</label>
            <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
            <input type="email" id="ContactFormEmail" name="contact[email]" placeholder=" " autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-hal">
            <label>Número de pedido</label>
            <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder=" " pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
          </div>
          <div class="grid__item medium-up--one-hal">
            <label for="contact-concern">Asunto</label>
            <select id="contact-concern" name="contact[customer concern]" required
             	oninvalid="this.setCustomValidity('Por favor, selecciona un asunto de la lista')"
  				oninput="this.setCustomValidity('')">
               <option value="">SELECCIONA UN ASUNTO</option>
               <option>COMPRAS Y PAGOS</option>
               <option>ENVIOS Y DEVOLUCIONES</option>
               <option>INFORMACIÓN DEL PRODUCTO</option>
               <option>ASISTENCIA TÉCNICA</option>
               <option>SERVICIO POSTVENTA</option>
               <option>PRIVACIDAD Y TÉRMINOS LEGALES</option>
               <option>PRENSA</option>
               <option>OTROS</option>
              </select>
          </div>
        </div>
        <label>Mensaje</label>
        <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
        <textarea rows="8" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder=" ">{% if form.body %}{{ form.body }}{% endif %}</textarea>
        <div class="checkbox__wrapper">
          <input type="checkbox" value="privacy" id="privacy" required>
          <label for="privacy">He leído y acepto la <a href="/pages/privacy-es">política de privacidad</a> y <a href="/pages/terminos-y-condiciones">condiciones de uso</a></label>
        </div>
      
        <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
      {% endform %}
    </div>
  </div>

  {% section 'featured-products-subsection' %}
</div>
0 Likes