¡Clasificado como el #1 mejor proveedor de servicios en la nube de los Países Bajos en 2024!
E-commerce
10 minutos de lectura

La guía definitiva para configurar el formulario de contacto 7 en WordPress

Escrito por
Publicado el
June 14, 2024
Updated on
June 20, 2024

Crear un canal de comunicación fluido entre usted y los visitantes de su sitio web es crucial para cualquier negocio en línea exitoso. Contact Form 7 es un popular complemento de WordPress que te permite hacer precisamente eso. En esta guía completa, te guiaremos a través de todo el proceso de configuración de Contact Form 7 para tu sitio de WordPress, desde la instalación hasta la personalización.

Instalación de Contact Form 7

Para empezar, tendrás que instalar y activar Contact Form 7 en tu sitio web de WordPress. Sigue estos pasos:

  1. Inicia sesión en tu panel de administración de WordPress.
  2. Ve a Plugins > Añadir nuevo.
  3. En la barra de búsqueda, escribe «Formulario de contacto 7" y pulsa Entrar.
  4. Ubique el Plugin Contact Form 7 de Takayuki Miyoshi y haga clic en Instalar ahora.
  5. Una vez finalizada la instalación, haga clic en Activar.

¡Enhorabuena, Contact Form 7 ya está instalado y listo para usarse en tu sitio!

Creación de su primer formulario de contacto

Con Contact Form 7 instalado, ahora puede crear su primer formulario de contacto. Para ello, sigue estos pasos:

  1. En tu panel de administración de WordPress, ve a Contacto > Agregar nuevo.
  2. Introduzca un título para su formulario de contacto en el campo designado.
  3. Verás que ya existe una plantilla de formulario predeterminada. Puedes modificar esta plantilla o crear una nueva desde cero. Por ahora, usaremos la plantilla predeterminada.
  4. Haz clic en Guardar para guardar el nuevo formulario de contacto.

Agregar campos de formulario

Personalizar tu formulario de contacto es fácil con Contact Form 7. Puedes agregar varios campos, como cuadros de texto, menús desplegables, casillas de verificación y más. A continuación te explicamos cómo hacerlo:

  1. En el editor de formularios, coloca el cursor donde quieras agregar un campo nuevo.
  2. Haga clic en el tipo de campo que desea agregar en la barra de herramientas situada encima de la plantilla de formulario (por ejemplo, texto, correo electrónico, URL, etc.).
  3. Aparecerá una ventana emergente en la que puede personalizar las propiedades del campo, como la etiqueta, el valor predeterminado y el estado obligatorio.
  4. Haga clic en Insertar etiqueta para agregar el campo a la plantilla de formulario.

Repite estos pasos para cada campo que quieras agregar al formulario.

Configuración de notificaciones por correo electrónico

Una vez que el formulario esté listo, tendrás que configurar las notificaciones por correo electrónico para recibir los mensajes de los visitantes de tu sitio. Para hacer esto:

  1. Desplázate hacia abajo hasta la sección Correo del editor de formularios.
  2. Ingresa tu dirección de correo electrónico en el campo Para para recibir los envíos de formularios.
  3. Personalice los campos Desde, Asunto y Encabezados adicionales según sea necesario.
  4. En el campo Cuerpo del mensaje, asegúrese de incluir todas las etiquetas de los campos del formulario para recibir la información enviada.

No olvides hacer clic en Guardar para guardar los cambios.

Diseñar tu formulario de contacto

Para que tu formulario de contacto sea visualmente atractivo y coherente con el diseño de tu sitio web, puedes aplicar estilos CSS personalizados. Aquí te explicamos cómo hacerlo:

  1. En tu panel de control de WordPress, ve a: Apariencia > Personalizar.
  2. Navega hasta la sección CSS adicional.
  3. Añade tu código CSS personalizado para diseñar los elementos del Contact Form 7. Por ejemplo:

.wpcf7 {

color de fondo: #f8f8f8;

relleno: 20px;

radio del borde: 5 px;

}


.wpcf7-form input [type="text "],

entrada de formato.wpcf7 [type="email "],

.wpcf7: área de texto del formulario {

ancho: 100%;

relleno: 10px;

borde: 1 px sólido #ccc;

radio del borde: 3 px;

}


.wpcf7-enviar {

color de fondo: #4CAF50;

borde: ninguno;

color: blanco;

relleno: 15 px 32 px;

alineación de texto: centro;

decoración de texto: ninguna;

pantalla: bloque en línea;

tamaño de fuente: 16px;

margen: 4 px 2 px;

cursor: puntero;

radio del borde: 5 px;

}

  1. Haz clic en Publicar para guardar tus estilos personalizados.

Tu formulario de contacto ahora debería tener un estilo acorde a tus preferencias.

Consejos para la protección contra el spam

El spam puede ser un problema importante para los propietarios de sitios web. Afortunadamente, Contact Form 7 ofrece varias opciones para proteger tus formularios de los envíos de spam:

  1. CAPTCHA: Intégralo con el servicio reCAPTCHA de Google para añadir un campo CAPTCHA a tu formulario. Esto requerirá que los usuarios verifiquen que son humanos antes de enviar el formulario.
  2. Honeypot: Usa el plugin Contact Form 7 de Honeypot para añadir un campo oculto a tu formulario. Los bots rellenarán el campo, pero los humanos no lo verán. Si el campo está completo, el envío se marcará como correo no deseado.
  3. Akismet: Integre Contact Form 7 con el servicio antispam de Akismet para filtrar automáticamente los envíos de spam.

La implementación de uno o más de estos métodos puede ayudar a mantener limpia la bandeja de entrada y garantizar que solo reciba mensajes legítimos de los visitantes de su sitio.

Integración con Alumio

Alumio es una potente plataforma de integración que puede ayudarlo con su Integraciones con WordPress con diversas aplicaciones y sistemas. Al integrar Contact Form 7 con Alumio, puede automatizar los procesos y optimizar sus flujos de trabajo.

Por ejemplo, puede conectar Contact Form 7 a su sistema CRM para crear clientes potenciales o contactos automáticamente cuando se envía un formulario. Esto ahorrará tiempo y garantizará que no se pierda ningún cliente potencial.

Para integrar Contact Form 7 con Alumio, necesitará:

  1. Regístrese para obtener una cuenta de Alumio.
  2. Cree una nueva integración en Alumio, conectando WordPress y la aplicación que desee (por ejemplo, CRM, automatización de marketing, etc.).
  3. Configure los ajustes de integración para asignar los campos del Contact Form 7 a los campos correspondientes de la aplicación conectada.
  4. Habilite y pruebe la integración para asegurarse de que todo funciona correctamente.

Con Alumio y Contact Form 7 trabajando juntos, podrá crear flujos de trabajo más eficientes y aprovechar al máximo los formularios de contacto de su sitio web.

Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the automation benefits for your business!
Ponte en contacto

Estaremos encantados de ayudarte y responder a cualquier pregunta que puedas tener

Acerca de nuestro socio

Start integrating with popular apps!

No se ha encontrado ningún artículo.

Start integrating with popular apps!

No se ha encontrado ningún artículo.

Connect with

No se ha encontrado ningún artículo.
Portrait of Leonie Becher Merli, 
Business Development Representative, Alumio, point to the right with both hands -  within a white circular background.

Get a free demo of the Alumio platform

to experience the automation benefits for your business, first-hand!