Cómo crear un formulario de contacto en WordPress (y cómo tunearlo)

En el artículo de hoy vamos a aprender a hacer lo que su propio nombre indica, y es cómo crear un formulario de contacto en WordPress, pero no sólo eso.

Sé que para muchos quizá sea un tema muy básico, pero te puedo asegurar que en la última encuesta que hice para determinar los contenidos que más interesaban, de lo que más me solicitiban eran este tipo de cosas que muchas veces se dan por sabidas.

Porque claro, es muy fácil decirte: «puedes meter tu formulario de contacto con tal plugin.»

Ya, pero luego según cómo te manejes, instalas el plugin pero a ti no te resulta tan fácil.

O por lo menos, no tienes tan claro cómo podrías configurar según qué cosas y eso es lo que vamos a ver, porque a través de una sencilla línea de código CSS vas a ver cómo se pueden personalizar muchas cosas del aspecto del formulario.

Por otro lado, decirte que el plugin «Formulario de Contacto 7» (el que yo siempre utilizo y recomiendo) hace bien poco que se ha actualizado a una nueva versión y ha cambiado un poco las cosas de sitio, por lo que así aprovecho para que lo veamos «a la última» 😉

Comenzamos. (Abajo del todo tienes el videotutorial)

¿Qué plugin utilizo para mi formulario?

Como te decía, yo el que siempre utilizo «Formulario de Contacto 7«.

Es ya todo un clásico y te lo puedes descargar desde ese enlace, aunque es tan utilizado que viene ya instalado de serie en la mayoría de instalaciones de WordPress que hagas por ejemplo desde un cPanel con tu proveedor de hosting.

Lo que también te decía, a veces con los plugins nos vuelven locos en las actualizaciones cambiando las cosas de sitio.

Antes en este salía todo en una única pantalla y ahora lo han dividido en diferentes pestañas. Viene a ser y contener lo mismo, pero ya te descoloca un poco.

Este plugin ya te trae un formulario creado con el código básico y los elementos que necesitas, es decir campos para:

• Que introduzcan su nombre.
• Que te indiquen su email.
• Que digan el asunto de su consulta.
• Un área de texto para explayarse comentando lo que quieran.

Al margen de eso, tú luego puedes añadir otra serie de campos mediante la generación de nuevas etiquetas.

Explicarlo en texto es difícil, mejor que lo veas en el vídeo, pero para que me entiendas por ejemplo puedes querer añadir un campo opcional en el que solicites que te pongan su número de teléfono.

También vas a tener una pestaña donde indicar a qué email quieres que te lleguen los correos con dichas consultas, asi como configurar el aspecto del email que recibes cuando te llega algo a través de ese formulario de contacto.

Ora cosa que podrás controlar son los mensajes de error o de éxito en el formulario.

Habrás visto que cuando envías una consulta te puede aparecer un mensaje tipo «Tu mensaje se ha enviado con éxito» o bien «Rellena todos los campos, por favor«. Pues bien, esos mensajes vas a poder introducir el texto que tú desees, para personalizar tu copy.

Por último, viene un campo de «Configuración adicional» que es un tema más avanzado de programación y que, sinceramente, yo no he tocado nunca.

Con lo que sí he trasteado es con el tema del CSS, que es lo que veremos luego.

Cómo y dónde insertar el formulario de contacto

Primero de todo debes entender que cuando crear un formulario nuevo con este plugin se genera un shortcode a modo de «identificador» de dicho formulario.

Un shortcode es una pequeña línea de código que cuando la copies y pegues dentro de tu web, aparecerá ese formulario.

De este modo y como estarás sospechando, además de facilitarnos las cosas bastante lo que obtenemos es que podemos tener distintos formularios de contacto en nuestro sitio web, que pidan diferentes tipos de datos y/o que lleguen a distintas cuentas de email.

Pero vamos al grano con uno sólo: tan sencillo como copiar y pegar el shortcode que se genera y que puedes ver en la parte superior de la pantalla de edición de tu formulario.

¿Dónde lo pego?

Pues donde quieras, aunque lo más clásico es crearte una página nueva, poner lo que quieras en ella en cuanto a textos, imágenes, etc (como en cualquier página) y luego pegas el shorcode donde más te interese de dicha página.

Una disposición básica de ese tipo de páginas podría ser:

• Titulo: «Contacto».
• Una foto tuya o del equipo.
• Datos de contacto, tipo tu teléfono, la dirección si tenéis un local, etc.
• Frase estilo: «O puedes contactarnos a través de este formulario:«
• Insertas el formulario pegando su shortcode.

De todas formas, un shortcode se puede pegar donde quieras, y eso incluye los widgets. Es decir, todo un mundo de posibilidades 🙂

Te daré dos opciones a bote pronto:

1. En un widget en la barra lateral o sidebar.
2. Si usas Genesis, en un Home-top para que sea algo muy importante. Se me ocurre que tu principal objetivo podría ser que te soliciten un presupuesto.

Ah, y también decirte que para la inserción de formularios en widget yo utilizo los widgets de «Editor Visual», que son los que te aparecen cuando instalas el plugin «Black Studio Tiny«.

Cómo personalizar tu formulario de contacto

Lo que verás en el vídeo es la siguiente idea: meter el shortcode dentro de una etiqueta HTML, en este caso la etiqueta <div>, y luego aplicar una serie de estilos en ella.

¿Qué vamos a controlar?

Bueno pues los siguientes atributos:

• background-color: el color de fondo.
• border: el color y grosor del borde.
• font-weight: el estilo de la letra.
• font-size: el tamaño de la letra.
• padding: el espacio desde los elementos hasta el borde.
• text-align: la alineación del texto.

Hay más cosas, pero con eso ya vamos a modificar bastante el aspecto.

Por ejemplo:

<div style=»background-color: #f8faff; text-align: center; font-weight: bold; padding: 18px; border: solid 2px #ddd; font-size: 1.2em;»>{contact-form-7 id=»4″ title=»Formulario de Contacto»}</div>

Nota: he cambiado los corchetes adrede porque sino en lugar de ponerme el código me salta el shortcode y me muestra el formulario en el post, cuando lo que quiero que veas es el código solo. Si copias y pegas hazlo solo con la parte de CSS, respeta el ID y nombre del formulario que tú tengas.

Luego ya es cuestión de cada uno modificar los valores de los atributos al gusto.

Si quieres ampliar información sobre CSS básico, ahí la tienes 😉

Como siempre, todo se ve mejor en vídeo

Mucha explicación teórica pero al final como mejor se entiende todo y paso a paso es en vídeo, asi que aquí lo tienes para que lo disfrutes.

Espero que te sirva para aprender cómo crear un formulario de contacto en WordPress de forma sencilla y también cómo modificar su aspecto.