Formularios en WordPress

Actualizado: enero/2018 Versión: 4.9.x Nivel: Básico

Cuando comencé en el mundo del diseño web, más o menos sobre el 2005, una de las cosas que más me intrigaba era como crear un formulario y sobretodo cómo hacerlo funcionar. Comencé con Dreamweaver y gracias a que este programa que es muy intuitivo logré crear mi primer formulario en HTML y, aunque me dieron muchos dolores de cabeza, fueron muy útiles para desarrollar páginas web para mis clientes.

1. ¿Por qué usar formularios?

Los formularios son uno de los elementos más importantes en una página web, blog o tienda online con los cuales se logra que los usuarios entren en contacto ya sea para solicitar información, comprar productos o registrarse entre muchas de las funciones que los formularios ofrecen.

Existen cientos de formas de crear formularios en WordPress: ya sea manualmente mediante HTML o mediante plugins gratuitos y de pago que ofrecen esta función.

En este artículo te hablaré sobre el plugin más popular para crear formularios en WordPress: Contact Form 7.

2. Contact Form 7

El pluging Contact Form 7 se ha convertido por excelencia en el plugin para formularios en WordPress más utilizado. Con este excelente plugin podemos crear todo tipo de formularios y personalizarlos a nuestro antojo. Cabe destacar que es gratis y suele tener algunas limitaciones si se pretende usar como formulario de registro o conectar con bases de datos pero para lo básico, enviar formularios desde una página web, ¡es perfecto!

2.1 Instalación de Contact Form 7

Lo primero que hay que hacer es instalar el formulario. Para ello dirígete al apartado Plugins >> Añadir nuevo. En el campo “Buscar plugins…” escribe Contact Form 7. Para este artículo voy a utilizar la última versión del plugin, v4.9.

Búsqueda de Contact Form 7 en WordPress

Haz clic en el botón Instalar ahora y a continuación en Activar. Verás como ahora aparece un nuevo elemento en el menú lateral derecho de WordPress llamado Contacto. Entra en Contacto y verás que por defecto el plugin ha creado un formulario llamado Formulario de contacto 1. Has clic en Formulario de contacto 1 para editarlo.

Formulario de contacto en Contact Form 7

2.2 Configuración de Contact Form 7

El campo donde pone Formulario de contacto 1 será el título del formulario. Es recomendable que lo cambies por si vas a utilizar más de 1 formulario en tu página. Veamos las pestañas que componen la configuración del formulario:

Formulario: es donde podrás crear tu formulario o, si lo prefieres, modificar el ya existente. Cuenta con todos los campos básicos para la creación de cualquier tipo de formulario en WordPress. Lo modificamos un poco y veamos como nos queda:

Personalización del formulario de contacto en Contact Form 7

Puedes apreciar que cada campo está conformado por la siguiente cadena:

<label> Nombre*
[text* nombre] </label>

Veamos que significa:

- <label>: es una etiqueta HTML para independizar un campo de otro.
- Nombre*: es lo que indicará al usuario que tiene que escribir en el campo. El asterisco le indica al usuario que el campo es obligatorio.
- [text* nombre]: es el shortcode de función del campo:
  - text, significa que es un campo de texto.
  - el asterisco, significa que el campo será obligatorio.
  - nombre, es la etiqueta de control del formulario. Puedes poner lo que quieras en esta etiqueta aunque te recomiendo que la hagas coincidir con el nombre del campo.

Correo electrónico: Este apartado es el más importante de todos ya que es donde se configuran los valores para que se envíe el formulario correctamente. Veamos un ejemplo:

Configuración del formulario de contacto en Contact Form 7

Fíjate que en la pestaña Formulario, cada campo que has creado, asigna una etiqueta única. En esta pestaña es donde las vas a utilizar. Para este ejemplo se han creado las etiquetas: [nombre] [email] [asunto] [mensaje]. Veamos cada campo:

Para: aquí deberás escribir el correo electrónico donde quieres recibir los mensajes enviados desde el formulario.
De: será quién envíe el formulario. Puedes configurarlo como en la imagen, utilizando el mismo dominio de la página para que no te de error.
Asunto: es el asunto que aparecerá en la cabecera del correo electrónico que recibas. Por ejemplo: Solicitud de Información.
Cabeceras adicionales: puedes dejarlo en blanco.
Cuerpo del mensaje: aquí es donde se hará uso de las etiquetas anteriormente mencionadas.

2.3 Puesta en marcha de Contact Form 7

Una vez configurados todos los campos correctamente, añade el formulario a tu página. Si te fijas, debajo del título del formulario, tienes el siguiente mensaje: Copia este código y pégalo en el contenido de una entrada, página o widget de texto. Lo que aparece debajo, sombreado en azul, se llama “shortcode” y es un comando con el que WordPress puede leer el código fuente del formulario de contacto que acabas de crear. Cópialo y has clic en el botón Guardar.

Dirígete al apartado Páginas (puede ser también una entrada del blog o widget) y selecciona la página donde quieres que aparezca el formulario. En la caja de edición de WordPress pega el shortcode que acabas de copiar. Puedes asignarle un título y un texto para personalizarlo un poco más. Veamos como sería:

Asignando el formulario de contacto a una página

Y el resultado en la página sería el siguiente:

Formulario de contacto en una página web

Básicamente esta sería la forma más sencilla de crear un formulario en WordPress con el plugin Contact Form 7. Aunque es un plugin relativamente sencillo de utilizar, con un poco de conocimientos de HTML, CSS y JavaScript, se puede conseguir ampliar su funcionamiento. En el artículo HTML y CSS para WordPress, te indico algunas reseñas donde aprender a utilizar estos lenguajes.