Formularios

Cuando desarrollas sitios web dinámicos, con frecuencia necesitarás habilitar canales de comunicación con tus usuarios.

A través de estos canales tus visitantes pueden realizar acciones como: ponerse en contacto contigo, reportar algún problema, suscribirse a tu blog, etc.

La mejor forma de establecer esta vía de comunicación es mediante los Formularios web, los cuales no solo les permitirá a los usuarios el ponerse en contacto contigo, sino que también te serán útiles para registrar información de interés que te ayude a ofrecer un mejor servicio al cliente.

En MGPanel contamos con una herramienta para que puedas crear múltiples formularios y agregarlos a tu sitio web de forma sencilla.

Si quieres aprender cómo hacerlo, te lo explicamos a continuación.

¿Qué son los Formularios?

Los formularios son estructuras HTML compuestas de campos donde el usuario puede introducir información para ser procesada. Estos campos están hechos con etiquetas especiales como input, select, button, entre otras.

Dependiendo de la información solicitada, esta puede ser almacenada en una base de datos o ser usada para la comunicación entre el visitante y un web master.

Tipos de Formularios

Los formularios se suelen agrupar según el tipo de información que solicitan al usuario y, aunque se pueden encontrar infinidad de formularios en internet para fines distintos, aquí nos enfocaremos en los tres tipos principales:

• Formulario de contacto

  Los formularios de contacto se usan para establecer una ruta de comunicación con tus visitantes. Mediante estos formularios los usuarios pueden contactar contigo, hacer preguntas sobre tus productos o servicios y reportar errores de la página.

• Newsletter

  El Newsletter es un formulario que sirve para registrar la información de contacto de los visitantes interesados en tus productos o servicios.

  Con esta información puedes notificar a los usuarios registrados cuando agregues contenido que sea de su interés, como un nuevo artículo, un nuevo producto o alguna promoción disponible.

• Formulario de cotización

  Si tu empresa ofrece servicios que dependen de ciertos parámetros, necesitarás un formulario especializado donde los usuarios puedan colocar la información esencial para brindarles una cotización.

  Mediante estos formularios puedes ofrecer respuestas personalizadas según los requerimientos del cliente de una forma rápida y profesional.

  Ahora que ya sabes que son los formularios y cuales son los principales tipos, te enseñaremos cómo puedes integrarlos a tu sitio web en MGPanel.

Mis Formularios

En MGPanel puedes crear múltiples formularios desde el Gestor de Formularios. Para acceder a este gestor, dirígete al menú lateral izquierdo y selecciona la opción “Formularios”.

Dentro del Gestor de Formularios encontrarás una tabla con todos los formularios que hayas creado, ordenados según su antigüedad. En esta tabla podrás visualizar diversos campos relacionados con el formulario y realizar acciones como ver la data, editar y eliminar.

Crear Formulario

Los Formularios se crean desde el Gestor de Formularios, en la opción “Nuevo Formulario”. Una vez que hayas ingresado encontraras unos campos de configuración general y otros de configuración de los campos. Te los explicaremos de forma más detallada a continuación:

Información General del Formulario

Son las configuraciones que afectan al formulario y no dependen de los campos agregados.

Agregar Campos al Formulario

Los campos conforman el cuerpo de los formularios, representan cada espacio donde el usuario puede agregar información.

Por defecto encontrarás dos campos en tus formularios los cuales son Nombre e E-mail, pero puedes agregar tantos como creas conveniente.

Para agregar nuevos campos a tus formularios presiona el botón “Agregar Campo”, luego deberás rellenar los espacios según el campo que necesites. A continuación, te explicamos para que sirve cada uno:

Cuando hayas terminado de agregar los campos a tu formulario, presiona guardar y ¡Listo! Habrás creado un formulario profesional.

Ahora, solo falta mostrarlo dentro de tu sitio web. Vayamos a eso.

Agregar Formulario al sitio web

Cada formulario tiene un código que MGPanel asigna automáticamente para identificarlo y que permita “invocarlo”. El método para hacerlo es colocar dentro de tu editor HTML el código del formulario usando el siguiente formato:

“##_” + CODIGODELFORM

Supongamos que el código de tu formulario es “FORM0001”, entonces te debería quedar algo como esto:

"##_FORM0001"

Basta con escribir esto dentro tu código HTML para que tu formulario se muestre en el módulo o contenido donde lo hayas invocado.

Configurar e-mail de respuesta automática

Las personas pueden acceder a tu sitio web en cualquier momento, por lo tanto, pueden rellenar tus formularios a cualquier hora del día. Una vez que ellos te escriben a través de un formulario, esperan recibir una respuesta en el menor tiempo posible.

Por supuesto, no es práctico estar atento 24/7 dentro del correo para responder cada mensaje apenas llega, por esta razón te ofrecemos una solución para que tus usuarios obtengan una respuesta provisional inmediata y tu recibas notificaciones cada vez que alguien te escribe en tu página web: los e-mails de respuesta automática.

¿Qué es un e-mail de respuesta automática?

Un e-mail de respuesta automática es un mensaje predeterminado que puedes colocar en MGPanel para que las personas que te escriben a través de un formulario reciban una confirmación de recibido de tu parte.

Estos mensajes son únicos para cada formulario que coloques en tu sitio web, por lo que puedes ofrecer un mensaje para contacto, otro para cotizaciones, etc.

Además, puedes editar estos mensajes directamente desde el tab de E-mails dentro del Editor de Formulario.

Para poder configurar los mensajes debes agregar una dirección de correo, la cual se usará para enviar los correos automáticos a tus usuarios y donde recibirás las notificaciones de que te han escrito.

¿Cómo configurar e-mail de respuesta automática?

E-mails de contacto: Agrega uno (1) o varios e-mails separados por coma (,) a los cuales llegara una notificación cada vez que algún usuario responda a tu formulario.

URL Página de destino: Aquí podrás colocar la URL a donde se redireccionara al usuario luego de que responda a tu formulario. (Si queda vacía será redireccionado a la misma URL donde se encuentra el formulario).

Como te mencionaba anteriormente tienes dos tipos de correos: el que reciben tus usuarios y el que recibes tú como web master. El primero lo llamaremos de Contacto y el segundo de Administrador.

Cuando ingreses a la configuración de e-mails de tu formulario, te encontrarás con el editor HTML en el cual crearas un mensaje para el correo de Contacto.

Probablemente, no tengas idea de como elaborar una estructura para este correo, pero no te preocupes, es más sencillo de lo que parece. Al igual que un sitio web, puedes crear un mensaje usando código HTML y CSS.

Para ayudarte un poco a comprender la estructura te dejaré un ejemplo de correo a continuación:

E-mail de respuesta automática de Contacto:

	<div style='text-align: center; background: #eee; max-width: 600px; margin: auto; padding: 20px 15px; color: #323232;'>
	<img src='tulogo.png' width='180px' style='padding-top: 20px;'>
	<h1>Gracias por tu mensaje</h1>
	<p>En minutos te estaremos contactando.</p>
	<br>
	<br>
	<p>Copyright © 2022 <b>Tu empresa</b>,<br>Todos los derechos reservados. <a href='#'>www.tupagina.com</a><br><a href='mailto:<soporte@tupagina.com'>soporte@tupagina.com</a></p>
</div>

Como ya te habrás dado cuenta, el cuerpo del correo esta creado únicamente en HTML y usando CSS dentro del atributo style de las etiquetas.

¡OJO! Este ejemplo es genérico y no te servirá para tu sitio web a menos que los personalices y agregues tu información de contacto.

Para probar los mensajes puedes enviarte un correo usando un formulario de tu sitio web luego de haberlos configurado.

¿Lo lograste? ¡Esperamos que sí! Si tienes alguna duda puedes contactarnos a través de la comunidad de programadores MGPanel o por nuestra página de contacto.

Consultando la información capturada a través de tus formularios

Te explicamos paso a paso como consultar la información capturada por tus formularios en MGPanel:

• Desde el panel principal de MGPanel en el menú vertical de la izquierda vamos a dar clic sobre el ítem FORMULARIOS.
• Estando en nuestro GESTOR DE FORMULARIOS (Donde podremos Editar, eliminar y consultar la INFORMACIÓN de los formularios previamente creados) ubicamos el formulario a consultar y damos clic en el primer icono de ACCIONES (📒 DATA) de este formulario.
• Se cargarán todos los registros que tiene ese formulario mostrando NOMBRE, E-MAIL Y LA FECHA DEL REGISTRO
• Para obtener la información detallada de cada registro nos ubicaremos en el registro a consultar y damos clic en el primer icono de ACCIONES (👁️‍🗨️ VER) de este registro.
• Allí se desplegara una ventana emergente (POP-UP) que nos mostrara toda la información a detalle de ese registro.

De esta forma podemos consultar el listado general por formulario y la información detallada de cada registro capturado.

Recuerda que en los correos de notificación que recibes, también estará esta información.

Para más ayuda o soporte no dudes en escribirnos a soporte@mgpanel.org

Activar reCAPTCHA en tus formularios

Podemos activar o desactivar el reCAPTCHA de nuestro formulario dando clic sobre el check ubicado en la parte superior izquierda dentro de la configuración general del formulario.

* Se requiere previamente registrar tu sitio web en Google reCAPTCHA. Puedes hacerlo dejando un correo a soporte@mgpanel.org.

Recibe notificaciones A TRAVÉS DE WHATSAPP

A continuación encontrarás un paso a paso de como configurar MGPanel para recibir notificaciones de mensajes en tu WhatsApp:

• En nuestro panel principal de MGPanel buscamos la opción de CONFIGURACIÓN (⚙️)
• Damos clic sobre la pestaña FACTURACIÓN
• Ubicamos el campo MÓVIL y agregamos el número de WhatsApp al que queremos que lleguen las notificaciones cada vez que un usuario complete algún formulario de nuestro sitio web.

Importante:

• Agrega el código de país y sin espacios, ejemplo: 571234567890
• Puedes agregar múltiples números de teléfono separándolos por coma (,) ejemplo: 571234567890, 570987654321