Uno de los elementos que tienen todas las páginas web son, sin duda, los formularios de contacto. Por eso, en este tutorial vamos a aprender a Crear un formulario sencillo con el plugin Contact Form 7 de WordPress.

Es muy normal ver formularios en las páginas web, sobre todo formularios de contacto. Esto es lo normal y la gente espera que tengas uno en tu página web. Bien sea una web corporativa, un blog, u otro tipo de página.

Este plugin es muy sencillo de utilizar y vamos a ver en un momento cómo utilizarlo.

¿Qué es Contact Form 7 y para qué sirve?

Como ya os imagináis, Contact Form 7 es un plugin de WordPress totalmente gratuito. Para aquellos que no sepan lo que es un plugin, quedaos con la idea de que es un «programa» que realiza una o varias funciones específicas y de esta forma extender las funcionalidades de WordPress. En este caso, el plugin Contact Form 7 nos permite crear formularios en nuestras web y añadirlos a nuestras página y/o entradas.

El formulario más utilizado y más típico en todas las páginas web es el formulario de contacto.

Este formulario generalmente lo ubicamos en la página de contacto o contactar y lo usamos para recoger o dejar que los visitantes nos envíen mensajes.

De esta forma, llegarán a la cuenta de correo electrónico los mensajes que nos envíen a través del formulario.

Pero como esto está más que claro, pasemos a la acción.

Instalar el plugin Contact Form 7

Este es un proceso sencillo que muchos de vosotros y vosotras ya conocéis pero es necesario por lo que lo comento a continuación.

Como siempre, a la hora de instalar un plugin en nuestro WordPress, vamos a la sección de «Plugins» del panel de administración:

Tras pulsar en «Plugins«, nos mostrará la pantalla de plugins con todos los que tenemos instalados.

Pero lo que nos interesa ahora es instalar uno y en concreto Contact Form 7.

En la pantalla anterior pulsamos en el botón «Añadir nuevo» de la parte superior izquierda.

En la siguiente pantalla, introducimos el nombre del plugin que estamos buscando.

Tras pulsar en Enter nos mostrará el resultado de la búsqueda:

Como es de imaginar, el que nos interesa es el primero.

Podemos ver que hay más de 1 millón de instalaciones de este plugin por lo que deducimos que es un buen plugin y lo podemos instalar sin problemas.

A continuación pulsamos en el botón «Instalar ahora«, dentro de Contact form 7 y procede a la instalación.

Una vez instalado lo activamos pulsando sobre el enlace «Activar plugin«.

Y ya lo tenemos en la lista de plugins:

Además vemos que se ha creado una nueva sección en el panel de administración de la izquierda: Contacto:

Hasta ahora todo bien.

Pasemos a la siguiente fase.

Panel de control del plugin Contact Form 7

Como acabo de comentar, ahora tenemos un nuevo icono/sección en el menú de administración de WordPress con el nombre Contacto. Si pulsamos sobre el, accederemos a la gestión de los formularios de contacto.

Como es la primera vez que accedemos aquí, lo que veremos será algo similar a la captura de pantalla anterior.

En la lista de formularios podemos ver que el plugin nos ha creado un por defecto con el nombre «Formulario de contacto 1» y el código abreviado o Shortcode para este formulario.

Desde este  panel podemos gestionar nuestros formularios de contacto.

Podemos crear un formulario nuevo:

Podemos editar o duplicar un formulario.

Realizar búsquedas de formularios en el caso de tener muchos.

Y eliminar formularios:

Ahora lo que vamos a hacer es, en lugar de crear un nuevo formulario, vamos a editar el que ya existe, ya que está hecho y lo vamos a entender mucho mejor.

Editar un formulario de Contact Form 7

Para editar un formulario simplemente seleccionamos editar o pulsamos sober el título del formulario.

Nada más entrar en la edición del formulario, esto es lo que veremos:

Secciones de un formulario

A continuación enumero los diferentes apartados que hay en un formulario de Contact Form 7 y los comento un poco para que lo entendamos.

Titulo del formulario: Por defecto es «Formulario de contacto 1«. Este es simplemente el título o nombre que le damos al formulario para nuestra gestión e identificación.

Código corto (shortcode): Este es el código que nos servirá para incrustar el formulario en páginas o entradas de nuestro WordPress.

Estado: Disponemos de las opciones Eliminar, Guardar y Duplicar. La opción duplicar como su nombre indica, crea una copia del formulario actual para posteriormente reutilizarlo con alguna modificación.

En la sección principal podemos ver 4 pestañas como estas:

Vamos a comentar las 4 pestañas un poco para que sepamos de qué va todo esto:

Formulario: Esta es la sección donde se diseña el formulario. Las partes que tiene y los tipos de elementos que utiliza.

Como vemos en la pantalla anterior, en la parte de la barra, arriba, hay una serie de botones que utilizaremos para añadir un tipo de elemento o campo a nuestro formulario.

Es muy sencillo agregarlo y luego cambiar el contenido si así lo queremos.

Cada vez que añadimos un tipo de campo, tendremos que definir una serie de campos como se muestra a continuación:

Como ya digo, en la pestaña «Formulario» es donde definimos el contenido y secciones del mimo.

Correo electrónico: Aquí es donde definimos la cuenta de correo a la que llegarán los mensajes del formulario, el campo de (quién lo envía), el asunto del mensaje y el cuerpo entre otras cosas.

Mensajes: En esta pestaña podemos modificar el texto de los mensajes que existen por defecto en Contact Form 7. Podemos adaptarlos a nuestras necesidades.

Ajustes adicionales: Esto es avanzado y para saber como funciona y los ajustes que puedes añadir, te recomiendo que pulses sobre el enlace «Ajustes adicionales«.

Pues bien, una vez que hayamos realizado todos los cambios y esté a nuestro gusto, lo guardamos.

Añadir el formulario en una página

Lo podemos añadir también en una entrada pero  parece que tiene más sentido en una página y para ser más concretos en la página de «Contacto«.

Entonces, creamos la página de contacto y en ella pegamos el código corto de nuestro formulario  de esta manera:

Como vemos, lo único que hemos hecho a sido añadir el shortcode:

Error: Formulario de contacto no encontrado.

Guardamos nuestra página de contacto y comprobamos el aspecto de nuestro nuevo y flamante formulario:

Perfecto!!

Ahora ya tenemos un formulario para que nuestros clientes o visitantes nos dejen sus mensajes sin tener que enviarnos un correo electrónico directamente.

Los formularios de contacto son una herramienta muy útil y super utilizada:

Conclusión

Hemos visto como instalar el plugin Contact Form 7 en WordPress, cómo se gestionan los formularios y cómo incrustarlos en una página.

Hay que decir que Contact Form 7 tiene muchísimas funcionalidades que no podemos ver en este tutorial. Para ello necesitaríamos un curso entero o por lo menos un mini-curso.

Si te interesa que profundicemos en este plugin, házmelo saber y preparé algo más completo sin problemas.

Espero que sea útil este tutorial.

Saludos y hasta la próxima!

Autor: Oscar Abad Folgueira

Programador y desarrollador WordPress.

Twitter Facebook Google+ Linkedin Github