Formularios

Ideal para: Dueños de negocio, equipos de marketing y desarrolladores web.  

1. ¿Qué es el módulo de Formularios?

El módulo Formularios es tu taller para crear experiencias de contacto personalizadas sin escribir código. Puedes diseñar formularios de contacto, solicitudes de presupuesto, encuestas cortas o registros para eventos, y MGPanel se encarga del resto: guarda cada respuesta, crea clientes en el CRM y envía notificaciones automáticas a tu equipo.

• Para dueños de negocio y marketing: tienes una vista clara de todos tus formularios, botones directos para crear nuevos y un panel que muestra cuántas respuestas recibiste.
• Para desarrolladores: el constructor visual respeta el diseño responsive, permite ajustar anchos por campo y genera un shortcode listo para insertar en cualquier página del Sitio Web.

El flujo completo está integrado con la arquitectura multi-sitio de MGPanel, así que cada cuenta gestiona sus propios formularios y respuestas sin cruzar datos con otras marcas. emyi está disponible para ayudarte con dudas de validación o para sugerencias rápidas cuando la inspiración falte.

2. Acceso rápido y estructura del módulo

1. Entra a tu cuenta en MGPanel y ve al menú lateral → Formularios.
2. Verás un tablero con: Barra superior: buscador, filtro rápido y botón Nuevo formulario. Listado principal: nombre, código interno, número de registros y estado (borrador o activo). Acciones rápidas: ver el formulario publicado, editar, duplicar o eliminar.
   1. Barra superior: buscador, filtro rápido y botón Nuevo formulario.
   2. Listado principal: nombre, código interno, número de registros y estado (borrador o activo).
   3. Acciones rápidas: ver el formulario publicado, editar, duplicar o eliminar.

Cuando ingresas a un formulario específico, la navegación lateral divide el trabajo en cuatro pestañas:

• General: configuración básica y constructor de campos.
• Data: respuestas recibidas, métricas y detalle por cliente.
• Notificaciones: correos de alerta y futuras automatizaciones.
• Configuración: página de agradecimiento y mensaje personalizado.

Esta organización te permite avanzar paso a paso y compartir tareas: marketing puede redactar textos mientras un desarrollador ajusta los campos o define el mensaje final.

3. Constructor visual paso a paso

3.1 Crear o editar un formulario

1. Haz clic en Nuevo formulario o abre uno existente desde la tabla.
2. Completa los campos principales: Título: aparece en el encabezado del formulario público. Tipo: clasifica el objetivo (Contacto o Venta) para reportes futuros. Código: MGPanel lo genera automáticamente y sirve para insertar el formulario mediante shortcode. Estado: elige Activo cuando quieras recibir respuestas; usa Borrador mientras lo preparas.
   1. Título: aparece en el encabezado del formulario público.
   2. Tipo: clasifica el objetivo (Contacto o Venta) para reportes futuros.
   3. Código: MGPanel lo genera automáticamente y sirve para insertar el formulario mediante shortcode.
   4. Estado: elige Activo cuando quieras recibir respuestas; usa Borrador mientras lo preparas.
3. Presiona Vista previa para ver cómo se verá el formulario en tu sitio antes de publicarlo.

3.2 Añadir y organizar campos

El selector Añadir campos ofrece las opciones disponibles:

• Campo de texto: ideal para nombres cortos o cargos.
• E-mail: obligatorio para identificar contactos; MGPanel lo marca siempre como requerido.
• Párrafo: para mensajes o descripciones largas.
• Lista desplegable (Select): muestra opciones predefinidas.

Cada campo aparece como una tarjeta que puedes arrastrar para redefinir el orden. Los iconos de engrane ⚙️ permiten abrir la configuración extendida y el botón ❌ remueve el campo si ya no lo necesitas. Cuando haya más de un campo, la interfaz te muestra un placeholder "Soltar aquí" para que sepas dónde quedará.

3.3 Configurar cada campo

Haz clic en el ícono de engrane ⚙️ para abrir el panel lateral y ajusta:

• Ancho del campo: elige entre 100%, 50%, 33% o 25% para crear diseños en columnas.
• Placeholder: texto que guía al visitante antes de escribir.
• Estado activo / inactivo: útil cuando quieres ocultar un campo temporalmente sin perder la configuración.

Si trabajas con una lista desplegable, puedes editar las opciones desde el mismo campo, incluir nuevos valores o reordenarlos. Todas las tarjetas permiten cambiar el texto descriptivo directamente sobre la pantalla, así puedes adaptar el tono a tu marca en segundos.

4. Gestión de respuestas y estadísticas

La pestaña Data centraliza todas las respuestas. Desde ahí puedes:

• Ver el total de envíos y refrescar la lista con un clic.
• Identificar al cliente automáticamente: MGPanel busca los campos que contengan "nombre" y "email" para completar la ficha.
• Consultar el estado de cada respuesta (Sin procesar, Procesado, En revisión, Rechazado).
• Abrir un detalle completo para revisar la información original tal como la envió el usuario.

Debajo del listado encontrarás tarjetas con estadísticas rápidas: total de respuestas, cuántas han sido marcadas como procesadas, pendientes y la fecha de la última interacción. Todo esto se actualiza en tiempo real y, con el CRM, cada respuesta ya estará asociada al historial del cliente correspondiente.

5. Notificaciones y automatizaciones

Cada formulario puede avisarte automáticamente cuando llega una respuesta:

• Define un email principal que recibirá un mensaje incluyendo la información del cliente y hora del envío.
• Podrás agregar copias (CC), personalizar el asunto con variables como {form_title} y habilitar respuestas automáticas que confirmen la recepción al cliente.
• También notificaciones por WhatsApp para cuentas que así lo requieran.

Puedes activar o desactivar la respuesta automática con un interruptor y preparar el mensaje que se enviará. MGPanel guarda el texto en todas tus sesiones para que sigas iterando sin perder nada.

6. Configuración avanzada y mensajes personalizados

La pestaña Configuración te permite controlar la experiencia después del envío:

• URL de destino: redirige al visitante a una página específica como /gracias, una landing de venta o un recurso descargable.
• Mensaje de confirmación: usa el editor para redactar un agradecimiento con texto enriquecido, enlaces o incluso listas de próximos pasos.

MGPanel también protege cada formulario y, si tienes integrada la integración de reCAPTCHA en tu cuenta, el widget se activa automáticamente antes de enviar. Así blindas tu flujo contra bots sin afectar la experiencia de usuarios reales.

7. Publicar formularios en tu sitio web

Tienes dos formas de mostrar un formulario:

1. Enlace directo: desde el menú de acciones selecciona Ver. Se abrirá el formulario público en una página segura lista para compartir.
2. Shortcodes dentro del Editor Web: agrega el código en cualquier sección, página o plantilla del sitio.

Sintaxis básica:

{{formulario=CODIGO}}

Parámetros opcionales que puedes combinar:

• style="compact" para una versión más estrecha.
• class="mi-formulario" si quieres aplicar estilos CSS personalizados.
• theme="dark" para un fondo oscuro.
• title="false" oculta el encabezado del formulario.
• submit="Solicitar demo" cambia el texto del botón.

Ejemplo completo:

{{formulario=0002 style="compact" class="form-demo" submit="Solicitar demo"}}

Cuando guardes la página, el Editor Web procesará el shortcode y renderizará el formulario con todas sus validaciones. Si tienes dudas, emyi puede recordarte el código exacto y sugerir en qué sección del sitio colocarlo.

8. Personalización con CSS

El formulario usa clases mg-form-* reutilizables. Sobreescríbelas con CSS global (Configuración → Sitio web → CSS) o con la clase que agregues en el shortcode (class="..."), sin tocar el HTML:

• Contenedor y estructura: mg-form-container, mg-form, mg-form-title, mg-form-grid, mg-form-field, mg-field-label.
• Campos: mg-form-control, mg-input, mg-textarea, mg-select, mg-radio-group, mg-radio-option, mg-checkbox-group, mg-checkbox-option, mg-invalid.
• Acciones y mensajes: mg-form-actions, mg-btn, mg-btn-primary, mg-alert, mg-alert-success, mg-alert-danger.

Cubre todas las clases relevantes en un solo lugar — un override parcial deja el formulario a medio estilizar.

9. Consejos según tu perfil

9.1 Para dueños de negocio y marketing

• Duplicar formularios existentes acelera campañas especiales sin empezar de cero.
• Mantén los formularios cortos para mejorar la conversión; prioriza nombre, correo y una pregunta clave.
• Usa el estado Borrador para preparar campañas con antelación y actívalas justo cuando inicien.
• Revisa la pestaña Data cada mañana o activa notificaciones para responder rápido y mejorar la experiencia del cliente.

9.2 Para desarrolladores web

• Ajusta el ancho de cada campo para crear layouts en columnas sin escribir CSS adicional.
• Aprovecha el CSS global para estilos globales y usa clases personalizadas en el shortcode para detalles específicos.
• Antes de cambios grandes, crea un shortcode en una página draft para probar sin afectar la versión publicada.
• Si necesitas validar datos adicionales, complementa la lógica desde el Editor Web usando el JavaScript global, manteniendo los campos originales intactos.

10. Solución de problemas frecuentes

10.1 No puedo activar el formulario:

Posible causa: Falta el campo de email obligatorio.

Cómo resolverlo: Agrega al menos un campo de tipo E-mail (el sistema lo marca obligatorio automáticamente).

10.2 Las respuestas no llegan a mi correo:

Posible causa:  Email principal vacío o mal escrito.

Cómo resolverlo: Revisa la pestaña Notificaciones y confirma que el email esté completo y sin espacios.

10.3 El shortcode no muestra el formulario:

Posible causa:  Código incorrecto o formulario inactivo

Cómo resolverlo: Verifica el código en la pestaña General y asegúrate de que el estado esté en Activo. Guarda la página del sitio y recarga.

10.4 Veo campos que ya no uso:

Posible causa:  El campo está marcado como inactivo pero sigue apareciendo

Cómo resolverlo: Abre la configuración del campo, desactívalo o elimínalo para ocultarlo por completo.

10.5 Recibo respuestas con mucha basura:

Posible causa: El formulario está público sin protección adicional.

Cómo resolverlo: Activa reCAPTCHA desde integraciones para reducir spam.

10.6 Un visitante ve "Has enviado demasiados formularios recientemente":

Posible causa: Como protección contra spam, cada formulario acepta hasta 5 envíos cada 15 minutos desde la misma conexión o con el mismo correo.

Cómo resolverlo: Pide al visitante que espere unos minutos y vuelva a enviar. Si pruebas tu formulario muchas veces seguidas, usa un correo distinto en cada prueba o espera a que pase la ventana de 15 minutos.

11. Recursos adicionales y soporte

• emyi siempre está disponible dentro de MGPanel: pídele ejemplos de shortcodes o consejos para mejorar la conversión.
• Equipo de soporte: abre un ticket desde el chat de emyi, ve a la sección de Ayuda -> Sugerir mejoras -> Reportar un error o escribe a [email protected] con el código del formulario y descripción del problema.
• Partners certificados: si estás trabajando una campaña compleja, puedes solicitar apoyo desde la sección "Contrata a un partner".