Formulario de contacto en WordPress a tu medida.

Crear un Formulario de contacto en WordPress a tu medida. 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.

¿Qué plugin utilizo para mi formulario?

Formulario de contacto en WordPress a tu medida. 3 -WebOnWork.es
Formulario de contacto en WordPress a tu medida. 3 -WebOnWork.es

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.

Formulario de contacto en WordPress a tu medida. 2-WebOnWork.es
Formulario de contacto en WordPress a tu medida. 2-WebOnWork.es

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.

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>

Fuente:

Omar de la Fuente.

Diseñador gráfico y web. Soy un autónomo que intenta ganarse la vida. Ahora trabajando con mi blog haciendo realidad mi sueño de generar mi autoempleo y poder ayudar a otras personas a conseguir el suyo a través de mis contenidos y mis cursos. >> ¿Conectamos en redes sociales? Twitter | Facebook

A este artículo le va de maravilla que leas Recursos Gratis Para Tu Blog O Página Web.

 

Más entradas relacionadas en WebOnWorK:

También podría gustarte Más del autor