Formularios
Introducción
En la edición de nuestras landings, tenemos un elemento fundamental llamado formulario.
En el siguiente artículo lo veremos en profundidad paso a paso.
¿Tienes cuenta en ITOfunnels?
En nuestra academia te lo explicamos con todo tipo de detalles en éste vídeo. *
(*) Sólo accesible para usuarios de ITOfunnels
Form Fields
Permite añadir, modificar o borrar campos del formulario.
Para empezar puedes cambiar el nombre del formulario.
Por defecto, se incluyen los campos ‘Name‘, ‘Email‘ y ‘Message‘.
Cada uno, a simple vista puedes clonarlo o borrarlo pulsando en sus respectivos iconos posicionados a su derecha.
Si pulsas en cualquiera de ellos accederemos a la pestaña ‘CONTENT‘ en la que podrás:
- Configurar el tipo de campo que deseemos que sea (en caso de que queramos recoger un correo electrónico seleccionaremos el tipo 'email').
- Cambiar el texto que queremos que aparezca ENCIMA del campo ('label').
- Cambiar el texto que queremos que aparezca DENTRO del campo ('placeholder')
- Marcar si queremos que sea obligatorio rellenarlo antes de enviar el formulario ('required').
- Marcar la medida de anchura del campo ('width').
Si pulsas en la pestaña ‘ADVANCED‘ podrás:
- Marcar un valor por defecto, que no se pueda modificar por parte del usuario.
- Escribir un identificador de CSS (ID).
- Copiar el 'shortcode'. Si quieres enviar un email de autorespuesta una vez el usuario haya rellenado sus datos, este trozo de código representará el contenido que haya puesto el usuario en ese formulario. Es decir, si el usuario introduce su correo electrónico será necesario el 'shortcode' para poder insertar el correo electrónico del usuario como destinatario. Por esta razón, a la hora de realizar un mail (lo veremos más adelante en este mismo artículo) pondremos el 'shortcode' como destinatario para lograr realizar la autorespuesta. (NOTA: para tener un 'shortcode' adecuado es necesario introducir algún identificador de CSS).
Buttons
Permite modificar el contenido y estilo del botón del formulario. Por orden, podrás:
- Modificar el tamaño del botón ('Size').
- Modificar el ancho de columna del botón ('Column Width') con opción de entrar en Modo Adaptable pulsando en el icono del ordenador.
- Escoger la alineación del botón ('Alignment').
- Modificar el texto del botón ('Submit').
- Añadir un icono al botón ('Icon') escogiéndolo de la biblioteca de iconos o subiendo un archivo SVG.
- Escribir el identificador de CSS del botón (ID).
las opciones de Step buttons no las usamos porque son para formularios en varios pasos
Action After Submit
Permite añadir acciones que se realizarán después de que un usuario envíe el formulario (por ejemplo, abrir o cerrar una ventana emergente, enviar una notificación por correo electrónico, conectarse a un tercero como MailChimp, Redirect, etc.)
Después de que un usuario envíe un formulario, ¿entonces qué?
Nota: Una pregunta común de los diseñadores de formularios nuevos es: “He configurado mi formulario de ITOfunnels, pero no sucede nada cuando se envía. ¿Por qué?
Nota: La respuesta suele ser: Todavía no ha configurado las acciones 'Actions After Submit'
Una vez que se envíe un formulario, querrás que se realicen una o más acciones, y cada una de esas acciones requiere una pequeña configuración. Algunas acciones comunes incluyen:
Enviar los resultados del formulario por correo electrónico a una o más direcciones de correo electrónico.
Redirigir al usuario a una página de «Gracias».
Agregar información de suscriptor a un servicio de respuesta automática.
Agregar información de usuario a un CRM.
Enviar datos de formulario a un canal de Slack o Discord.
Abrir o cerrar una ventana emergente (Popup).
Puede conectarse con servicios de terceros como Mailchimp, Drip, Hubspot, Slack o Convertkit para procesar la información del formulario.
Lista de acciones
La lista de acciones de formularios de ITOfunnels disponibles actualmente incluye:
- Email 2
- Mailchimp
- Redirect
- Webhook
- Drip
- ActiveCampaign
- GetResponse
- ConvertKit
- MailerLite
- Slack
- Discord
- Popup
Pulsa el formulario para editarlo -> de la pestaña ‘CONTENIDO’:
Pulsa en ‘Acciones después de enviar’.
Agregue nuevas acciones haciendo clic dentro del campo Agregar acción. Esto mostrará una lista de acciones disponibles para elegir.
Enviar resultados por correo electrónico a los administradores del sitio
Elige la acción de correo electrónico. Esto añadirá una pestaña Email. La pestaña Email se utiliza para enviar los resultados del formulario al usuario administrador de su sitio web. Si también necesitas enviar un correo electrónico adicional al usuario que envió el formulario, consulte la opción Email2 a continuación.
Haga clic en la pestaña Email para abrir sus opciones.
To : Las direcciones de correo electrónico a las que se enviarán los resultados del envío del formulario. Agregue direcciones de correo electrónico adicionales separadas por comas.
Subject : el asunto del correo electrónico
Message : el cuerpo del correo electrónico. Por defecto, todos los campos del formulario se envían a través del código corto (shortcode): [all-fields]. ¿Quieres personalizar qué campos se envían? Copia el shortcode que aparece dentro de los campos que deseas enviar y pégalos aquí.
From Email : la dirección de correo electrónico «enviado desde»
From Name : el nombre «enviado de»
Reply-To : la dirección de correo electrónico a la que enviar respuestas
CC : direcciones de correo electrónico a CC
BCC : dirección de correo electrónico a BCC
Metadata : los metadatos disponibles se incluyen por defecto. Haz clic en la «x» en cada una para eliminar las que no desees incluir en el correo electrónico.
Send As : seleccione el formato para enviar el correo electrónico, ya sea HTML o Normal
Nota: Si tienes configurado un SMPT en el menú 'Correo' (como por ejemplo Sendgrid o Sendinblue) los campos 4, 5, 7 y 8 los tienes que dejar VACIOS. De esta forma te cogerá tus datos configurados de tu SMTP directamente.
Enviar confirmación por correo electrónico al usuario que envió el formulario
Configurar Email2 es muy útil.
Por ejemplo, es posible que desees enviar un correo electrónico de confirmación al visitante que completó el formulario.
Email2 es la acción a utilizar para esto. Para crear uno, realiza el mismo proceso que el anterior para Email.
Nota: En el campo 'Para', debe ingresar el código corto ubicado en la pestaña avanzada del campo de correo electrónico [field id = "email"].
Consejo: Puedes personalizar el correo electrónico de confirmación utilizando el nombre del remitente ('Hola [id del campo = "nombre"]').
Consejo: Úsa esta fantástica herramienta web para escribir tus emails en html -> Visitar WordtoHtml
Ejemplos (utilizando HTML):
<p> Bienvenido [field id = «name»] </p>
<p> Gracias por apuntarte a nuestras listas.</p>
<p> Te llamaremos al Teléfono que has introducido: [field id = «tel»] </p>
<p> Nos vemos pronto 🙂 </p>
Importante: Solo se pueden usar códigos cortos ubicados en la pestaña avanzada del widget de campos de formulario. No puedes usar códigos cortos desde ningún otro lugar aquí. Agregar otros códigos cortos desde otros complementos o en cualquier otro lugar provocará un mensaje de error del servidor. El shortcode debe escribirse exactamente como aparece en la pestaña avanzada del campo de formulario, con una excepción. Si el shortcode en la pestaña avanzada tiene el formato [field id = email], debes ajustar el nombre del campo entre comillas, por lo que deberá cambiar [field id = email] a [field id = "email"].
Redirigir a una página de 'Gracias'
Elige la acción Redirect.
Esto agregará una pestaña Redirect.
Haz clic en la pestaña Redirect para abrir sus opciones.
Redirect: ingrese la URL de la página para redirigir al usuario después del envío del formulario.
Agregar suscriptor a un servicio de email márketing
Elige cualquiera de los servicios de terceros.
Esto agregará una nueva pestaña para ese servicio.
Haz clic en la pestaña del servicio elegido para abrir sus opciones.
Clave API: Ingresa aquí la clave API para el servicio elegido. Primero debes configurar sus credenciales de API en la Configuración de integraciones (como se explica en la nota anterior). También puedes establecer diferentes credenciales de API seleccionando «Personalizado» (como se explica también en la nota anterior).
Audience / Custom API Key: Seleccione la lista o cuenta para enviar la información del formulario.
Nota: Si ya tienes integrado tu servicio en el menú 'Elementor' -> 'Integraciones' deja la API Key por defecto: 'Default'. Automáticamente te cogerá los datos de tu servicio integrado. Si por el contrario en esa página específica quieres añadir un servicio que no sea el que ya tengas integrado selecciona la opción 'Custom' e introduce la nueva API Key del servicio.
Additional Options
Tienes opción a poner un identificador al formulario (ID).
Si activas la casilla de ‘Custom Messages’ puedes modificar los siguientes mensajes:
Success Message: es el mensaje que aparecerá una vez enviado el formulario con éxito.
Error Message: es el mensaje que aparecerá si el formulario no consigue enviarse por algún error.
Required Message: es el mensaje que aparecerá cuando el usuario intente enviar el formulario sin haber rellenado algún campo obligatorio.
Invalid Message: es el mensaje que aparecerá cuando el usuario intente enviar el formulario y sea inválido.
Interacciones con los lectores