Formularios personalizados en Shopify

Ya sea que necesites crear nuevos campos, agregar clases o ID’s, tanto si es solo por poder darles algún estilo de CSS o agregar eventos en Google Analytics aquí te enseñare a “personalizar” un poco los formularios de esta poderosa herramienta.

En todos los casos las modificaciones las tendremos que hacer modificando el código del sitio, lo bueno es que esto lo puedes hacer desde el mismo panel de Shopify o utilizando la herramienta que la misma plataforma te ofrece para trabajar con los archivos desde local: Theme Kit, misma que quizá más adelante explicaré un poco, pero que puedes ir conociendo aquí: https://shopify.github.io/themekit/

Sin más, pasemos al tema, Shopify te permite agrega formularios en cualquier parte, solo debes agregar al código en la parte que lo requieras la sentencia {% form ‘EL FORMULARIO’ %} y cerrándola con {% endform %}, dentro de las cuales van los campos que necesitamos, tal como en cualquier html, es decir, un formulario simple podría verse como algo así:

  {% form 'customer' %}
    {% if form.posted_successfully? %}
      <p><em>{{ 'general.newsletter_form.success_text' | t }}</em></p>
    {% elsif form.errors %}
      {% for field in form.errors %}
        <p><em>{{ field }} - {{ form.errors.messages[field] }}</em></p>
      {% endfor %}
    {% endif %}

    <input class="newsletter-half first-name" type="text" name="contact[first_name]" placeholder="{{ 'general.newsletter_form.subscriber_first_name' | t }}" />
    <input class="newsletter-half last-name" type="text" name="contact[last_name]" placeholder="{{ 'general.newsletter_form.subscriber_last_name' | t }}" />

    <input type="email" class="contact_email" name="contact[email]" required placeholder="{{ 'general.newsletter_form.placeholder' | t }}" autocorrect="off" autocapitalize="off" />
    <input type='submit' class="action_button sign_up" value="{{ 'general.newsletter_form.submit' | t }}" />
  {% endform %}​

Donde vemos algunas etiquetas conocidas de HTML y otras del propio Shopify, concretamente del lenguaje que utiliza, que es liquid.

Hasta aquí, todo normal, vemos un primer IF que muestra un mensaje si el formulario fue enviado correctamente o en cambio, si se envió y se genero un error, pero, ¿que pasa si necesitamos otros campos además de los que el template crea? 

Agregar un campo

simple, dentro de las etiquetas de apertura y cierre del form podemos agregar el HTML que necesitemos, tanto DIV's, P's, y por supuesto, campos, por ejemplo, si necesitamos agregar un campo Select con varias opciones deberemos poner, donde lo deseemos dentro de las etiquetas del form, algo como esto:

<label for="ContactFormSabor">Selecciona un sabor</label>
<select id="ContactFormSabor" name="contact[Sabor]">
  <option>Chocolate</option>
  <option>Vainilla</option>
  <option>Fresa</option>
</select>​

Esto nos agregará el campo, que en el email se enviará con el nombre Sabor, es importante notar el atributo name que para este ejemplo dice contact[Sabor], debes notar que se debe incluir el texto contact[] y lo que esté entre las llaves será el nombre del campo con el que lo verás en la información enviada por tu contacto, si quieres saber más sobre los campos y como agregar más opciones puedes visitar la documentación de Shopify aquí: https://help.shopify.com/en/themes/customization/forms/add-fields-to-your-contact-form

Personalizar el tag FORM

Si lo que necesitamos es personalizar el tag <form> lo podemos hacer desde la etiqueta de liquid {% form %}, por ejemplo, si necesitamos agregarle una clase deberemos hacer algo como esto:

{% form 'customer', class: 'newsletter-form' %}​

Donde a nuestro formulario le agregamos la clase 'newsletter-form', de la misma forma podemos agregar más opciones, aunque te sugiero tener cuidado en las etiquetas que agregas, puedes agregar más opciones así:

{% form 'contact', class:'foo', action:'more-foo', data-type:'super-foo' %}​

Te sugiero leer la documentación del tag Form de Shopify para más información:

https://help.shopify.com/en/themes/liquid/tags/theme-tags#form

Conoce más sobre Shopify