Esta guía demostrará la versión más actualizada del editor de formularios (lanzado en noviembre 2018). Si está modificando un formulario creado con la versión antigua del editor, por favor consulte esta guía. Para obtener más información sobre el nuevo editor haga clic aquí.
Descripción general
En este tutorial le mostraremos cómo crear un formulario de suscripción en solo unos clics. Podrá personalizar el diseño del formulario, el contenido, el comportamiento y los campos que quiera recopilar.
Puede utilizar estos enlaces para ir directamente al paso que le interese:
- Crear el formulario
- Personalizar el diseño del formulario
- Seleccionar una o varias listas de contactos
- Personalizar la configuración del formulario
- Personalizar los mensajes del formulario
- Compartir el formulario
1. Crear un formulario de suscripción
En el menú superior, haga clic en Contactos.
A continuación, haga clic en Formularios.
Para comenzar, haremos clic en el botón de Crear un formulario de suscripción.
Póngale un nombre a su formulario, esto le ayudará a organizar sus formularios y a encontrarlos en su cuenta.
2. Personalizar el diseño del formulario
Para lograr un gran nivel de personalización, puede modificar lo siguiente:
- Fondo
- Fuentes, tamaños y colores del texto
- Campos del formulario (añada tantos campos como quiera)
- Instrucciones (explique a los usuarios cómo suscribirse)
- Mensaje de éxito (confirme al usuario que se ha suscrito correctamente)
Nuevos tipos de campo para el formulario
Añada campos adicionales a su formulario para recopilar información sobre sus suscriptores y complete automáticamente los atributos de contacto que ya tiene (puede tratarse de texto, números, fechas, categorías o valores booleanos).
Añada la Confirmación opt-in a su formulario para contar con un registro del consentimiento de sus suscriptores para recibir sus e-mails promocionales y newsletters.
También puede añadir un campo de suscripción multilista que permita que sus suscriptores indiquen sus intereses o preferencias durante su suscripción para colocarlos en las listas correspondientes.
Cada nuevo campo del formulario corresponderá a un atributo de un contacto o lista de contactos:
- Texto (atributo de contacto)
- Número (atributo de contacto)
- Fecha (atributo de contacto)
- Suscripción multilista (lista de contactos)
- Doble opt-in (atributo de contacto)
Captcha
Recomendamos encarecidamente el uso de la confirmación mediante reCAPTCHA para evitar que los spambots añadan datos falsos a sus listas. Para añadir un bloque de captcha a su formulario, primero deberá crear un reCaptcha en Google.
Cree su reCaptcha en Google
- Vaya a https://www.google.com/recaptcha/admin/create e inicie sesión en su cuenta Google.
- Añada una Etiqueta a su formulario.
- Seleccione reCAPTCHA v2.
Atención: reCAPTCHA v3 no es compatible con Sendinblue. - Elija el tipo de reCaptcha que necesite.
- Complete los campos de Dominio correspondientes según la manera en que quiera compartir su formulario (Formulario > 6 - Compartir).
- Si comparte su formulario con la opción de Compartir rápidamente o Iframe: añada el dominio sibforms.com. Se trata del dominio que usa Sendinblue para alojar el formulario.
- Si integra su formulario con HTML o HTML Simple: añada el dominio del sitio web donde aparecerá el formulario. Por ejemplo, si el formulario va a estar en http://www.sitioweb.com, añada sitioweb.com en este campo.
Atención: Si no tiene claro cómo compartirá el formulario, puede añadir los dos dominios mencionados anteriormente.
- (Opcional) Añada otros Propietarios si es necesario. Los propietarios tendrán los derechos de la clave del sitio. Cada dirección de e-mail debe estar vinculada a una cuenta Google.
- Acepte los Términos del servicio de reCAPTCHA.
- Haga clic en Enviar.
¡Su reCaptcha se ha creado! Ahora verá una página en la que se muestra la Clave del sitio y la Clave secreta. Necesitará estas claves en el siguiente paso para configurar su reCaptcha en el formulario.
Añada su reCaptcha al formulario de Sendinblue
- Arrastre y suelte el bloque de captcha a su formulario.
- Copie y pegue la Clave del sitio y la Clave secreta del procedimiento anterior en sus respectivos campos.
- Seleccione Nombre de la etiqueta para añadir una etiqueta a su reCaptcha.
- Seleccione Texto de ayuda para añadir una descripción debajo de su reCaptcha.
- Seleccione Captcha invisible únicamente si eligió «Marca de reCaptcha invisible» al crear su reCaptcha en Google.
Puede recibir estos mensajes de error una vez que comparta el formulario:
- Dominio no válido para la clave del sitio: compruebe el campo de su dominio.
- Tipo de clave no válida: si selecciona reCAPTCHA v3, puede recibir este mensaje de error en su formulario. Solo se admite reCAPTCHA v2.
Personalizar el formulario
Puede arrastrar y soltar varios bloques de elementos, como las secciones de Título, Texto, Imagen y Divisor, a su formulario del mismo modo que con los Campos del formulario. Para personalizar aún más el diseño de su formulario, haga clic en la pestaña de Diseño del formulario del panel de la izquierda del editor de formularios.
Podrá personalizar:
- El color o la imagen de fondo.
- El estilo, el formato, el color y el tamaño de la fuente, así como la alineación del título, el texto, una etiqueta y el texto de ayuda.
- El diseño, ancho, alineación, borde, opacidad y esquinas de un bloque.
- El color de los botones, el estilo, tamaño, formato y color de la fuente de los botones, así como la alineación del botón y las esquinas.
- El color, estilo, formato, color, tamaño y alineación de la fuente, color de fondo, color de los bordes y tipo de esquinas de la ventana del mensaje de alerta/error.
Vista para móviles
Todos los formularios tienen un diseño responsivo de manera predeterminada. Puede ver cómo aparecerá su formulario en dispositivos móviles seleccionando la opción de vista previa en la parte superior del editor de formulario.
3. Selección de listas
Una vez que haya terminado de diseñar su formulario, el siguiente paso es seleccionar la lista (o listas) donde se guardarán los contactos una vez que se envíe el formulario. Puede escribir el nombre de la lista o la carpeta que contiene la lista para buscarlas.
También puede crear una nueva lista.
4. Configuración del formulario
En esta sección puede seleccionar qué tipo de mensajes recibirán sus suscriptores (si quiere que reciban alguno).
4.1. Ninguna confirmación: Seleccione esta opción si no quiere enviar un e-mail de confirmación a la persona se suscriba.
Después de hacer clic en el botón de suscripción de su formulario, sus contactos serán redirigidos automáticamente a la URL que introduzca, ej.: http://www.mi-sitioweb.com, o a una página de confirmación. Si no selecciona ninguna URL ni página de confirmación, aparecerá un mensaje de confirmación de la suscripción en la parte superior del formulario sin cambiar de página. Para configurar una URL de redirección o página de confirmación, marque la casilla de Página de confirmación.
4.2. Confirmación simple: Marque esta opción si quiere enviar un e-mail de confirmación a los nuevos suscriptores para confirmar a partir de ahora recibirán sus e-mails. A continuación, seleccione la plantilla SMTP que le gustaría que el sistema utilizara para enviar la confirmación. La plantilla predeterminada, titulada «Plantilla predeterminada - Confirmación simple», está disponible y puede personalizarla o crear otra plantilla de confirmación.
Información relevante: Para crear una nueva plantilla SMTP, vaya a la pestaña llamada Transaccional y haga clic en Plantillas, a continuación, haga clic en el botón de Nueva plantilla. Si crea una nueva plantilla SMTP, asegúrese de activarla, de ese modo aparecerá como opción cuando configure un formulario con Confirmación simple.
También puede seleccionar una dirección de redirección o página de confirmación.
4.3. Confirmación con doble opt-in: Para el proceso de suscripción mediante doble opt-in es necesario que el suscriptor realice dos pasos para que se añada a su lista de e-mail.
- Su nuevo suscriptor introduce su dirección de e-mail en su formulario de suscripción.
- Una vez que envía el formulario, el suscriptor puede hacer clic en el e-mail de confirmación.
La confirmación mediante doble opt-in permite a los suscriptores confirmar que quieren recibir sus e-mails. Esta función elimina las suscripciones no deseadas o posibles molestias. Esta opción también está recomendada para el cumplimiento del RGPD.
Ventajas de la confirmación con doble opt-in:
- Para sus contactos:
- Permite que sus contactos verifiquen que no cometieron ningún error al registrarse.
- Para usted:
- Tiene la certeza de que el suscriptor está realmente interesado en recibir sus e-mails.
- Como el suscriptor confirma su dirección de e-mail dos veces, puede reducir enormemente el número de hard bounces (direcciones de e-mail no válidas) de sus campañas.
- Le sirve para protegerse contra una posible competencia malintencionada que añada direcciones de e-mail no válidas a sus formularios para dañar su reputación.
- Cumple con las leyes y reglamentos en vigor en algunos países: el doble opt-in es obligatorio en varios países, así como en la Unión Europea.
El e-mail de confirmación debe ser una de sus plantillas SMTP y debe tener la opción de doble opt-in (ver la información más abajo). Puede utilizar:
- La plantilla predeterminada que proporcionamos «Plantilla predeterminada - Confirmación doble opt-in».
- O una nueva plantilla creada por usted.
a. E-mail de opt-in. Puede crear o seleccionar su propia plantilla de e-mail opt-in. Para hacerlo, vaya a Plantillas SMTP y haga clic en Crear una plantilla.
- En el primer paso, Configuración, haga clic en Mostrar las Opciones Avanzadas y agregue una nueva Etiqueta con el siguiente texto exacto:
optin
- Cree su plantilla con uno de los editores de newsletters.
- A continuación, edite la plantilla a su gusto e inserte exactamente este texto para el enlace de doble opt-in:
{{ doubleoptin }}
- Por último, guarde y active la plantilla y vuelva a su formulario de suscripción.
b. Página de confirmación (opcional). Use esta herramienta si quiere redirigir a su suscriptor sea a una página concreta de su sitio web (ej.: una página de confirmación o la página de inicio de su sitio web) después de registrarse.
c. E-mail de confirmación final (opcional). Use esta herramienta si quiere que sus suscriptores reciban un e-mail de confirmación final una vez que finalicen el proceso de doble opt-in. Del mismo modo que sucede con los otros e-mails de confirmación, la plantilla predeterminada se llama simplemente «Plantilla predeterminada - Confirmación final». Puede encontrarla y modificarla desde sus Plantillas SMTP.
Información relevante: SendinBlue creará automáticamente una lista «Doble opt-in temporal» para guardar la información de contacto de los suscriptores que todavía no han completado el segundo paso del proceso de doble opt-in (confirmar sus direcciones de e-mail).
Su base de datos de contactos de SendinBlue también se actualizará para integrar una nueva columna de atributos titulada «Doble opt-in». Los contactos que se hayan añadido mediante el doble opt-in tendrán el valor de «Sí» en esta columna. Si el contacto se suscribió mediante otro tipo de formulario, el valor de este campo será «No». Si no usó un formulario de suscripción de SendinBlue para añadir contactos a su base de datos, este campo se quedará en blanco.
4.4. Configuración avanzada (opcional)
a. E-mails temporales. Seleccione esta casilla en Configuración avanzada para rechazar las direcciones de e-mail temporales creadas con servicios de e-mail temporales como Yopmail, MyTrashMail, etc. Estas direcciones no se añadirán a su base de datos de contactos obtenidos a partir de los formularios.
b. Comportamiento del formulario completado. Esto le permitirá ocultar el formulario una vez que el suscriptor lo haya enviado. Si no selecciona esta casilla, su formulario aparecerá para que el visitante lo rellene incluso después de que lo haya completado y enviado correctamente.
5. Mensajes del formulario
Desde aquí puede personalizar/editar los mensajes de éxito y error y los mensajes de alerta que se mostrarán en su formulario.
6. Compartir su formulario
Una vez que haya hecho clic en Guardar, el siguiente paso es hacer clic en Compartir para obtener el código para integrar el formulario en su sitio web o un enlace para compartirlo rápidamente. Existen tres tipos de código:
- Iframe: Este código es fácil de integrar y le permite integrar el formulario en una ventana pop-up o página de su sitio web.
- HTML: Este código es mucho más personalizable, con animación Ajax para los mensajes.
- HTML sencillo: Esta es una versión simplificada del código HTML que no necesita llamadas JavaScript.
Información relevante: Los captchas que necesiten llamadas JavaScript no son compatibles con el código de este formulario.
