Solved
Hi there guys! can i add something like this in my contact page
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>
@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:
and this is how i want to left it:
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:
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
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:
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.
