Formulario de contacto en WordPress con Contact Form 7

Ya tienes terminada tu página web y estás deseando poder atender a tus clientes. En algún momento tus clientes querrán contactar contigo para resolver sus dudas o contratar tus servicios. Interactuar con tus clientes es una parte muy importante de tu sitio web por eso queremos darte los pasos necesarios para que sepas como incluir un formulario de contacto en WordPress.

El repositorio de WordPress cuenta con una gran variedad de plugins para implementar un formulario de contacto en WordPress pero en este artículo vamos a hablar de Contact Form 7, a día de hoy el plugin más descargado para crear formularios de contacto.

Este plugin te permite crear diferentes campos y hacerlos obligatorios u opcionales, incluir desplegables o selectores entre otras muchas opciones. Su uso está tan extendido que muchas de las plantillas de pago lo incluyen, pero si este no es tu caso no tienes por qué preocuparte ya que este plugin es gratuito.

Formulario de contacto en WordPress: Tutorial Contact Form 7

Formulario de contacto

Si trabajas con una plantilla gratuita que no tiene instalado el plugin previamente puedes instalarlo desde el administrador de WordPress. Dirígete a Plugins > Añadir nuevo y en el buscador de plugins escribe “Contact Form 7”. Pincha en “Instalar” y después en “Activar”.

Ahora en el menú lateral ya te aparecerá la opción “Contacto” desde la que gestionaremos las opciones del plugin.

Desde este apartado de “Contacto” podemos acceder a un listado con los formularios. La instalación del plugin nos crea un formulario de contacto en WordPress predeterminado, llamado “Formulario de contacto 1”. Este formulario es bastante sencillo, con los campos nombre, email, asunto y mensaje. Es posible que con esto te sirva y no necesites mucho más.

Añadir nuevos campos a un formulario

Si necesitas más campos de los que el formulario de contacto que viene por defecto ofrece, puedes crear uno nuevo o personalizar el que viene por defecto con los campos que necesites.

Para crear uno nuevo dirígete al apartado de “Contacto”, haz click en «Añadir nuevo» y elige un título para identificarlo fácilmente dentro del listado. Vamos a ponernos en el caso que tu web necesite varios formularios, si los titularas “formulario de contacto 1”, “formulario de contacto 2”, “formulario de contacto 3”, etc; te sería muy difícil luego identificar cada uno si necesitarás hacer cambios. Te aconsejo que utilices títulos que sean más reconocibles como “formulario de contacto principal”, “formulario de contacto home” o “formulario de contacto footer”.

Al crear un nuevo formulario el plugin de manera predeterminada nos añade los campos básicos: nombre, email, asunto y mensaje. Este formulario nos servirá de plantilla y trabajaremos sobre él para crear nuestro formulario de contacto en WordPress personalizado.

Para añadir nuevos campos, primero abrimos la etiqueta <label> y la cerramos con </label>. Dentro pondremos el nombre del campo del formulario, por ejemplo si es para que el usuario introduzca su teléfono la etiqueta quedará así:

<label>Teléfono de contacto</label>

Después seleccionamos el campo que queramos aplicar del menú de opciones del formulario, en nuestro caso seleccionamos “teléfono”.

En la ventana emergente que nos aparece rellenamos los campos necesarios:

Tipo de campo: Si marcamos la casilla el campo será obligatorio, es decir, si el campo está vacío el formulario no se envía.

Nombre: Podemos poner un nombre que haga referencia al tipo de campo.

Valor predeterminado: Si se marca la casilla “Use este texto como marcador del campo” el valor que indiquemos aparecerá en el campo por defecto.

Akismet: Si tienes instalado el plugin Akismet puedes marca la casilla para evitar que lleguen formularios que sean considerados como spam.

Atributo de ID o CSS: Podemos añadir un estilo CSS que tengamos definida en nuestra hoja de estilos mediante un atributo ID o Clase.

Adjuntar archivos al formulario de contacto

Si queremos que el usuario pueda adjuntar archivos en el envío podemos incluir un campo “archivo”. En la configuración de este campo tendremos que limitar el peso máximo de subida y los formatos de archivo que se van a aceptar.

Limite de tamaño: Establece un tamaño máximo de archivo en bytes. Se puede utilizar el sufijo mb para establecerlo en megabytes.

Formatos de archivo aceptados: Aquí se define las extensiones permitidas, por ejemplo: pdf, docx, doc, mp3, jpg, etc.

[file curriculum filetype:pdf|doc|docx|odt limit:2mb]

Seleccionar destinatario en un formulario de contacto

Esta opción es muy útil cuando tenemos varios departamentos en la empresa y queremos que el usuario pueda elegir a quien quiere que le llegue el formulario mediante un desplegable.

Para ello seleccionamos la opción “select” del menú de opciones del formulario. En el apartado Opciones ponemos el nombre del destinatario seguido de «|» y la dirección del email. Quedaría de esta manera:

[select destinatario "Dpto. Técnico|correo@dominio.es" "Comercial|correo@dominio.com" "Contabilidad|correo@dominio.net"]

Configuración correo electrónico

Desde la pestaña “Correo electrónico” podemos configurar la dirección email y el mensaje que recibiremos. También se puede configurar un correo que recibirá el visitante cuando rellene el formulario.

Campos en el panel de la pestaña Correo

Para: Correo electrónico al que van a llegar los correos que se envíen desde el formulario. Si hemos incluido un campo “select” para que el usuario pueda decidir a quien enviar el correo, debemos añadir a este campo en nombre del campo “select” entre corchetes.

De: Cuenta de correo del dominio web. No puede ser una cuenta externa a donde tengamos instalado el plugin. Si quieres puedes añadir la etiqueta [your-name] para que al recibir el correo puedas ver el nombre del remitente del formulario.

Si al rellenar este campo el plugin te indicara que hay un error prueba a poner wordpress antes de la @ guida de tu dominio, de manera que queda similar a “wordpress@tudominio.com”

Cabeceras: Si queremos podemos enviar copias del correo que recibimos a otras direcciones. Se pueden añadir tantas como se quiera poniendo una por línea.

Para enviar una copia normal a otro correo se utiliza la estructura: Cc: Email

Para enviar una copia oculta a otro correo se utiliza la estructura: Bcc: Email

Cuerpo del mensaje: En este campo se configura el formato, aspecto e información que contendrá el correo que recibiremos.

Para mostrar la información que recogemos en el formulario se utilizan los shortcodes del plugin que son:
[your-name] – [your-email] – [your-subject] – [your-message]

La opción “Excluir las líneas con etiquetas de correo electrónico vacías en la salida” nos excluye aquellos campos quedado vacíos en el formulario.

Usar contenido de tipo HTML
Marcando esta casilla podemos añadir etiquetas HTML para maquetar y componer el aspecto de nuestros correos. Pero hay que tener en cuenta que muchos servidores pueden detectar estas etiquetas HTML como spam por lo que deberás decidir si vale la pena usarlo o no.

Archivos adjuntos
Si en nuestro formulario hemos creado un campo para que el usuario adjunte un archivo, aquí ponemos la etiqueta del campo que utilizamos para el archivo adjunto.

Correo electrónico (2)
Marcando esta opción, podemos hacer que el usuario reciba un correo electrónico de manera automática cuando rellene el formulario de correo. Lo podemos usar para que el usuario reciba una confirmación de que hemos recibido su mensaje y así generar algo de feedback con el cliente.

La manera de configurarlos es similar a la configuración que hemos visto anteriormente. La mayor diferencia es que en el campo “Para:” el cual lo rellenamos con el shortcode [your-email] para que el correo lo reciba el usuario.

Mensajes

Desde esta opción podemos ver los mensajes que aparecen dependiendo de las acciones que sucedan al rellenar o enviar el formulario. Por ejemplo, si hay campos obligatorios que el usuario no ha rellenado, al enviar con éxito el formulario o si ha sucedido un error durante el envío. Estos mensajes los genera el plugin por defecto pero se pueden personalizar si es necesario.

Ajustes adicionales

En este campo podemos añadir código para agrear funcionalidades específicas al formulario de contacto. Algunas de las funcionalidades son: Activar el formulario solo para suscriptores, activar un modo de pruebas para el formulario, realizar seguimiento de envíos de formularios con Google Analytics o redireccionar a otra URL después de los envíos.

Puedes consultar los fragmentos de código disponibles puedes hacerlo desde el siguiente enlace: ajustes adicionales para Contact Form 7

Apariencia del formulario de contacto en WordPress con Contact Form 7

Por defecto el plugin construye el formulario en una sola columna, poniendo cada campo en una fila. Es posible personalizar los estilos del formulario e incluso disponer los campos en dos columnas.

Crear un formulario a dos columnas

Si queremos que los campos de nuestro formulario aparezcan a dos columnas podemos hacerlo envolviendo el formulario en código HTML. Para ello nos dirigimos al editor del formulario y vamos envolviendo los campos en selectores div de manera que quede algo similar a esto:

 

De esta manera todo el formulario queda envuelto en la capa “responsive-form” que a su vez contiene 4 filas con la clase “form-row”. Las dos primeras contienen dos columnas que ocupan la mitad del ancho con la clase "column-half" mientras que las dos últimas envuelven su contenido en una sola columna a tamaño completo que definimos con la clase "column-full".

Para que el formulario aplique los estilos deberás de copiar el siguiente código en tu hoja de estilos. Te aconsejamos que trabajes en un tema hijo para evitar perder está configuración si actualizas el tema.

 

Cambiar apariencia del formulario de contacto

Con esto ya tendrías maquetado el formulario a dos columnas, pero si todavía quieres personalizar aun más el formulario puedes hacer uso del CSS al máximo. Por ejemplo, si queremos poner un color gris de fondo al formulario y un margen interior de 20px los aplicamos el estilo a la clase wpcf7

 

Si queremos aplicar algún estilo a alguno de los campos del formulario lo podemos hacer con la clase wpcf7 seguido del selector al que queremos aplicar el estilo. Pongamos el ejemplo de que queremos darle a un campo al que le hemos asignado la clase “primer-campo” un borde de color verde.

 

Otro elemento que podemos personalizar es el botón de enviar. Para ello tenemos que definir la clase “wpcf7-submit” en la hoja de estilos. Por ejemplo, para que el botón tenga un color azul y los bordes redondeados lo definiriamos de la siguiente manera:

 

Como puedes ver se puede personalizar un formulario de contacto en WordPress con el plugin Contact Form 7. Solo son necesarios unos conocimientos básicos de CSS para cambiar el color de fondo, cambiar el estilo de los campos, crear un estilo para el botón de enviar o cualquier otro campo que tengamos en nuestro formulario.

Conclusión
Contact Form 7 como has podido ver es un plugin de formulario de contacto muy completo. Permite insertar cualquier tipo de campo necesario y tiene un alto nivel de personalización. Además permite integrarse con otros plugins como Mailchimp o PayPal & Stripe Add-on.

¿Te ha gustado este tutorial para crear un formulario de contacto en WordPress con el plugin Contact Form 7? ¿Utilizas alguna extensión para Contact form 7 interesantes? . Puedes dejarnos un comentario con tus impresiones o dudas.