Formularios de contacto en WordPress

Crear formulario de contacto en WordPress con Contact Form 7

Vamos a crear un formulario de contacto para nuestra web con WordPress Contact Form 7 para que puedan contactarte los usuarios que visiten tu página web.

Para empezar nos iremos a la sección Plugins y haremos clic en “Añadir nuevo”. Pondremos el cursos sobre el buscador de plugins y buscaremos “Contact Form 7”.

Lo instalamos y lo activamos.

Una vez activado, nos aparecerá en la interfaz de WordPress la nueva sección “Contacto”, desde aquí administraremos nuestro formulario de contacto de Contact Form 7.

Menú de contact form 7

Por defecto el plugin nos deja un formulario de contacto de ejemplo que podremos utilizar para moldear a nuestro gusto. Hacemos clic en “Editar”.

Renombra el formulario para ubicarlo de forma rápida en el listado de formularios en caso de que vayas a crear varios.

Shortcode de Contact Form 7

Shortcode Contact Form 7

Debajo del título del formulario nos encontramos con el shortcode (código corto) del formulario que nos permite mostrarlo en cualquier parte de nuestro sitio web.

Estructura por defecto del formulario de contacto Contact Form 7

Pestaña Formulario

Estructura de contact form 7

Label Tu nombre

Lo importante es lo que está escrito dentro de [ ]: text* quiere decir que es un campo obligatorio porque lleva asterisco *. your-name podemos modificarlo como queramos, puedes poner nombre a secas. Este valor nos mostrará lo que el usuario escriba en el campo “Tu nombre” cuando recibamos un correo que haya rellenado un usuario desde el formulario.

Label Tu correo electrónico

email* es el siguiente campo, como podrás comprobar, lleva asterisco que significa que también es obligatorio. En your-email puedes dejarlo tal cual o escribir por ejemplo correo. Este valor nos mostrará lo que el usuario escriba en el campo “Tu correo electrónico” cuando recibamos un correo que haya rellenado un usuario desde el formulario.

Label Asunto

Si nos fijamos, nos damos cuenta que el primer valor text no lleva el asterisco, esto quiere decir que es un campo de texto no obligatorio a rellenar por el usuario en nuestro formulario. A continuación your-subject que puedes dejarlo tal cual o cambiarlo por ejemplo por asunto. Este valor nos mostrará lo que el usuario escriba en el campo “Asunto” cuando recibamos un correo que haya rellenado un usuario desde el formulario.

Label Tu mensaje

textarea es el campo de texto dónde el usuario nos dejará un mensaje. Como ves tampoco es obligatorio porque no termina con un asterisco. A continuación vemos your-message que podemos dejarlo tal cual o modificarlo por ejemplo por mensaje. Este valor nos mostrará lo que el usuario escriba en el campo “Tu mensaje” cuando recibamos un correo que haya rellenado un usuario desde el formulario.

Configuración para que nos llegue el formulario correctamente cuando un usuario lo rellena

Pestaña Correo electrónico

Sección correo electrónico contact form 7

Campo “Para” aquí añade el correo electrónico al cual quieres que lleguen los formularios. Puedes añadir varios separados por punto y coma y un espacio: (; )

Campo “De” correo del remitente. Cuando alguien rellena el formulario y nos llega el correo con el aviso, este será el remitente. Si no añadimos un correo del dominio, xxx@midominio.com Contact Form 7 nos mostrará un error.

Campo “Asunto“. Podemos poner lo que queramos, por ejemplo “Mensaje desde la web“. También podemos hacer que aparezca lo que el usuario a escrito en el campo “Asunto” del formulario con el siguiente código: [asunto](ten en cuenta que aquí dentro debe aparecer el valor que pusiste en el label asunto).

Campo “Cabeceras adicionales“. Este campo personalmente a mi me gusta dejarlo vacío.

Cuerpo del mensaje (Lo que recibimos en nuestro correo)

Campo “Cuerpo del mensaje“. En este campo añadiremos los valores que pusimos dentro de los label de la pestaña Formulario. Es lo que nos llegará a modo de correo cuando alguien rellene nuestro formulario. Vamos a verlo.

Nombre: [nombre] El nombre que haya escrito el usuario

Correo electrónico: [correo] El correo que haya escrito el usuario

Asunto: [asunto] El asunto que haya escrito el usuario

Mensaje: [mensaje] El mensaje que haya escrito el usuario

Mensajes del formulario para el usuario

Pestaña mensajes

Mensajes personalizados de contact form 7

Aquí puedes personalizar los mensajes que muestra el formulario cuando el usuario interactua con el. Mensaje de formulario enviado con éxito, campos obligatorios, errores, etc.

Contacto

Inicia tu proyecto conmigo

Resolveré todas tus dudas y te ayudaré con la contratación del alojamiento web y el registro de tu dominio.