Formularios de Contacto
Cree formularios de contacto profesionales que se integran a la perfección con su chatbot e incluyen protección contra spam incorporada.
Descripción general
Los Formularios de Contacto en ChatReact le permiten:
- Recopilar información estructurada de los visitantes
- Filtrar automáticamente las envíos de spam
- Recibir notificaciones de nuevas envíos
- Revisar y gestionar las envíos en el panel
Disponibilidad
Los Formularios de Contacto están disponibles en:
- Starter plan y superiores
Creación de un Formulario
Los formularios se gestionan por chatbot, por lo que cada formulario pertenece exactamente a un chatbot.
Paso 1: Navegar a Formularios
- Seleccione el chatbot al que pertenece el formulario
- Vaya a Forms en la barra lateral
- Haga clic en Create Form
El generador de formularios le guía a través de cuatro pasos: Basics, Fields, Design y Settings.
Paso 2: Básicos
| Setting | Description |
|---|---|
| Name | Nombre interno del formulario |
| Description | Descripción opcional para su equipo |
Los formularios nuevos están activos por defecto. Puede activar o desactivar un formulario más tarde mediante el interruptor Form Active en su pestaña General.
Paso 3: Agregar Campos
Los formularios nuevos vienen prellenados con una plantilla de contacto lista: Nombre, Email, Mensaje y Consentimiento de Privacidad, que puede editar, reordenar o eliminar. Use el botón Add Field para añadir más campos y las flechas arriba/abajo para cambiar su orden.
| Field Type | Description |
|---|---|
| Text | Entrada de texto de una sola línea |
| Email con validación | |
| Phone | Entrada de número de teléfono |
| Textarea | Texto de varias líneas |
| Select | Selección desplegable |
| Checkbox | Interruptor sí/no |
| Number | Entrada numérica |
Opciones de Campo
Para cada campo, configure:
- Label: Nombre para mostrar
- Placeholder: Texto de ayuda
- Required: Obligatorio
- Options: Para campos select/desplegable
Paso 4: Diseño
Estilice el formulario para que combine con su sitio web:
- Quick Presets: Puntos de partida para tema claro u oscuro
- Colors: Elija los colores primario, de fondo y de texto
- Button Text: Etiqueta personalizada para el botón de envío
- Success Message: Lo que verán los visitantes después de enviar
Una vista previa en vivo muestra sus cambios mientras los realiza.
Paso 5: Ajustes
Configure la protección contra spam (ver más abajo) y el Notification Email para las alertas de envíos.
Protección contra Spam
Filtro de Spam Potenciado por IA
Cada envío es analizado por IA en busca de:
- Patrones sospechosos
- Contenido de spam conocido
- Comportamiento similar a bots
- Indicadores de calidad
Umbral de Spam
Cada envío recibe una puntuación de spam de 0 (legítimo) a 100 (definitivamente spam). Use el control deslizante del umbral (0–100, por defecto 70) para decidir dónde trazar la línea — con Auto-Reject habilitado, los envíos con una puntuación de spam por encima del umbral se marcan como spam:
- Umbral más bajo: Filtrado más estricto — se marcan más envíos
- Umbral más alto: Más indulgente — solo se marca el spam evidente
Auto-Reject
Active Auto-Reject para gestionar el spam automáticamente:
- Los envíos con puntuación por encima de su umbral se marcan automáticamente como spam
- Permanecen en su lista de envíos, para que pueda revisarlos en cualquier momento
Los envíos de bajo riesgo (puntuación de spam por debajo de 30) se aprueban automáticamente, por lo que solo los envíos inciertos esperan su revisión manual.
Gestión de Envíos
Lista de Envíos
La página de envíos comienza con un resumen de sus totales: conteos de Total, Pending, Approved, Spam y Rejected.
Haga clic en un envío para expandirlo y ver:
- Fecha y hora del envío
- Información del remitente con etiquetas de campo legibles (p. ej., "Name", "Email" en lugar de identificadores técnicos)
- Puntuación de spam y estado
- El razonamiento de la IA detrás de la puntuación de spam
- Detalles técnicos como dirección IP y referente
Acciones sobre Envíos
| Action | Description |
|---|---|
| Approve | Aceptar un envío pendiente |
| Mark as Spam | Marcar un envío pendiente como spam |
| Reject | Rechazar un envío pendiente |
| Delete | Eliminar un envío permanentemente |
Approve, Mark as Spam y Reject están disponibles para envíos con estado Pending; Delete está disponible para todos los envíos.
Filtrado
Use el desplegable de estado para filtrar envíos: All, Pending, Approved, Spam o Rejected.
Incrustación de Formularios
Los formularios de contacto se incrustan directamente en su sitio web con un pequeño fragmento de script. Puede copiar el fragmento listo —incluyendo su ID de formulario— desde el panel: use el icono de copiar en la tarjeta del formulario o la pestaña Embed en la página de edición del formulario.
Incrustación Autónoma
Incruste formularios directamente en su sitio web:
<script
src="https://www.chatreact.ai/embed/form.js"
data-form-id="YOUR_FORM_ID"
async
></script>
También puede especificar un elemento contenedor personalizado usando el atributo data-container si desea que el formulario se renderice dentro de un elemento específico:
<div id="my-form-container"></div>
<script
src="https://www.chatreact.ai/embed/form.js"
data-form-id="YOUR_FORM_ID"
data-container="my-form-container"
async
></script>
Opciones de Incrustación
Ajuste la presentación con estos atributos opcionales del script:
| Attribute | Description |
|---|---|
data-align | Alineación horizontal: left, center o right |
data-max-width | Ancho máximo del formulario en píxeles (por defecto: 500) |
data-font-size | Tamaño de fuente base (por defecto: 14px) |
data-margin-bottom | Espacio debajo del formulario (por defecto: 40px) |
WordPress
Si su sitio utiliza WordPress, el plugin oficial de ChatReact le permite incrustar formularios con un shortcode:
[chatreact_form id="YOUR_FORM_ID"]
También se incluye un bloque de Gutenberg y un widget de Elementor. Consulte WordPress Integration para más detalles.
Estilizado
Los formularios incrustados usan los colores, el texto del botón y el mensaje de éxito que configuró en la configuración Design del formulario: cada formulario tiene su propio aspecto, independiente de su widget de chat. La familia tipográfica se hereda de su sitio web, por lo que los formularios se integran de forma natural.
Los formularios incrustados muestran un pequeño enlace "Powered by ChatReact". Los planes que incluyen white-label (Professional y superiores) eliminan esta marca.
Formularios Multilingües
La pestaña Translations en la página de edición del formulario le permite traducir el formulario para cada uno de los idiomas de su chatbot:
- Etiquetas de campo y textos de placeholder
- Texto del botón de envío
- Mensaje de éxito
Los formularios incrustados detectan automáticamente el idioma de su página y muestran la traducción correspondiente.
Notificaciones
Notificaciones por Email
Reciba alertas por email de nuevos envíos:
- Las alertas incluyen el nombre del formulario y un enlace directo a la página de envíos
- Si el Notification Email que configura coincide con la cuenta de un miembro del equipo, esa persona es notificada; de lo contrario, todos los owners, admins y managers reciben la alerta
- La entrega sigue las preferencias de notificación de cada destinatario — instantánea o agrupada en un resumen
Cuando Auto-Reject está habilitado, los envíos con una puntuación de spam muy alta (80%+) no activan notificaciones, para evitar saturar su bandeja de entrada con spam evidente. Los casos fronterizos todavía se informan para revisión manual.
Notificaciones en la Aplicación
Vea nuevos envíos en la campana de notificaciones:
- Haga clic para navegar al envío
- Marcar como leído (individualmente o todos a la vez)
Buenas Prácticas
- Mantenga los formularios cortos: Solicite solo la información esencial
- Use etiquetas claras: Evite jerga
- Pruebe el filtro de spam: Envíe entradas de prueba para calibrar
- Responda con prontitud: Las respuestas rápidas mejoran la satisfacción
- Revise la carpeta de spam: Compruebe falsos positivos