Formularios de WordPress

Antes de elaborar y publicar un formulario es necesario conocer qué datos podemos recopilar.

WordPress de EducaMadrid incluye una herramienta para la creación de formularios que permiten a los usuarios entrar en contacto con el centro educativo y enviar un mensaje para ser contactados después.

Para acceder a la herramienta, pulsaremos sobre la opción Contactos que encontraremos en el menú izquierdo del escritorio de WordPress. Si acercamos el ratón sin pulsar, se nos desplegará un submenú que nos permitirá acceder a todos los formularios ("Formularios de contacto") o crear un formulario nuevo ("Añadir nuevo").

Configurar un formulario

Seleccionamos "Contacto" -> "Añadir nuevo" para crear nuestro formulario y añadimos un título al formulario. Por ejemplo, "Formulario de contacto".

Para configurar el formulario de acuerdo a nuestras necesidades, tendremos que personalizar las siguientes pestañas:

"Formulario": en esta pestaña es donde tendremos que incorporar los campos que compondrán nuestro formulario y que tendrán que rellenar los usuarios.
"Correo": definimos la dirección de correo donde recibiremos todas las respuestas de las personas que rellenen el formulario. Además también podemos personalizar el orden en el que queremos que se presente los datos recibidos.
"Mensajes": personalizamos si lo deseamos, los mensajes que el usuario visualizará en nuestra página cuando cumplimente el formulario, si hay algún error al rellenar el formulario si se ha enviado correctamente,...

Formulario

Al crear un nuevo formulario, WordPress nos ofrece una plantilla que incluye una serie de campos que podemos eliminar o modificar. Estos campos son:

"Tu nombre".
"Tu correo electrónico".
"Asunto".
"Tu mensaje (opcional)".
"Captcha" (una medida de seguridad para completar la autenticación del usuario).

Para construir nuestro formulario podemos incorporar distintos campos que aparecen en la parte superior.

Para añadir un campo, en el área de texto destinado para ello, tendremos que hacer lo siguiente:

Introducir la etiqueta <label>
Introducir el texto que verá el usuario al rellenar el formulario, es decir, el nombre del campo.
Añadir el campo y configurarlo.
Cerrar la etiqueta </label>

Es decir, cada uno de los campos que incorporemos debe tener esta estructura.

<label> NombreDelCampo [text* your-name] </label>

Vemos con un ejemplo como debemos hacerlo. Una vez abierta la etiqueta <label>(1) e introducido el texto que se verá en el formulario (2), seleccionamos el tipo de campo de nuestro interés. En este caso vamos a seleccionar el campo "texto" (3).

Configuramos el campo según nuestros intereses. En este caso, solo vamos a indicar que el campo sea obligatorio (4) y pulsamos sobre "Insertar" (5).

Cada tipo de campo (área de texto, número, teléfono, menú desplegable,...) tiene opciones diferentes.

Para que visualmente un usuario que esté rellenando el formulario conozca los campos que son obligatorios es aconsejable poner un asterisco (*) en aquellos que lo sean.

El campo queda añadido. Cerramos la etiqueta con </label> (6).

Iremos añadiendo los campos de nuestro formulario de uno en uno hasta que lo hayamos completado. Una vez hayamos incorporado pulsamos sobre "Guardar" que aparece en la parte superior derecha de la pantalla.

Podemos guardar el formulario, incluso sin terminar, pulsando en "Guardar" que aparece en la parte superior derecha.

Trucos

Incorporar ejemplos

Para que a los usuarios que quieran rellenar el formulario les resulte más fácil conocer la información que deben proporcionarnos, podemos dejar introducido un ejemplo. Esto podremos hacerlo desde el apartado "Valor por defecto" de la configuración de los campos.

Si por la razón que fuera olvidáramos introducir el ejemplo, podremos hacerlo tecleando el ejemplo entrecomillado después de la información del campo. Ejemplo: <label> Tu correo electrónico [email* email-38 "midirecccion@dominio.com"]</label>

Limitar número de caracteres.

Podemos limitar el número de caracteres añadiendo al texto una de estas dos etiquetas en el campo de nuestro interés:

maxlength:X: si queremos establecer un número máximo de X caracteres.
minlength:X: si queremos establecer un número mínimo de X caracteres.

Esto podemos emplearlo por ejemplo si en el formulario solicitamos el número de teléfono. En el ejemplo que mostramos a continuación hemos indicado que el número máximo y mínimo de caracteres es 8 y también se ha incorporado un ejemplo:

<label> Tu teléfono [tel tel-729 maxlength:9 minlength:9 "999999999"]</label>

Mensaje de error

Si al guardar el formulario en la parte superior vemos este mensaje:

En la parte parte inferior se puede mostrar un mensaje aclaratorio. Por ejemplo:

En este caso, el error se debe a que no hemos incorporado los campos de acuerdo a esta estructura: <label> NombreDelCampo [text* your-name] </label>

Para reparar este error, solo tenemos que revisar que todas las líneas del formulario tengan la estructura que indicamos anteriormente.

Correo

Una vez configurada la pestaña "Formulario", procedemos a configurar los elementos de la pestaña "Correo". Desde aquí vamos a definir la dirección de correo donde recibiremos todas las respuestas que se envíen a través del formulario así como el orden en el que queremos que se presente los datos recibidos.

Algunos de los campos que podemos personalizar son:

"Para": aquí debemos asegurarnos de escribir una dirección de correo válida ya que es la dirección en la que recibiremos todos los mensajes del formulario.
"Asunto": el texto que incorporemos aquí se corresponderá con el asunto del correo que recibiremos cada vez que se complete el formulario.
"Cuerpo del mensaje": por defecto aparecerá una plantilla que podremos modificar en función de los datos que hemos incorporado en nuestro formulario. Los "campos" que podremos incorporar aparecen en la parte superior y se corresponden con los mismos campos que hemos añadido en la pestaña "Formulario".

Una vez completados los datos, debemos pulsar en Guardar para conservar los cambios.

Mensajes

En esta pestaña podemos ver y modificar los mensajes que verá el usuario en nuestra página cuando cumplimente el formulario. Una vez realizados los cambios, debemos pulsar en Guardar para conservar los cambios.

Publicar formulario

Para publicar el formulario debemos copiar el shortcode. Accedemos a la página donde queramos que se muestre el formulario y haremos lo siguiente:

Si empleamos el editor HTML pegamos el shortcode que hemos copiado anteriormente.
En el caso de emplear Page Builder, tenemos que emplear el widget "HTML Personalizado" y pegar el código.

Si estamos empleando el editor de bloques podemos publicarlo de dos maneras:
1. Localizamos y seleccionamos el bloque "Shortcode" y pegamos el código que habíamos copiado.
2. Localizamos y seleccionamos el bloque "Contact Form 7":
  
  A continuación vemos el listado formularios que tenemos creado. Seleccionamos el de nuestro interés:

Una vez hemos publicado la página donde hemos incorporado el formulario, se visualizará en nuestra página como en la siguiente imagen.

Cuando un usuario envíe un mensaje a través del formulario, recibiremos un correo electrónico en la dirección que hemos configurado en la pestaña "Correo" con los datos que hemos incluido en la configuración.