Estás en: Inicio > Plantillas > Avanzado > Formularios de contacto Inicio

Formularios de contacto

3Sellers ofrece un sistema de formularios de contacto para permitir a los usuarios de nuestras páginas que contacten con nosotros.

La URL que procesa los formularios de contactos es "/store/go/sendcontact". Un ejemplo de formulario es el siguiente:

<form action="/store/go/sendcontact" method="POST">
</form>

La URL "/store/go/sendcontact" acepta los parámetros que queramos enviados mediante el método POST. Podemos enviar cualquier parámetro, por ejemplo:

<form action="/store/go/sendcontact" method="POST">
  <input type="text" name="Nombre" value="" />

  <input type="submit" value="Enviar" />
</form>

El formulario anterior envía el parámetro "Nombre" a la URL "/store/go/sendcontact".

Cuando el usuario rellena el formulario y lo envía, es redirigido a la misma página del formulario. En ese momento el mensaje de estado del envío del formulario queda guardado en el drop {{ notices_good }}, si el envío es satisfactorio, o en el drop {{ notices_bad }}, en caso de haber ocurrio un error.

Cuando 3Sellers recibe los parámetros los procesa y los envía por email a la dirección de correo electrónico que se haya indicado en sección "Mi cuenta" de la administación.

Creación de formularios

Existen 2 métodos de crear formularios de contacto. Puede hacerse o bien en un archivo de plantilla liquid o bien en una página de contenido.

Formulario en plantilla liquid

Para crear un formulario en un archivo liquid basta con crear un archivo desde el editor de plantilla, por ejemplo "contacto.liquid". De esta forma, accederemos a él a través de la URL "/page/contacto"

Ejemplo de formulario en plantilla liquid:

Archivo contacto.liquid
<h1>Contacta</h1>

{% if notices_good %}
  <p>{{ notices_good }}</p>
{% else %}}
  <p>{{ notices_bad }}</p>
{% endif %}}

<form action="/store/go/sendcontact" method="POST">
  <label for="name">Nombre</label>
  <input id="name" type="text" name="Nombre" value="" />

  <label for="email">E-mail</label>
  <input id="email" type="text" name="E-Mail" value="" />

  <input type="submit" value="Enviar" />
</form>

Formulario en página de contenido

Para crear un formulario en una página de contenido es necesario tener previamente un archivo liquid llamado page.liquid. Este es el archivo que se utiliza para mostrar todas las páginas de contenido.

Un ejemplo sencillo de este archivo es:

Archivo page.liquid
<h1>{{ page.title }}</h1>

<div>
  {{ page.content }}
</div>

Para crear el formulario como página de contenido hay que acceder a la sección "Páginas" de la administración y crear una nueva página.

A continuación acceder al editor HTML e insertar el formulario:

<form action="/store/go/sendcontact" method="POST">
  <p>
    <label for="name">Nombre</label>
    <input id="name" type="text" name="Nombre" value="" />
  </p>
  <p>
    <label for="email">E-mail</label>
    <input id="email" type="text" name="E-Mail" value="" />
  </p>

  <p><input type="submit" value="Enviar" /></p>
</form>

Ahora podemos cambiar al editor visualizar para terminar la página de contacto:

Para acceder al formulario de contacto basta con introducir la URL /pages/contacto.

Opciones avanzadas

Lo anterior describe el comportamiento básico de los formularios de contacto, sin embargo, 3Sellers ofrece las siguientes opciones avanzadas.

Campos requeridos

Es posible indicar a 3sellers qué campos son obligatorios. Esto se hace mediante el parámetro "required". Podemos enviar el parámetro required con el nombre de los campos obligatorios separados por comas.

<input type="hidden" name="required" value="campo1,Campo2" />
<input type="text" name="campo1" value="" />
<input type="text" name="Campo2" value="" />

El nombre de los campos en el atributo "value" debe coincidir con el valor del atributo "name" de los campos obligatorios.

Lo siguiente es un formulario de contacto con el campo "Nombre" y "Email" obligatorios:

<form action="/store/go/sendcontact" method="POST">
  <input type="hidden" name="required" value="Nombre,E-Mail" />

  <label for="name">Nombre</label>
  <input id="name" type="text" name="Nombre" value="" />

  <label for="phone">Telefono</label>
  <input id="phone" type="text" name="Telefono" value="" />

  <label for="email">E-mail</label>
  <input id="email" type="text" name="E-Mail" value="" />

  <input type="submit" value="Enviar" />
</form>

En caso de no rellenar todos los campos obligatorios, 3Sellers volverá a mostrar el formulario al usuario contiendo un mensaje en el drop {{ notices_bad }} y no se enviará el email de contacto.

Redirección

Cuando un formulario se envía correctamente, el usuario es redirigido de nuevo a la página del formulario para poder mostrar el mensaje de envío con exito.

Podemos redirigir al usuario a otra página mediante el parámetro especial "redirect_to".

<input type="hidden" name="redirect_to" value="/url-destino" />

Ejemplo de formulario:

<form action="/store/go/sendcontact" method="POST">
  <input type="hidden" name="redirect_to" value="/pages/gracias-por-contactar" />

  <label for="name">Nombre</label>
  <input id="name" type="text" name="Nombre" value="" />

  <label for="email">E-mail</label>
  <input id="email" type="text" name="E-Mail" value="" />

  <input type="submit" value="Enviar" />
</form>

Envío de ficheros

Es posible enviar ficheros adjuntos. 3Sellers detecta automáticamente los parámetros que contienen archivos y los adjunta al email de contacto. El HTML del formulario ha de ser correcto para que se envien los archivos.

Ejemplo de formulario:

<form action="/store/go/sendcontact" method="POST" enctype="multipart/form-data">
  <label for="name">Nombre</label>
  <input id="name" type="text" name="Nombre" value="" />

  <label for="email">E-mail</label>
  <input id="email" type="text" name="E-Mail" value="" />

  <label for="file1">Captura de pantalla</label>
  <input id="file1" type="file" name="Captura1" value="" />

  <label for="file2">Otro archivo</label>
  <input id="file2" type="file" name="Otro archivo" value="" />

  <input type="submit" value="Enviar" />
</form>
Estás en: Inicio > Plantillas > Avanzado > Formularios de contacto Inicio