¿Tienes problemas para encontrar la mejor forma de que los visitantes de tu sitio web se pongan en contacto contigo en tu sitio de WordPress?
Pues bien, la respuesta es un formulario de contacto.
Pero hacer uno desde cero puede ser un quebradero de cabeza.
El plugin WordPress Contact Form 7 puede ser la solución que estabas buscando. Es una de las herramientas más fáciles de usar disponibles en el conjunto de herramientas de WordPress, y está diseñada para salvar la brecha de comunicación entre tú y tus visitantes sin esfuerzo.
En este blog, te guiaré a través del proceso de instalación y configuración de WordPress Contact Form 7, incluyendo la creación de un formulario de contacto, su diseño y la garantía de su seguridad.
¡Empecemos!
- ¿Qué es el Formulario de Contacto 7 de WordPress?
- ¿Por qué debemos utilizar el Formulario de Contacto 7 de WordPress?
- Ventajas e inconvenientes de tener un formulario de contacto
- ¿Cómo instalar WordPress Contact Form 7?
- Explorar las características de las configuraciones del Formulario de Contacto 7 de WordPress
- ¿Cómo crear un formulario de contacto en WordPress?
- ¿Cómo estructurar un formulario de contacto con etiquetas de formulario?
- Cómo configurar los ajustes de correo en Contact Form 7
- ¿Qué son los problemas de entrega de correo de Contact Form 7 y cómo solucionarlos?
- Uso de los mensajes de envío del formulario Contact Form 7
- ¿Cómo dar estilo a tu formulario de contacto de WordPress utilizando CSS personalizado?
- ¿Por qué estilizar tus formularios Contact Form 7?
- ¿Cómo proteger tu formulario de contacto?
¿Qué es el Formulario de Contacto 7 de WordPress?
Contact Form 7 destaca como un plugin gratuito para WordPress, que te ofrece la capacidad de generar diversos formularios de contacto para tu sitio web. Permite a los usuarios crear y gestionar sin esfuerzo múltiples formularios de contacto y personalizarlos con marcas sencillas a su gusto.
Lo que es aún mejor es que este plugin no cuesta ni un céntimo, y simplifica el proceso de añadir tus formularios de contacto a cualquier entrada, página o área de widgets proporcionando shortcodes personalizados para cada formulario que crees.
Contact form 7 destaca por su sencillez entre todos los plugins de formularios de contacto.
Características principales del Formulario de Contacto 7 de WordPress:
- Múltiples formularios de contacto
- Formularios personalizables
- Formulario de contacto 7 con tecnología Ajax
- Integración CAPTCHA
- Akismet Anti-Spam
- Sintaxis de la etiqueta de formulario
- Plantilla de correo personalizable
- Soporte para subir archivos
- Traducciones localizadas
¿Por qué debemos utilizar el Formulario de Contacto 7 de WordPress?
Un formulario de contacto proporciona una forma clara, cómoda y organizada para que tus visitantes se pongan en contacto contigo, manteniendo al mismo tiempo una comunicación segura y profesional.
Contact Form 7 hace un trabajo tremendo al ofrecer a los propietarios de sitios web WordPress la flexibilidad de crear el formulario de contacto sin esfuerzo.
He aquí algunas razones por las que deberías elegir el formulario de contacto 7:
Por qué elegir el Formulario de Contacto 7:
1. Sin coste: Al no haber versión premium, no hay ventas adicionales que distraigan la atención en el panel de control principal, lo que proporciona una experiencia sin desorden.
2. Personalizable: Ajusta fácilmente tus formularios utilizando los parámetros disponibles o aplicando CSS para darles un toque personalizado.
3. Compatibilidad con temas: Disfruta de una amplia compatibilidad con temas gratuitos y premium, garantizando que tus formularios de contacto sigan funcionando aunque cambies el tema de tu sitio web.
Integra sin problemas Contact Form 7 con el alojamiento WordPress de Cloudways
Aprovecha nuestra pila optimizada, las múltiples opciones de proveedores en la nube, el acceso SSH, SFTP y la integración con Git para obtener un rendimiento y un control potentes.
Ventajas e inconvenientes de tener un formulario de contacto
Tener un formulario de contacto puede tener sus pros y sus contras. A continuación los describo:
| Pros | Contras |
| Protege tu correo electrónico del spam | Puede parecer menos personal que los correos directos |
| Imparte profesionalidad | Posibles problemas técnicos o de funcionamiento |
| Mensajes estructurados para facilitar su manejo | Oportunidades o comunicaciones perdidas |
| Reducción de los mensajes basura | |
| Céntrate en las interacciones auténticas |
¿Cómo instalar WordPress Contact Form 7?
Para instalar Contact Form 7, tienes que seguir estos pasos:
- Ve a tu panel de WordPress
- Selecciona Plugins > Añadir nuevo
- Buscar Formulario de contacto 7
- Instalar y activar el plugin
- Una vez instalado, podrás ver el menú«Contacto» en tu panel de control.
Actualiza a un alojamiento WordPress gestionado en Cloudways
Lleva tu Contact Form 7 al siguiente nivel con el alojamiento gestionado de Cloudways. Benefíciate de actualizaciones automáticas, integración con MariaDB, control de versiones PHP y clonación eficiente de WordPress para una solución segura y sin complicaciones.
Explorar las características de las configuraciones del Formulario de Contacto 7 de WordPress
Contact Form 7 es una potencia en lo que se refiere a plugins de formularios para WordPress, ya que ofrece a los usuarios una rica gama de configuraciones para ajustar sus formularios de contacto. En el corazón de sus configuraciones, tienes la posibilidad de diseñar formularios personalizados e integrar varias etiquetas de formulario como texto, correo electrónico, URL y más.
Cuando instalas el formulario de contacto 7, obtienes un formulario ficticio. Puedes acceder a él siguiendo estos pasos:
- Ve a tu panel de WordPress
- Selecciona Contacto > Formularios de contacto
A continuación, describiré cada ajuste por separado:
- Formulario: La pestaña Formulario tiene una plantilla incorporada que puedes utilizar. También puedes editar la plantilla según tus necesidades.
- Correo: Te permite decidir el flujo de notificaciones por correo electrónico una vez enviado el formulario, asegurándote de que nunca te pierdes un mensaje.
- Mensajes: Te permite personalizar las respuestas automáticas y los mensajes de validación que reciben tus visitantes.
- Ajustes adicionales: Con sus ajustes avanzados, puedes combatir el spam utilizando la función «Cuestionario» o incluso integrar CAPTCHA para mayor seguridad.
¿Cómo crear un formulario de contacto en WordPress?
Ahora que has explorado las características del Formulario de Contacto de WordPress, te diré cómo puedes crear tu Formulario de Contacto personalizado. Para ello
- Ve a la pestaña Contacto de tu panel de control de WordPress y haz clic en «Añadir nuevo».
- Ponle un nombre a tu formulario de contacto. Yo voy a llamar al mío «Formulario de contacto Cloudways».
- Una vez hecho esto, haz clic en Guardar.
- Antes de comenzar el proceso de personalización, primero explicaré las diferentes etiquetas de formulario que encontrarás en Contact Form 7.
Las etiquetas de formulario de Contact Form 7 son esenciales para el funcionamiento del complemento. Estas etiquetas de formulario actúan como shortcodes, y cuando se colocan en el editor de formularios, generan elementos de formulario específicos para tu formulario de contacto.
Los usuarios pueden elegir su tipo de campo de formulario preferido, configurarlo e insertar sin esfuerzo la etiqueta de formulario generada en su formulario.
Aquí tienes una breve explicación de cada etiqueta de formulario:
| Tipo de campo del formulario | Descripción |
| Campos de texto | Genera un campo de entrada de texto básico. |
| Campos de correo electrónico | Crea un campo de entrada específico para direcciones de correo electrónico, incluyendo la validación del formato correcto del correo electrónico. |
| Campos URL | Un campo de entrada diseñado para las URL de los sitios web. |
| Campos de número de teléfono | Una entrada para números de teléfono. |
| Número | Crea una etiqueta de formulario para un número. |
| Campos de fecha | Proporciona un campo de entrada con un selector de fecha. |
| Área de texto | Genera un campo de texto más grande, adecuado para mensajes o comentarios más largos. |
| Menú desplegable | Crea una lista desplegable para que la seleccione el usuario. |
| Casillas de verificación | Proporciona casillas de verificación para selecciones múltiples. |
| Botones de radio | Genera botones de radio para la selección de una sola opción. |
| Aceptación | Normalmente se utiliza para aceptar los términos y condiciones, es una casilla de verificación que los usuarios deben marcar para continuar. |
| Campo Cuestionario | Útil para la prevención básica del spam; los usuarios responden a un cuestionario. |
| reCAPTCHA | Una etiqueta de formulario avanzada que mejora la prevención del spam. Integra Contact Form 7 con reCAPTCHA para disuadir a los robots de spam. |
| Campo de carga de archivos | Permite a los usuarios adjuntar y subir archivos. |
| Botón de envío | Añade un botón de envío a tu formulario. |
Ahora que hemos visto las diferentes etiquetas de formulario, te mostraré cómo utilizarlas realmente. Para el propósito de este blog, demostraré el uso de la etiqueta de formulario de texto. Todas las demás etiquetas de formulario se utilizarán de forma similar.
Uso de la etiqueta de formulario de texto
La etiqueta de formulario de texto en Contact Form 7 crea un campo de entrada de texto de una sola línea en tu formulario. Esta etiqueta de formulario es ideal cuando necesitas que los usuarios proporcionen un texto conciso, como su nombre o un asunto.
- Para utilizarlo, haz clic en Texto, y aparecerá la ventana emergente.
Estos son los campos que encontrarás en la etiqueta de formulario de texto en Contact Form 7:
- Tipo de campo: Marca esta opción si un campo de tu formulario es obligatorio.
- Nombre: Es un identificador único para el campo del formulario. Este nombre se utiliza para capturar y posteriormente procesar los datos. Por ejemplo, en [text your-name], «tu-nombre» es el identificador.
- Valor por defecto (Opcional): Cuando se carga el formulario, puedes establecer un valor por defecto que aparecerá en el campo de texto. Esto se hace utilizando la opción por defecto seguida del valor deseado. Por ejemplo
- [texto tu-nombre por defecto: «Liza Rajput»]
- Akismet: Akismet compara los comentarios y envíos de formularios de un sitio web con su amplia base de datos global de spam. Utiliza esta información para determinar si un comentario o envío parece spam.
- Atributos ID y Clase (Opcional): Puedes asignar atributos ID y clase al campo de texto para una personalización más avanzada, especialmente cuando se trate de estilos CSS o interacción JavaScript. Esto se hace utilizando las opciones id y class, respectivamente.
He rellenado estos valores, como se muestra en la siguiente captura de pantalla. Tras rellenar los campos, veo que se genera un código corto.
- Ahora haz clic en insertar etiqueta. Esto añadirá la etiqueta del formulario a la plantilla del formulario de contacto.
- Y una vez publicado esto, aquí está el resultado.
Personalizar el Formulario de Contacto 7 de WordPress
Al igual que añadimos la etiqueta de formulario de texto, utilizaré las combinaciones de estas etiquetas de formulario y generaré mi formulario de contacto Cloudways personalizado. Así pues, empecemos.
Como ya he creado un Formulario de Contacto Cloudways, ahora lo editaré para darle un aspecto personalizado.
Aquí tienes algunas características que quiero en mi formulario:
- Nombre
- Envía un correo electrónico a
- Asunto
- Mensaje
- Una casilla de verificación
- Un botón de envío
Utilizaré las etiquetas de formulario tal y como te he mostrado antes:
- En primer lugar, iré a Contacto > Formulario de contacto
- A continuación, selecciona el formulario de contacto de Cloudways > Editar
- Utilizaré la etiqueta de texto, correo electrónico, casilla de verificación y formulario de envío y haré clic en «insertar etiqueta».
- El texto final del formulario tendrá este aspecto
- Después de utilizar todas estas etiquetas, simplemente haré clic en guardar.
- A continuación, verás que se genera un código corto. Copia el texto.
- Ahora ve a la página en la que quieres que aparezca tu formulario de contacto. Yo lo quiero en una página de ejemplo.
- En tu panel de WordPress > selecciona Páginas > Todas las páginas
- Haz clic en Página de muestra > Editar
- Haz clic en el icono «+» y selecciona Código abreviado
- Ahora pega el shortcode que has copiado
- Haz clic en publicar.
- Tu formulario de contacto con tus datos personalizados está listo.
¿Cómo estructurar un formulario de contacto con etiquetas de formulario?
A veces, no te gusta la colocación de las etiquetas dentro del formulario de contacto. Ahí es donde querrías reestructurar tu formulario. Es muy sencillo.
Tienes que insertar las etiquetas en el orden que desees. A continuación compartiré contigo dos ejemplos para que te resulte más fácil entenderlo.
Ejemplo 1:
Quiero que las etiquetas de los formularios aparezcan con el siguiente formato:
- Nombre
- Envía un correo electrónico a
- Casilla de verificación
- Asunto
- Mensaje
- Botón Enviar
Para conseguirlo, colocaré las etiquetas del formulario en el mismo orden.
- Para el código anterior, éste es el resultado
Ejemplo 2:
Ahora, para que lo entiendas, moveré las casillas de verificación masculino/femenino debajo del mensaje. Para ello, colocaré la etiqueta de casilla de verificación debajo de la etiqueta de mensaje.
- He aquí el resultado.
Cómo configurar los ajustes de correo en Contact Form 7
Hemos explorado la pestaña formulario, y ahora la segunda pestaña en línea es la pestaña correo. Esta pestaña te permite configurar los ajustes de correo. Esto te ayuda a recibir los envíos de tus formularios de contacto en la bandeja de entrada de correo electrónico que desees.
A continuación describiré cada campo con su finalidad:
Al campo:
El campo «A» se refiere a la dirección de correo electrónico a la que se dirigirán los envíos del formulario. Por lo general, se trata de tu dirección de correo electrónico o de otra bandeja de entrada adecuada dentro de tu organización en la que desees recibir los datos del formulario enviado.
Desde el campo:
Esto indica de quién aparecerá el correo electrónico. Es una buena práctica utilizar el correo electrónico asociado a tu dominio para evitar que los correos se marquen como spam. También puedes obtener dinámicamente la entrada del correo electrónico del formulario utilizando etiquetas como [tu-email].
Campo temático:
Define el asunto del correo electrónico que recibirás. Para facilitar la clasificación, puedes utilizar un asunto claro como «Nuevo envío de [your-name],» donde [your-name] obtiene dinámicamente el nombre introducido por el usuario.
Cabeceras adicionales:
Aquí puedes añadir cabeceras de correo adicionales si es necesario. Un uso común es «Responder-a: [tu-email]», que te facilita responder directamente a la dirección de correo electrónico que el usuario ha proporcionado.
Cuerpo del mensaje:
Este es el contenido principal del correo electrónico que recibirás. Por defecto, Contact Form 7 proporciona una plantilla sencilla que incluye todos los campos del formulario. Sin embargo, puedes personalizarla como quieras.
Utiliza Correo (2):
Esta es una plantilla de correo adicional. Puede ser útil si quieres enviar un correo diferente o adicional, como un mensaje de confirmación al usuario o una notificación a otro miembro del equipo.
Archivos adjuntos:
Si tienes un campo de subida de archivos en tu formulario y deseas recibir los archivos subidos como adjuntos de correo electrónico, puedes especificarlo aquí añadiendo la etiqueta de formulario correspondiente, por ejemplo, [tu-archivo].
Guarda los cambios:
Después de configurar los ajustes de correo que desees, recuerda hacer clic en «Guardar» para asegurarte de que se guardan todos tus ajustes.
¿Qué son los problemas de entrega de correo de Contact Form 7 y cómo solucionarlos?
A veces, te encuentras con dificultades en la entrega del correo al utilizar el formulario de contacto. Describiré algunos de los problemas habituales de entrega de correo a los que se enfrenta la gente, junto con sus soluciones.
1. Correos electrónicos que acaban en Spam
A veces, los correos electrónicos enviados a través del Formulario de contacto 7 pueden acabar en la carpeta de spam.
Solución
- Comprueba regularmente tu carpeta de correo no deseado.
- Utiliza un plugin como WP Mail SMTP para enrutar los correos electrónicos a través de proveedores de correo electrónico establecidos.
2. No recibir correos electrónicos:
Puede que no recibas ningún correo electrónico, aunque los usuarios estén enviando los formularios.
Solución
- Asegúrate de que el campo «Para» de la configuración de correo de tu formulario coincide con un correo electrónico de tu dominio (por ejemplo, [email protected]).
- Considera la posibilidad de cambiar a SMTP (Simple Mail Transfer Protocol) para enviar correos electrónicos. Los plugins SMTP como WP Mail SMTP o Easy WP SMTP pueden ayudarte.
3. Fallos en el envío
Los usuarios pueden ver un mensaje de error después de enviar el formulario.
Solución:
- Vuelve a comprobar la configuración de tu correo electrónico en la pestaña «Correo» del formulario.
- Asegúrate de que tu alojamiento web admite la función mail() (utilizada para enviar correos electrónicos). Algunos servidores compartidos pueden tener restricciones.
4. Configuración incorrecta
Si el formulario está mal configurado, puede que no envíe correos electrónicos.
Solución:
- Asegúrate de que todos los campos de la pestaña «Correo» de tu formulario están correctamente cumplimentados.
- Evita utilizar correos electrónicos genéricos (como gmail.com) en el campo «De». En su lugar, utiliza un correo electrónico de tu dominio.
5. Problemas del lado del servidor
Las configuraciones del alojamiento web o los problemas del servidor pueden bloquear los correos electrónicos.
Solución:
- Ponte en contacto con tu proveedor de alojamiento para asegurarte de que no bloquea los correos salientes.
- Pregunta si hay alguna configuración SMTP específica que recomienden.
Uso de los mensajes de envío del formulario Contact Form 7
Contact Form 7 proporciona a los usuarios mensajes de respuesta después de enviar un formulario. Estos mensajes pueden informar a los usuarios sobre si el envío del formulario se ha realizado correctamente o si se han producido errores.
Estos son los mensajes por defecto que tiene Contact Form 7:
¿Cómo dar estilo a tu formulario de contacto de WordPress utilizando CSS personalizado?
Una vez que hayas creado y estructurado tu formulario, debes darle estilo. Mi formulario actual tiene un aspecto tosco, así que lo alinearé y haré que el botón de envío sea prominente.
Hay varias formas de hacerlo. Yo utilizaré CSS personalizado para hacerlo.
- Ve a Apariencia > Personalizar > CSS adicional.
- Inserta el siguiente código:
/* Estiliza todo el contenedor del formulario */
.wpcf7 {
color de fondo: #f9f9f9;
Relleno: 20px;
radio del borde: 5px;
}
/* Estiliza los campos de entrada de texto */
.wpcf7-text {
anchura: 100%;
Relleno: 10px;
borde 1px sólido #ccc;
borde-radio: 4px;
}
/* Estiliza el botón de envío */
.wpcf7-submit {
color de fondo: #333;
color: #fff;
Relleno: 10px 15px;
borde: ninguno;
borde-radio: 4px;
cursor: puntero;
}
/* Cambia el color del botón de envío al pasar por encima */
.wpcf7-submit:hover {
color de fondo: #555;
}
- Pulsa el botón Publicar y aquí tienes los resultados.
¿Por qué estilizar tus formularios Contact Form 7?
No basta con tener un formulario de contacto. También necesitas darle estilo, por razones estéticas. Un formulario de contacto visualmente atractivo mejora la experiencia del usuario y le convence para que lo utilice. Un formulario bien diseñado atrae a los usuarios y parece más profesional, lo que genera confianza en los visitantes.
Además, un formulario bien diseñado puede mejorar la usabilidad y la accesibilidad, facilitando a los usuarios la interacción y el envío de su información.
Además, no tienes que insertar el formulario de contacto al azar. Debe alinearse con el diseño de la marca para mantener la coherencia de tu sitio web.
¿Cómo proteger tu formulario de contacto?
¿Asegurar tu Formulario de Contacto con reCAPTCHA?
Después de configurar y dar estilo a tu formulario de contacto, el siguiente paso es asegurar el formulario.
El plugin Contact Form 7 tiene una función captcha incluida. Sigue los pasos que se indican a continuación para añadir reCAPTCHA a tu sitio web:
Para empezar a utilizar reCAPTCHA, necesitas tener una cuenta de Google y registrar tu sitio para obtener claves API:
- Inicia sesión en tu cuenta de Google+ y abre el panel de administración de reCapture:
- Registra tu sitio web: introduce tu Nombre de dominio y Etiqueta. Haz clic en el botón Enviar
- Una vez hecho esto, obtendrás una clave del sitio y una clave secreta.
- Copia las llaves.
- Accede a tu panel de administración de WordPress.
- Navega hasta la página Contacto → Integración. Busca la sección reCAPTCHA.
- Introduce la clave del sitio y la clave secreta en los campos que ves:
- Haz clic en Guardar cambios.
- Abre tu formulario de contacto en la sección Contacto → Formularios de contacto de tu panel de control y añade el siguiente shortcode al campo del formulario de contacto: [recaptcha]
- Haz clic en Guardar y actualiza tu sitio para ver los cambios.
Protege tu formulario de contacto con Cloudflare (opcional)
También puedes proteger tu formulario de contacto utilizando Cloudflare. Para ello, tu aplicación debe estar integrada con Cloudflare.
Si tu aplicación está alojada en Cloudways, puedes habilitar fácilmente Cloudflare en tu aplicación. Lee esta guía sobre «Configuración de Cloudflare en tu sitio web» si eres cliente de Cloudways.
Aumenta la seguridad con Cloudflare Enterprise
Mejora la seguridad y el rendimiento de Contact Form 7. Activa el complemento Cloudflare Enterprise de Cloudways con funciones como protección DDoS, CDN con 100 GB de almacenamiento, Edge Page Caching y mucho más para una protección y velocidad avanzadas.
Si no eres cliente de Cloudways y quieres configurar Cloudflare CDN en WordPress manualmente, consulta nuestra guía sobre Cloudflare WordPress CDN.
Ahora, para utilizar Cloudflare para asegurar tu formulario de contacto, necesitas configurar una regla de página especial en Cloudflare.
- En el sitio web de Cloudflare, haz clic en el panel de reglas de la página.
- Se te redirigirá a la siguiente página:
- En la pestaña «si la URL coincide», escribe el nombre de tu dominio y la página. La dirección debe tener este formato «dominio.com/tu-pagina-de-contacto».
- Activa el botón Comprobar integridad del navegador.
- Establece el nivel de seguridad en Alto.
- Haz clic en Guardar y desplegar.
Esto asegurará tu formulario de contacto.
Resumen
¡Y con esto concluye esta guía! Lo hemos recorrido todo, desde la configuración del Formulario de Contacto 7 en tu sitio de WordPress hasta la adición de tu toque personal con diseños personalizados y el refuerzo de su seguridad contra el spam.
Si tienes más preguntas o necesitas más información, no dudes en ponerte en contacto con nosotros.
Preguntas frecuentes
Q. ¿Puedo instalar Contact Form 7 en cualquier tema de WordPress?
Sí, Contact Form 7 está diseñado para ser compatible con cualquier tema de WordPress. Sin embargo, la apariencia del formulario puede variar en función del estilo del tema, y podría ser necesario CSS adicional para que el estilo del formulario coincida con tu tema.
Q. ¿Admite Contact Form 7 varios idiomas?
Sí, Contact Form 7 está preparado para la traducción y admite varios idiomas. Plugins como WPML o Polylang pueden crear formularios en diferentes idiomas.
Q. ¿Cómo puedo evitar el envío de spam a través del Formulario de Contacto 7?
Puedes integrar plugins antispam como Akismet o añadir campos CAPTCHA a tus formularios para evitar el spam. Contact Form 7 también ofrece funciones integradas como Honeypot para ayudar a combatir el spam.
Sarim Javaid
Sarim Javaid es Director Senior de Marketing de Contenidos en Cloudways, donde su función consiste en dar forma a narrativas convincentes y contenidos estratégicos. Hábil en la elaboración de historias coherentes a partir de un aluvión de ideas, la escritura de Sarim está impulsada por la curiosidad y una profunda fascinación por la evolución de los algoritmos de Google. Más allá de la esfera profesional, es un admirador de la música y el arte y una persona demasiado excitada.
