WordPress Contact Form Plugin: Contact Form 7 (Añadir formulario en línea)

Tanto si tiene un blog personal como un sitio web corporativo o una plataforma de comercio electrónico, necesita un “formulario de contacto”, algo que facilite a los visitantes el envío de mensajes (por ejemplo, preguntas, peticiones, sugerencias).Formulario de contacto 7 Es el plugin de formularios para WordPress más antiguo (base instalada de más de 5 millones), gratuito, flexible y potente, puede ayudarle a crear rápidamente una gran variedad de formularios (formulario de contacto, formulario de registro, formulario de comentarios, etc.), los novatos sólo tienen que configurarlo para usarlo.

I. ¿Por qué necesito un formulario de contacto? ¿No puedo poner simplemente mi correo electrónico / número de teléfono?

Poner un buzón directo o un número de teléfono puede parecer sencillo, pero tiene 3 desventajas claras:

• Los visitantes son demasiado molestosPara enviarlo, tienes que copiar tu dirección de correo electrónico y abrir tu cliente de correo electrónico, y mucha gente se da por vencida a mitad de camino;
• Vulnerable al spamLas direcciones de correo electrónico públicas serán rastreadas por robots y recibirán mucho spam;
• Irregularidades en la informaciónLos visitantes pueden pasar por alto información clave (por ejemplo, no indicar sus necesidades al preguntar por un producto) y responder de forma ineficaz.

Y el formulario de contacto resuelve estos problemas:

• Los visitantes rellenan la solicitud directamente en el sitio web en un solo paso;
• Las direcciones de correo electrónico se ocultan en segundo plano para evitar el spam;
• Los campos que deben rellenarse (por ejemplo, nombre, número de teléfono, tipo de necesidad) pueden personalizarse para garantizar una información completa.

Instalación de Contact Form 7 y creación del primer formulario

Paso 1: Instalar y activar el plugin

1. Backend [Plugin] → [Instalar Plugin], busque “Contact Form 7”;
2. Haga clic en [Instalar ahora] y en [Activar] cuando haya terminado.
3. Una vez activada, la opción [Contacto] aparecerá en el menú de la izquierda.

Paso 2: Crear un formulario de contacto predeterminado (recomendado para principiantes, directamente)

Contact Form 7 viene con una plantilla de formulario de contacto predefinida con campos comunes (nombre, correo electrónico, asunto, contenido del mensaje) que los principiantes pueden utilizar directamente:

1. Haga clic en [Contacto] → [Añadir nuevo] a la izquierda para acceder a la página de edición del formulario;
2. El plugin genera automáticamente un nombre de formulario (por ejemplo, “Formulario de contacto 1”) que puede modificarse a “Formulario de contacto del sitio web” (para facilitar su identificación);
3. El área inferior “Formulario” es el código para el formulario (no necesita conocer el código, simplemente mantenga el predeterminado), que contiene 4 campos por defecto:
   • Nombre (cuadro de texto);
   • Correo electrónico (buzón de correo electrónico con verificación, asegúrese de que tiene el formato correcto);
   • Asunto (cuadro de texto para una visión rápida del asunto del mensaje);
   • Mensaje (cuadro de texto de varias líneas, rellene los detalles).

Paso 3: Configurar “Comentarios” y “Recibir correo electrónico” tras el envío del formulario”

No basta con poder enviar un formulario, hay que configurarlo: ¿qué alertas ven los visitantes después de enviarlo? ¿A qué dirección de correo electrónico se envía el mensaje?

1. Establezca la dirección de recepción de “Mail” (¡clave! Asegúrese de que puede recibir el mensaje)

• Desplácese hasta el área “Correo” de la página de edición del formulario;
• Busque la casilla de entrada “Para” e introduzca su dirección de correo electrónico habitual (por ejemplo contact@你的域名.com）；
• Las demás opciones se dejan por defecto (“De” “Asunto”, etc. se rellenan automáticamente con el contenido del formulario).

2. Establecer un “mensaje” (para indicar a los visitantes el resultado de su envío)

• Desplácese hasta el área “Mensajes” para personalizar el texto de la alerta:
  • “Enviar mensaje con éxito”: por ejemplo, “¡Gracias por su mensaje, le responderemos lo antes posible!”. ;
  • “Mensaje de error de validación”: por ejemplo, “Compruebe que la información introducida es correcta (por ejemplo, el formato del buzón)”.

Paso 4: Guarde el formulario y obtenga el “código corto”.”

1. Haga clic en [Guardar] en la esquina superior derecha de la página, la creación del formulario se ha completado;
2. Una vez guardado, aparecerá un “shortcode” en la parte superior de la página (por ejemplo [contact-form-7 id="123" title="网站联系表单"]), copie este código (se utilizará más adelante).

Añada el formulario a la página “Contacte con nosotros”.

Una vez creado el formulario, hay que colocarlo en la página “Contacto” del sitio web (o en cualquier otra página deseada) para que los visitantes puedan verlo:

1. Vaya a [Páginas] → [Añadir nuevo] (o edite una página de “Contacto” existente);
2. En el editor, sitúe el cursor en el lugar donde debe aparecer el formulario;
3. Pega el código corto que acabas de copiar (por ejemplo [contact-form-7 id="123" title="网站联系表单"]）；
4. Haga clic en [Publicar] o [Actualizar] y visite la página para ver el formulario.

IV. Formularios personalizados: añadir/eliminar campos (ajustados según las necesidades)

Si el formulario predeterminado no cumple los requisitos (por ejemplo, necesita añadir el campo “Teléfono” “Nombre de la empresa”), puede personalizarlo para cambiarlo:

Ejemplo: Añadir un campo “Teléfono” a un formulario

1. Vaya a [Contacto], busque el formulario que ha creado y haga clic en [Editar];
2. En el área de edición “Formulario”, busque el campo “Buzón”, haga clic en [Insertar etiqueta] → [Texto] en la barra de herramientas;
3. En la ventana emergente:
   • “Nombre” Rellene “tel” (identificación interna, minúsculas en inglés);
   • “Etiqueta” Rellene “Teléfono” (texto que se mostrará a los visitantes);
   • Marque la casilla “Campos obligatorios” (asegúrese de que los visitantes tengan que rellenarlos);
   • Al hacer clic en [Insertar etiqueta] se generará automáticamente una línea de código (por ejemplo [text* tel placeholder "请输入您的电话"]）；
4. Haga clic en [Guardar] para actualizar la página y el formulario tendrá el campo adicional “Teléfono”.

Tipos de campo habituales (a petición)

• cuadro de textoAdecuado para contenidos breves como nombre, número de teléfono, nombre de la empresa, etc;
• buzón: Específicamente para rellenar buzones de correo, que validarán automáticamente el formato;
• textarea: Adecuado para rellenar contenidos largos (por ejemplo, mensajes, descripciones de necesidades);
• menú desplegable: Adecuado para permitir a los visitantes seleccionar opciones (por ejemplo, “Tipo de consulta: consulta sobre productos / pregunta posventa / negociación de cooperación”);
• casillaEs conveniente marcar más de una opción (por ejemplo, “Servicios de interés: Desarrollo de sitios web / Optimización SEO / Creación de marca”).

V. Preguntas frecuentes para los recién llegados

1. ¿No recibes correos electrónicos después de enviar un formulario?Este es el problema más común que hay que resolver:
   • Compruebe que el buzón “Para” en los ajustes de “Correo” es correcto (¡no rellene uno incorrecto!). .;
   • Compruebe la carpeta “Spam” de su buzón (los correos electrónicos de formularios pueden ser diagnosticados erróneamente como spam);
   • Si sigues sin poder recibirlo, instala el plugin “WP Mail SMTP” (arregla la función de envío de correo de WordPress, los novatos pueden seguir el asistente del plugin para configurarlo).
2. ¿Cómo puedo cambiar el estilo (por ejemplo, fuente, color, anchura) de un formulario?El propio Contact Form 7 no admite cambios de estilo visuales y requiere un código CSS sencillo:
   • Método 1: Busca “CSS personalizado” en la configuración del tema (normalmente en [Apariencia] → [Personalizar] → [CSS extra]); Método 2: Ejemplo: Haz que el ancho del cuadro de entrada sea 80%, añade código:
   .wpcf7 input, .wpcf7 textarea { width: 80%; padding: 10px; margin-bottom: 15px; }
3. (Si no sabes escribir CSS, puedes buscar “Contact Form 7 Style Code” y copiar el existente para modificarlo).
4. ¿Se puede guardar automáticamente el formulario en el backend después de enviarlo?No soportado en la versión gratuita, los mensajes enviados se envían únicamente por correo electrónico. Si necesita guardarlos en el backend (para evitar la pérdida de correos electrónicos), puede instalar el plugin “Flamingo” (un plugin complementario desarrollado por el autor de Contact Form 7, dedicado a guardar los datos del formulario).
5. ¿Cómo puedo evitar que los robots envíen spam?Active la función “Anti-Spam”:
   • Edite el formulario y añada una línea de código en el área “Formularios”. [recaptcha](Google CAPTCHA);
   • Ve a [Contacto] → [Integración] y sigue las indicaciones para conectarte a Google reCAPTCHA (tienes que registrar una clave API gratuita, solo tienes que seguir el asistente).

En resumen: los formularios de contacto son la “última milla hacia la conversión”

Para los visitantes, un formulario de contacto es “la forma más rápida de expresar sus necesidades”; para los operadores de sitios web, es “un canal importante para captar clientes potenciales”.

Contact Form 7, aunque es necesario escribir manualmente los códigos cortos y cambiar los campos, es libre, flexible y estable, y después de aprender los conceptos básicos, puede satisfacer una variedad de necesidades de forma de simple a complejo. Recuerde: el formulario no debe ser demasiado complejo (cuantos más campos, más probable es que los visitantes se dan por vencidos), retener la información básica (nombre, información de contacto, necesidades) puede ser, por lo que el umbral de la comunicación se reduce al mínimo.