Cómo crear formularios de contacto con Contact Form 7
Para todos los profesionales y empresas que contamos con una página web en WordPress, crear y añadir formularios de contacto es una tarea totalmente habitual y, de hecho, nuestra propia estrategia de marketing suele requerirlo como herramienta para captar leads y datos de potenciales clientes.
Muchos de los formularios que encontramos en los sites desarrollados en WordPress, una tarea que requiere de experiencia en programación y el apoyo de recursos como cualquier tutorial de Hostinger, no suelen formar parte del propio template, sino que han sido añadidos y personalizados mediante el uso de algún plugin de customización como Contact Form 7, del que te hablaremos en este artículo.
¿Qué tipos de formularios de contacto hay para WordPress?
Como casi para cualquier elemento gráfico o de diseño web, tenemos la opción de quedarnos con el aspecto predefinido o básico, o dar un paso más allá y personalizar los estilos de acuerdo a nuestra identidad corporativa.
Formulario de contacto estándar
Nos referimos a grandes rasgos a cualquiera de los formularios modelo que traiga por defecto nuestro template o, incluso, aquellos con un diseño estándar que nos ofrece la configuración de partida del plugin WordPress utilizado para añadirlos en nuestra web.
Formulario de contacto customizado o personalizado
Para personalizar un formulario de contacto, es necesario contar con ciertos conocimientos de programación en código CSS para los estilos o HTML para la edición de los campos.
Aunque también hay temas que incluyen personalizaciones específicas para los formularios incluidos con ciertos plugins, en este artículo vamos a referirnos al plugin Contact Form 7, pues es el que gana por su popularidad y, de hecho, utilizamos en nuestra página web corporativa.
A nivel de personalización de un formulario de contacto, con Contact Form 7 es posible:
- Añadir campos: Texto (o cuerpo del mensaje), email, teléfono, URL, número, fecha, menú desplegable, casillas de verificación, aceptación, cuestionario, archivo adjunto, reCAPTCHA, botones de selección y enviar.
- Añadir parámetros de configuración: Para, por ejemplo, limitar los datos que el usuario puede incluir en cada campo o el propio ancho de los campos, crear columnas, etc.
- Aplicar estilos y colores: Uno de los inconvenientes que tiene el plugin Contact Form 7 es quizás la poca facilidad a la hora de personalizar el aspecto visual de los formularios. Aún así, es posible empleando algo de código CSS o combinando su uso con otros plugins como CF7 Customizer.
¿Cómo crear formularios de contacto en WordPress?
Tras ver de pasada las opciones que tienes para crear y añadir un formulario de contacto en tu sitio WordPress, como ya se ha mencionado anteriormente, vamos a entrar un poco más en detalle.
En particular, vamos a ver cómo llevar esta acción a la práctica en nuestra web gracias al plugin Contact Form 7.
Ventajas de crear formularios con Contact Form 7
Algunos de los motivos que hacen de Contact Form 7 un plugin WordPress tan popular son:
- Información de soporte traducida al español.
- Descarga gratuita.
- Actualizaciones frecuentes.
- Combinación con otros plugins de seguridad y customización como Akismet o CF7 Customizer.
- Creación de etiquetas especiales para conocer a los usuarios que nos envían emails a través de formulario.
- Creación de varios tipos de campos, entre ellos menús desplegables para seleccionar diferentes destinatarios.
- Compatibilidad de uso de códigos cortos y CSS.
- Seguimiento del envío con Google Analytics.
- Envío de archivos a través de formulario.
Características básicas del plugin Contact Form 7
Para entender un poco mejor cómo funciona este plugin con el que crear formularios de contacto estándar y personalizados, veamos las diferentes pestañas de configuración que lo componen:
Formulario
Una vez que el plugin esta instalado, el primer paso sería añadir un nuevo formulario desde el botón añadir nuevo. Lo primero que aparece es un ejemplo de un formulario muy simple con el nombre, el correo electrónico, el asunto, el cuerpo del mensaje y un botón de enviar.
Este formulario ya estaría prácticamente listo para incorporar en cualquier página o espacio donde lo necesites dentro de tu web, aunque para muchas cosas se necesitará algo más avanzado y ahi es donde entra una de las mejores características del plugin CF7, la gran cantidad de opciones y diferentes campos que tiene.
También indicar que con este plugin puedes crear un cantidad ilimitada de formularios, tantos como desees para cumplir con todas las necesidades de tus sitio web.
Correo electrónico
En esta pestaña están opciones tanto de el correo que recibes como las del acuse de recibo que recibe tu visitante.
Si no estás usando un correo smtp, el nombre del remitente es muy posible que aparezca en la cabecera como WordPress, ya que es la función por defecto que el CMS tiene asignada para los correos electrónicos.
– Cabeceras adicionales: Otra opción interesante aparece en el campo «cabeceras adicionales», donde puedes añadir copias para diferentes correos, tanto normales como ocultas añadiendo la cabecera «Cc:Email» para las normales y «Bcc:Email» para las ocultas. Se pueden crear tantas como quieras siempre que este una dirección por cada línea.
– Cuerpo del mensaje: En esta pestaña se configura el mensaje que te llegará, puedes usar texto o html si lo prefieres. También puedes usar las siguientes etiquetas que has configurado anteriormente [your-name] [your-email] [your-subject] [your-message], son los campos que se han utilizado para recoger la información en el propio formulario de contacto.
– Opciones adicionales:
- Excluir las lineas con etiquetas de correo electrónico vacías en la salida: Al marcar esta casilla no mostrara los campos vacíos en el formulario.
- Usar contenido de tipo HTML: Al marcar esta casilla reconocerá el código HTML si lo has usado en el mensaje, ten en cuenta que en ocasiones el servidor de correo lo pude interpretar como spam.
- Archivos adjuntos: Aquí hay que incluir la etiqueta del campo usada para subir el archivo.
- Correo electrónico 2: Para generar un acuse de recibo, la funcionalidad es la misma que para el correo electrónico.
Mensajes
Esta pestaña simplemente tiene unos mensajes predefinidos y que puedes modificar para ciertos eventos, como pueden ser mensaje enviado con éxito, mensaje no enviado, error de validación y muchos otros casos comunes.
Ajustes adicionales
En esta última sección, puedes añadir manualmente ajustes adicionales con fragmento de código, lo que lleva ajustes de configuración más avanzados. Puedes leer más sobre esto aquí.
Personalización del formulario de Contacto
El plugin Contact Form 7 es ideal para crear formularios simples, aunque si quieres emplear todas sus funciones no existe una interfaz intuitiva que te ayude. La mayoría de las cosas se tendrán que realizar manualmente y quizás con algo de programación.
A veces, necesitamos establecer algunos parámetros que faciliten la entrada de datos o que aporten más seguridad o también facilidad para el usuario.
A continuación puedes ver algunos ejemplos revisando las posibilidades de Contact Form 7 en cuanto a customización en campos y parámetros de configuración:
Añadir campos
La sintaxis para la creación de campos sería similar a este ejemplo para adjuntar un archivo al correo cómo se vio más arriba:
[file* file-995 limit:20 filetypes:jpg|png id:archivo]
- Tipo de campo: «file»
- Campo requerido: «*»
- Nombre del campo: «file-995»
- Tamaño máximo de archivo (en megas): «limit:20»
- Tipo de archivo: «filetypes:jpg|png»
- Identificador CSS: «id:archivo»
Para el restos de campos, la sintaxis sería similar y se crea normalmente rellenando los campos que te piden, aunque también se puede crear manualmente.
Añadir parámetros de configuración
Entre los diferentes parámetros que entran en juego en un formulario de contacto, aquí tienes algunos ejemplos expresados en caracteres de los que podemos configurar con Contact Form 7:
- Ancho de los campos: size:50
- Número de caracteres (máx. y mín.): maxlength:80 minlength:5
- Ancho y/o alto de columnas (solo para las áreas de texto): 60×30, 60x, x30
Veamos ahora con detenimiento de qué manera podemos configurar estos 3 parámetros:
- Tamaño de los campos y número de caracteres
Con Contact Form 7 se pueden limitar tanto el tamaño de los campos como el número de caracteres que se permiten escribir en el cuerpo del mensaje.
Simplemente, hay que indicarlo la siguiente forma: [text* size:40 nombre-campo maxlength:80 minlength:5]
Esto crearía un campo de texto con una anchura de 40 caracteres y con unos límites de escritura de un máximo de 80 y un mínimo de 5.
Otra función muy interesante es añadir un contador de caracteres para los mensajes y, así, que el usuario pueda ver cuanto texto le queda por escribir.
Según el esando el ejemplo anterior la sintaxis seria la siguiente: [text* nombre-campo size:40 maxlength:80 minlength:5] [count nombre-campo]
No hay que olvidarse de añadir el nombre del campo en este caso «nombre-campo»para que el contador funcione.
- Ancho y/o alto de las columnas
Aunque muchas veces no se puede hacer directamente, los campos de los formularios admiten CSS, los ID y clases se indican al crear cada campo.
En este ejemplo que ya comentamos antes «[file* file-995 limit:20 filetypes:jpg|png id:archivo]«, 2l «id» del campo seria «archivo».
Gracias a esto, y con un poco de conocimiento en CSS y HTML, se pueden crear infinidad de maquetaciones y aspectos diferentes.
También se pueden crear múltiples columnas con ciertos parámetros para los campos de área de texto con la siguiente sintaxis:
- 60×30 (ancho y alto)
- 60x (solo ancho)
- x30 (solo altura)
Se emplearía alguna de las siguientes formas:
- [textarea nombre-campo 60×30]
- [textarea nombre-campo 60x]
- [textarea nombre-campo x60]
Muchas veces el propio theme WordPress también tiene integración con el Contact Form 7 (es decir, que el aspecto visual del formulario es el que trae por defecto), lo que puede provocar que no funcionen ciertos parámetros como las columnas la altura o el tamaño. En ese caso, no quedará más remedio que modificarlo en el propio theme.
Y para finalizar…
Una vez que ya tienes el formulario de contacto configurado a tu gusto, otro de los beneficios de utilizar Contact Form 7 es que puedes copiar el short-code (o código abreviado) y añadirlo en cualquiera de las páginas que quieras que se muestre.
¿Alguna vez has utilizado Contact Form 7 para crear o personalizar los formularios de contacto de tu página web en WordPress?, ¿conoces algún otro plugin destacable o del que te gustaría saber más?
- ¿Qué son los prompts de ChatGPT? Mejores prácticas - mayo 18, 2023
- Definición y ventajas del trabajo en equipo para las empresas - abril 18, 2023
- ¿Para qué sirve la maquetación editorial en marketing? - abril 11, 2023
