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.

como-crear-un-formulario-de-contacto-en-wordpress

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.

Omar de la Fuente
Omar de la Fuente
Trabajo con mi blog haciendo realidad mi sueño de vivir de mi propio negocio online y poder ayudar a otras personas a conseguir el suyo a través de mis contenidos gratuitos y mis cursos de pago.

¡Muchas gracias por compartir!

Share on facebook
Facebook
Share on twitter
Twitter

¿Necesitas algo en concreto?

No te vayas sin dejar tu comentario...

17 comentarios en “Cómo crear un formulario de contacto en WordPress (y cómo tunearlo)”

  1. Rocío Manzano

    Hola! Gracias por la info, me falta aclarar una duda… ¿Sólo se puede poner el formulario si tienes el plan de pago Business? He intentado instalarlo en mi blog pero me dice que solo es para este plan…

  2. ¡Voilà! Gracias por el tutorial 😉

    Me desinstalé el Jetpack porque solamente lo utilizaba para 3 o 4 módulos (como el de formularios) y me consumía una barbaridad. La verdad es que este formulario es más completillo.

    ¡Saludos!

    1. Omar de la Fuente

      Hola Andrés,
      fuck Jetpack, si puedes evitarlo… yo hace ya mucho que lo probé y dije «dónde voy con este monstruo de plugin», total para no utilizar casi nada del mismo y lo que sí utilizas poder hacerlo con otros menos pesados 😉
      Un saludo!

  3. Javier De Titta

    Hola Omar
    Excelente post, la primera vez que veo el tema de como hacer una página de contacto.
    Muchas gracias!

  4. Daniel Ojeda

    Hola! buen articulo, me aclara muchas dudas, después de todo como bien mencionas los plugins parecen muy sencillos y al momento cuando se configuran hay cosillas que no quedan del todo entendidas, y todo esto debe de quedar tan claro por que un formulario de contacto es tan indispensable para una web que tiene que quedar al punto para que las personas se puedan comunicar con nosotros, en fin buen post!

  5. Muchas gracias, por fin tengo el contacto en mi nueva web, porque WP es diferente al blogger y los codigos no funcionan…
    Lo dejo sin retocar, me viene bien todo en blanco.
    Un saludo.

  6. Buenas Omar,

    me ha gustado mucho el post y me gustaría añadir un par de cosillas.
    1.- Cuando he creado webs para clientes, cuando utilizo una dirección de correo para recibir el resultado del formulario de contacto según el hosting que tengas contratado no funcionan bien los correos gmail, hotmail, etc. Es necesario utilizar un correo con el nombre de dominio de la web. ¿os ha ocurrido a alguno?

    2.- También se puede modificar el diseño de cada campo modificando el style.css y si es en un tema hijo (child theme) mucho mejor.
    puedes hacer referencia a dichos campos:
    input[type=»tel»], input[type=»email»], input[type=»text»], etc.

    Un saludo

      1. Teresa, me alegro de que no tuvieras ningún problema con un gmail. Como digo depende de la configuración del hosting en el que tengas la web. Cuando tienes el problema que comento (no llegan los correos asociados a una cuenta gmail, hotmail, etc) habitualmente te dirán que te instales un plugin tipo SMTP para no utlizar wp_mail() . Pero como digo lo mejor es probar primero a utilizar un correo del propio dominio.

        Un saludo

  7. Muy interesante el artículo, una de los grandes problemas de este tipo de formularios es que la forma de contacto es través de email.

    El problema viene cuando intentas conectar wordpress con tu CRM, en mi caso salesforce. Aunque a priori existen plugins para ello, en la práctica es bastante más complicado.

    Llevo meses luchando para conectar contact form 7 con salesforce pero no he sido capaz, esta insistencia viene precisamente por lo que comentas en el artículo, el 90% de las plantillas de temas vienen con contact form 7.

    He seguido varias guías como https://daddyanalytics.com/integrating-contact-form-7-and-salesforce/ o http://www.alexhager.at/how-to-integrate-salesforce-in-contact-form-7/ pero sin éxito.

    ¿Has tenido algún caso similar?

    1. Omar de la Fuente

      Hola Javier,
      pues la verdad es que no he utilizado jamás ningún CRM, ni el Salesforce ese ni ningún otro, por lo que poco te puedo decir 😉
      Ojalá algún otro lector sepa de que va el tema y te pueda arrojar un poco de luz.
      Un saludo.

    2. Guadalupe Aragón

      Buenas tardes!!

      Me podrías informar cuál es la forma más recomentable para conectar tus formularios, ya sean desde contact form, o embeberlos en el sitio para hacer una conexión correcta con salesforce?

      Gracias.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba

¡ESPERA UN SEGUNDO!

¿QUIERES APRENDER ELEMENTOR PARA TU WEB?

Deja de volverte loco cada vez que quieres hacer un triste cambio en tu web. Si estás hasta el gorro de tu plantilla…