Cómo agregar un formulario de contacto a tu tienda Shopify

El servicio al cliente puede ser una de las partes más desafiantes de su negocio, pero sin clientes satisfechos, no tiene negocio. Por eso es vital hacer de la experiencia del cliente una de sus principales prioridades, y la forma en que sus clientes se comunican con usted es parte de esa experiencia.

Muchas empresas utilizan herramientas de asistencia técnica como Intercom o ZenDesk, pero eso puede ser más de lo que necesita en este momento.

Si tu tema de Shopify aún no tiene un formulario de contacto, o estás usando una herramienta de terceros como Typeform, Google Forms o Wufoo o quieres simplificar un poco las cosas, puedes crear tu propio formulario de contacto simple directamente en Shopify. .

Por el bien de este tutorial, voy a asumir que su tienda no tiene un formulario y, al final de este tutorial, tendrá algo que acepta información del cliente y se parece a esto:

Antes de comenzar: haga una copia de su tema

Inicie sesión en su panel de Shopify y vaya a Tienda en línea > Temas . Busque su tema en vivo y haga clic en el menú desplegable Acciones y haga clic en Duplicar .

Una vez que se duplique, haga clic en el menú Acciones nuevamente y haga clic en Editar código .

¡Construyamos un formulario de contacto!

Necesitaremos dos cosas para que nuestro formulario de contacto funcione: un nuevo archivo de plantilla para contener nuestro código y una nueva página en nuestra tienda.

Crear un nuevo archivo de plantilla

Ahora que ha aterrizado en el editor de código, mire hacia el lado izquierdo de la pantalla en su árbol de carpetas y haga clic y expanda Plantillas . Luego haga clic en el enlace Agregar una nueva plantilla .

Luego elija Página en el primer menú desplegable y llámelo Contacto . Luego presione el botón Crear plantilla .

Copie y pegue nuestro código

Aquí está todo el código que necesitamos para crear nuestro formulario de contacto.

Copie y pegue el siguiente bloque de código en su nuevo archivo y presione el botón Guardar .

<div class = “ancho de página” >
<div class = "cuadrícula" >
<div class = “grid__item medium-up – five-sexs medium-up – push-one-doceavo” >
<div class = “section-header text-center” >
<h1> {{page.title}} </h1>
</div>

{% si page.content.size> 0%}
<div class = "rte" >
{{ contenido de página }}
</div>
{% terminara si %}

<div class = "formulario de contacto vertical" >
{% - assign formId = 'ContactForm' -%}
{% formulario 'contacto', id: formId%}
{% incluyen 'form-status', form_id: formId%}

<div class = "cuadrícula cuadrícula – medias canaletas" >
<div class = "grid__item medium-up – one-half" >
<etiqueta para = “{{formId}} - nombre” > {{'contact.form.name' | t}} </label>
<input type = “text” id = “{{formId}} - name” name = “contact [name]” >
</div>
<div class = "grid__item medium-up – one-half" >
<etiqueta para = “{{formId}} - correo electrónico” > {{'contact.form.email' | t}} <span aria-hidden = "true" > * </span> </label>
<input required type = "email" id = "{{formId}} - email" name = "contact [email]" autocorrect = "off" autocapitalize = "off" aria-required = "true"
{% - si form.errors contiene 'correo electrónico' -%}
class = "entrada-error"
aria-invalid = "verdadero"
aria-describedby = "{{formId}} - error de correo electrónico"
{%- terminara si -%}
>
{% - si form.errors contiene 'correo electrónico' -%}
<span id = "{{formId}} - email-error" class = "input-error-message" >
<span class = “visualually-hidden” > {{'general.accessibility.error' | t}} </span>
{% include 'icon-error'%}
<span> {{form.errors.translated_fields ['email'] | capitalize}} {{form.errors.messages ['email']}}. </span>
</span>
{%- terminara si -%}
</div>
</div>

<label for = "{{formId}} - order" class = "hidden-label" > Número de pedido: </label>
<input type = "text" id = "{{formId}} - order" name = "contact [order]" placeholder = "# 1234" >

<etiqueta para = “{{formId}} - teléfono” > {{'contact.form.phone' | t}} </label>
<input type = “tel” id = “{{formId}} - phone” name = “contact [phone]” pattern = “[0-9 \ -] *” >

<etiqueta para = “{{formId}} - mensaje” > {{'contact.form.message' | t}} <span aria-hidden = "true" > * </span> </label>
<textarea required rows = “10” id = “{{formId}} - message” name = “contact [body]” > {% if form.body%} {{form.body}} {% endif%} </ textarea>

<tipo de entrada = "enviar" clase = "btn" valor = "{{'contact.form.submit' | t}} ” >

{% endform%}
</div>
</div>
</div>
</div>

Fragmento de validación

Nuestro formulario tiene una validación ligera que ayudará al usuario a saber si ha cometido un error al completar el formulario. Este código está en un archivo de fragmentos de líquido separado llamado form-status.liquid .

Vuelva a su editor de código de tema y haga clic y expanda Fragmentos . Luego, haga clic en Agregar un nuevo fragmento .

Nómbrelo estado de formulario y presione Crear fragmento .

Copie y pegue el código que se encuentra aquí en el nuevo fragmento y presione Guardar .

Crear una nueva página de contacto

A continuación, de vuelta en el administrador de Shopify, haga clic en Tienda en línea > Páginas .

Luego haga clic en el botón Agregar página en la parte superior derecha de su pantalla. Elija un título e ingrese una descripción (opcional). Luego, en la parte inferior derecha de la pantalla, haga clic en el menú desplegable debajo de Sufijo de plantilla y busque la nueva plantilla que acabamos de crear. Debería llamarse page.contact .

Ahora, esta nueva página usará el código que acabamos de pegar en nuestro nuevo archivo de plantilla. Entonces, si realiza cambios allí, solo se reflejará en las páginas que haya seleccionado para usar la plantilla page.contact . Una vez que esté satisfecho con el título y la descripción, haga clic en Guardar .

Ahora, puede obtener una vista previa de la página haciendo clic en Ver página en la parte superior.

¡Pero espera! ¿Qué significaba todo ese código?

Aprendamos un poco más sobre el código que usamos para que pueda realizar ediciones o cambios por su cuenta si lo necesita. Si desea descargar o marcar el código, creé un Gist aquí para que pueda copiarlo y pegarlo fácilmente.

El código puede parecer abrumador, pero una vez que mira más allá de todas las declaraciones if, clases y otros atributos, es bastante básico.

Los elementos principales que necesita un formulario para capturar y enviar datos correctamente son las etiquetas necesarias y los campos de entrada que aceptan los datos del formulario.

Eche un vistazo al código que captura el nombre del cliente:

<etiqueta para = “{{formId}} - nombre” > {{'contact.form.name' | t}} </label>
<input type = “text” id = “{{formId}} - name” name = “contact [name]” >

Requiere una etiqueta y un elemento de entrada . La etiqueta tiene un atributo for , que la asocia (o conecta) a un elemento de entrada coincidente que comparte la misma identificación .

El texto entre paréntesis es lo que verán sus clientes en la página de contacto. Parece {{'contact.form.name' | t}} porque usa una etiqueta dinámica que hace referencia a la configuración de idioma dentro de tu Shopify Admin.

Esta área del administrador puede ser nueva para ti, pero aquí es donde vive todo el texto que se puede editar dentro de Shopify. Algunas de las otras cosas que puede editar aquí son el título del pago o el texto en el botón "Pagar ahora".

Para editar la etiqueta de "nombre" de nuestro formulario de contacto, vaya a Configuración > Idiomas de la tienda > Cambiar idioma del tema .

Haga clic en Contacto en la navegación.

Ahora puede ver todos los campos que tiene acceso para usar dentro de nuestro formulario de contacto.

Envío de un correo electrónico de prueba

Regrese a su formulario de contacto en yourwebsite.com/pages/contact-us e intente enviar el formulario. Si tiene éxito, debería ver algo como esto en la pantalla.

Entonces debería recibir un correo electrónico con este aspecto:

Prima

¡Ahora ha creado con éxito un formulario de contacto nativo para su tienda que incluso tiene un campo adicional para el número de pedido! Al recopilar esto por adelantado, se ahorra la molestia y el tiempo de tener que solicitarlo más tarde. Esto es especialmente valioso para las tiendas con clientes habituales que tienen muchos pedidos y que podrían estar refiriéndose a más de uno.

Conclusión

Espero que este tutorial le haya resultado valioso. Solía ​​usar una de esas herramientas de terceros de las que hablé al principio para recopilar esta información y, si bien son excelentes, no están integradas en su tienda y cuestan dinero.