¿Cómo publicar y personalizar un formulario de contacto en Shopify?

pagina-contacto-formulario-shopify-11
Tweet about this on Twitter0Share on Facebook0Share on Google+1Share on LinkedIn0Pin on Pinterest0

Nos encontramos creando las páginas para nuestra tienda Online Shopify, y una de ellas que no debe faltar es la página de contacto donde el usuario, además de encontrar quizás los datos de contacto, espera ver un formulario con el que poder solicitar información, sugerencia o cualquier cosa que necesite hacernos saber.

Para ello vamos a la sección de administración de páginas:

pagina-contacto-formulario-shopify-01

 

Añadimos una nueva página o editamos si ya la teníamos creada:

pagina-contacto-formulario-shopify-02

 

Incluimos el contenido que queramos que aparezca y seleccionamos la plantilla “page.contact” en el menú desplegable de la columna lateral derecha:

 

pagina-contacto-formulario-shopify-02b

Con esta plantilla, Shopify hará que aparezca al final de la página un formulario de contacto:

pagina-contacto-formulario-shopify-03

 

¿A qué dirección de email se enviará el formulario?

Se enviará a la dirección de email que pusimos como contacto en el apartado Settings > General > Store Details:

pagina-contacto-formulario-shopify-05

 

Quiero añadir más campos o editar el formulario de Contacto

 

Bien, para modificar el formulario de contacto que viene por defecto en la plantilla, podemos tocarlo mediante código HTML si se nos da bien o si no tenemos una opción más sencilla que es la de descargar una App gratuita adecuada a ello, concretamente POWr Form Builder.

Editar HTML

Para tocarlo en HTML en primer lugar accedemos a la sección Online Store > Themes y clicamos en “Edit HTML/CSS”:

pagina-contacto-formulario-shopify-06

 

Buscamos y clicamos en la plantilla page.contact.liquid:

pagina-contacto-formulario-shopify-07

 

Veremos el código que forma el Formulario de contacto:

pagina-contacto-formulario-shopify-08

 

Aquí ya podremos editar el formulario. Para más información podéis consultar en: https://help.shopify.com/themes/customization/communication/add-fields-to-your-contact-form

 

Descargar App POWr Form Builder

Accedemos a Apps y clicamos en Visit Shopify App Store:

pagina-contacto-formulario-shopify-09

 

Y en la App Store buscamos POWr Form Builder:

pagina-contacto-formulario-shopify-10

 

Clicamos en Get

pagina-contacto-formulario-shopify-11

 

Y luego en Install App:

pagina-contacto-formulario-shopify-12

 

Una vez instalada nos mostrará directamente el formulario a editar y configurar:

pagina-contacto-formulario-shopify-13

 

El primer campo a rellenar es para indicar el título del formulario y posteriormente nos encontramos con el campo para detallar el email donde enviar los formularios de contacto que se cumplimenten:

pagina-contacto-formulario-shopify-14

 

Ahora tan sólo tenemos que incluir los campos con los datos que queramos solicitar al cliente:

pagina-contacto-formulario-shopify-15

pagina-contacto-formulario-shopify-16

 

También nos permite decidir qué campos son obligatorios y cuales no lo son.

pagina-contacto-formulario-shopify-17

 

Si hacemos clic en Next, podremos ir viendo el resto de configuraciones que nos permite hacer la App:

pagina-contacto-formulario-shopify-18

 

Una vez finalizado nos pedirá que le asignemos un nombre y deberemos seleccionar el plan gratuito:

pagina-contacto-formulario-shopify-19

 

Copiamos el código y lo insertamos en la página que queramos incluirlo.

pagina-contacto-formulario-shopify-20

 

Recordad que si habéis seleccionado la plantilla page.contact en la página de contacto y queremos sustituir el formulario que viene por defecto en la plantilla contact por este nuevo, deberemos volver a cambiar la plantilla a page:

pagina-contacto-formulario-shopify-21

 

Y pegamos el código y publicamos/actualizamos la página:

pagina-contacto-formulario-shopify-22

 

Ahora podremos visualizar online el formulario que hemos creado e insertado en la página que hemos creado con Shopify.

 

Tweet about this on Twitter0Share on Facebook0Share on Google+1Share on LinkedIn0Pin on Pinterest0
<< Post Anterior

Leave A Response

* Denotes Required Field