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:

Crear un formulario con Contact Form 7 - dinapyme - 01

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.

Crear un formulario con Contact Form 7 - dinapyme - 02

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.

Crear un formulario con Contact Form 7

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

Crear un formulario con Contact Form 7

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.

Crear un formulario con Contact Form 7

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

Y ya lo tenemos en la lista de plugins:

Crear un formulario con Contact Form 7

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

Crear un formulario con Contact Form 7

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.

Crear un formulario con Contact Form 7

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:

crear un formulario con contact form 7

Podemos editar o duplicar un formulario.

crear un formulario con contact form 7

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

crear un formulario con contact form 7

Y eliminar formularios:

crear un formulario con contact form 7

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.

crear un formulario con contact form 7 - dinapyme - 11

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

crear un formulario con contact form 7

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:

crear un formulario con Contact form 7

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.

crear un formulario con Contact form 7

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:

crear un formulario con Contact form 7

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.

crear un formulario con Contact form 7

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.

crear un formulario con Contact form 7

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“.

crear un formulario con Contact form 7

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:

crear un formulario con Contact form 7

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

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

crear un formulario con Contact form 7

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.

Acceder


Username
Create an Account!
Password
Forgot Password? (close)

Create an Account!


Username
Email
Password
Confirm Password
Want to Login? (close)

?Has olvidado tu contraseña?


Username or Email
(close)