Crear un formulario en WordPress – Contact Form 7

Crear un formulario es uno de los primeros pasos que se hacen al instalar WordPress, es imprescindible si queremos que los usuarios que visitan nuestra web se puedan poner en contacto con nosotros de una manera cómoda y segura.

Plugin de formulario contact form 7

Vamos a instalar el plugin contact form 7 > Plugins > Añadir nuevo. Buscar Contact Form 7 > Instalar > Activar.

crear un formulario en wordpress
Contact form 7

Una vez instalado y activado nos aparecerá una nueva opción contacto en el menú de la izquierda en nuestro escritorio de WordPress, vamos a contacto > formularios de contacto.

como hacer un formulario en wordpress

Vamos arriba y le damos en añadir nuevo. añadir nuevo formulario wordpress

Añadir formulario contact form 7

Vamos a ver las características principales de la pestaña formulario de contact form 7:

Pestaña formulario nombre:

Lo primero que tenemos que hacer es ponerle un nombre al formulario, ese nombre solo lo vemos nosotros y sirve para identificar un formulario en caso de que tengamos varios.

Contact form ID:

Esto es el código que tenemos que pegar en la pagina, articulo o widget donde queramos que aparezca el formulario.

Etiquetas contact form 7

Las etiquetas se generan haciendo clic encima y las hay de varios tipos. Dependiendo del contenido que tenga que rellenar el usuario en formulario usaremos unas etiquetas u otras. 

Podemos usar la etiqueta texto para casi todo, se pueden poner números, correos electrónicos, fechas, etc.. pero es recomendable usar la etiqueta especifica en cada caso, nos ayudara a contrastar datos y a tener un mayor control de los datos que nos envían. Por ejemplo:

Si queremos asegurarnos de que nos pongan una dirección de correo pondremos la etiqueta de correo electrónico para que detecte si ponen el @ o si añaden una extensión (.com) entre otras obligaciones del campo de correo.

Código del formulario

En este apartado es donde escribe el código que creara el formulario, se hace de la siguiente forma:

Se pondrá todo el código siempre dentro de la etiqueta html  <label> Aquí dentro va todo </label> 

Se pondrá primero el nombre del campo y si es requerido, así: <label> Tu nombre (requerido) </label>

Después va la etiqueta elegida, siempre entre los símbolos «[« [aquí dentro] en el caso del nombre, texto: <label> Tu nombre (requerido) [text* your-name] </label>

Las etiquetas se generan automáticamente no las tenemos que escribir nosotros.

tutorial contact form 7 wordpress

Generar las etiquetas contact form 7

Para generar las etiquetas hacemos clic encima de la que queremos, marcamos la casilla requerido si queremos que sea requerido (si no llenan el campo no pueden enviar el formulario) y por ultimo le damos en insertar.

formulario de contacto en wordpress
Generar una etiqueta contact form 7

Una vez hemos terminado de crear el formulario le damos en guardar, pero aun no estamos!

como hacer un formulario en woordpress

Pestaña correo electrónico contact form 7

Ahora tenemos que copiar las etiquetas usadas en el formulario en el mensaje del correo electrónico, para hacerlo nos guiaremos por las etiquetas que aparecen en la cabecera.

Para: Aquí pones el correo donde queremos que nos lleguen los datos del formulario.

De: Lo dejamos como esta.

Asunto: Ponemos un texto que nos facilite saber de donde viene el correo(se puede dejar como viene).

Cabeceras adicionales: Lo dejamos como esta.

Cuerpo del mensaje: Aquí pegaremos las etiquetas que hemos utilizado para crear el formulario, lo haremos así:

Escribimos el nombre de lo que representa el campo y luego la etiqueta correspondiente que copiamos de la cabecera, por ejemplo:

Correo electrónico: [your-email] 

De este modo en el correo que nos llega del formulario se vera:

Correo electrónico: correousado@gmail.com y así con todas las demás etiquetas!

hacer formularios en wordpress
Ficha correo electrónico contact form 7

Ya solo queda guardar y pegar el código donde queramos que aparezca el formulario.

Vídeo de como crear un formulario de contacto en WordPress con Contact Form 7

Hay muchísimas mas opciones mas avanzadas como menús desplegables, casillas de aceptación, botones de selección, entre otras características mas avanzadas de contact form 7 que tocaremos mas en profundidad en otro articulo. Para comenzar ya es suficiente!

 

Sobre Marc Oliveras 192 artículos
Cuando no estoy atrapado en alguna red mirando videos de gatitos, escribo artículos que solucionan problemas.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*