• Ir al contenido principal
  • Home
  • Equipo
  • Web
  • eCommerce
  • Automatizaciones
  • Blog
  • Contacto
ItSerra

ItSerra

Estudio de diseño web y programación

Cómo hacer en ActiveCampaign un formulario de suscripción bonito para tu web

En el post de hoy te voy a presentar las distintas formas que tienes de poner el formulario de ActiveCampaign en tu web.

Porque seamos sinceros, el formulario bonito, lo que se dice bonito, no es.

Pero no tan solo te voy a mostrar cómo ponerlo en tu web, si no como personalizarlo para que encaje al 100% con tu imagen de marca.

Tenemos tres formas de hacerlo:

  1. Personalizando lo poco que se puede el formulario que viene por defecto en ActiveCampaign e integrarlo en tu web.
  2. Usar un plugin para WordPress que te permita personalizar el formulario y conectarlo con ActiveCampaign.
  3. La forma más dura pero más eficaz de todas: programando.

1. Personalizar el formulario que viene por defecto en ActiveCampaign e insertarlo en mi web

El formulario de ActiveCampaign parece hecho como si los ingenieros tuvieran en mente el siguiente grito de guerra: ¡espartanos! Ya que no te permite personalizar mucho el formulario y al final queda muy pero que muy soso.

Con el editor del formulario, podrás personalizar lo siguiente:

Si el formulario va el línea o no

Formulario básico de ActiveCampaign en bloque
Formulario en bloque
Formulario básico de ActiveCampaign en línea
Formulario en línea

Uno de los principales inconvenientes de este editor es que cuando seleccionas en línea todos, y cuando digo todos, son TODOS, los campos se ponen en la primera línea.

Antes del nuevo reglamento de protección de datos (RGPD) estaba bien pero ahora, el formulario se ve de la siguiente forma:

Formulario de ActiveCampaign en línea con campos RGPD
Formulario en línea con los campos de RGPD

Como ves no es la forma más elegante, por lo que si usas este editor, te recomiendo que optes por la primera opción.

Estilos del formulario

Vas a poder hacer lo siguiente

Vas a poder personalizar lo siguiente:

Fondo y ancho del formulario

El color del texto

El borde del formulario completo: color, grosor y si quieres las esquinas cuadradas o redondeadas.

No puedes hacer

Que no vas a poder hacer:

Poner una imagen de fondo

Cambiar la tipografía

Cambiar si el contenido está alineado a izquierda, centro o derecha

Eliminar la curva de los campos de entrada

No podrás añadir un enlace a la política de privacidad

Formulario ActiveCampaign personalizado
Formulario personalizado en ActiveCampaign

Estilos del botón del formulario

Vas a poder personalizar lo siguiente:

Color de fondo y del borde

Texto dentro del botón

Color del texto

Si las esquinas las queremos cuadradas o redondeadas

Relleno

Qué no vas a poder hacer:

Centrar el botón

Hacerlo más ancho sin aumentar la altura

Añadir iconos al botón

A continuación te dejo el vídeo de cómo se haría.

Vídeo de personalización del formulario en Active Campaign

¿Cómo pongo en mi web el formulario de ActiveCampaign?

Para integrarlo en tu web voy a suponer que tienes tu web en desarrollada en WordPress. Para ello, vamos a instalar el plugin de ActiveCampaign.

Cuando instalamos el plugin veremos todos nuestros formularios y allí podremos escoger la opción de mantener el estilo del formulario que hemos puesto en ActiveCampaign o queremos que use los estilos de nuestro tema.

A continuación te pongo un ejemplo del formulario heredando los estilos de mi propio tema.

Formulario de ActiveCampaign heredando estilos del tema
Formulario de AC en la web con los estilos del tema

Si optamos por la primera opción debemos tener en cuenta que las tipografías no se cargarán y por lo tanto saldrá la que hay por defecto en ActiveCampaign.

Formulario de ActiveCampaign tal y como lo hemos configurado
Formulario de AC en la web tal y como está en AC

Hacer que herede los estilos de tu tema no garantiza que quede como te gusta, por ejemplo, en mi web el formulario de suscripción se ve de la siguiente forma.

Si te fijas no se parece mucho al que viene por defecto aún y heredando estilos.

Formulario de ActiveCampaign personalizado 100%
Formulario de la web de itSerra

Aquí te dejo un vídeo de como conectar ActiveCampaign con tu web

Vídeo de conexión del formulario de ActiveCampaign con tu web

2. Plugins con los que personalizar el formulario de ActiveCampaign en WordPress

Tabla comparación entre elementor pro y trhive leads para la conexión de Active Campaign con WodrPress
Dos de los mejores plugins para conectar tu WordPress con ActiveCampaign

2.1 Crear el formulario de suscripción de ActiveCampaign con Elementor Pro

Si tienes la web desarrollada usando el plugin de Elementor, puedes adquirir la versión de pago de Elementor, por 49$/año. Elementor Pro tiene una garantía de devolución de 30 días. Por lo que si no funciona de forma correcta en tu web, te devuelven el dinero.

Con Elementor Pro vas a poder conectar tu formulario con ActiveCampaign de una forma super sencilla y además podrás personalizar el formulario de forma intuitiva y sin tocar código.

Puedes añadir tantos campos como quieras y distribuirlos de aquella forma que desees.

¿Qué podrás hacer?

  • Distribuir los campos como desees incluso en una misma línea
  • Definir la curva de los campos de entrada
  • Decidir si quieres el botón a ancho completo o no y la alineación
  • Escoger el color de fondo de los campos de entrada
  • Añadir un enlace a la política de privacidad en el checkbox

¿Qué no podrás hacer?

Por desgracia la integración de Elementor con ActiveCampaign no es tan avanzada como me gustaría y actualmente tan sólo se pueden sincronizar los siguientes campos: email, nombre, apellido, teléfono, organización y etiquetas.

Elementor te creará un nuevo usuario en Active Campaign como máximo con esta información.

¿Cuándo es recomendable usar Elementor?

Puedes usar Elementor Pro si ya tienes Elementor instalado o si no tienes ningún maquetador visual instalado ya en tu instalación de WordPress como puede ser Visual Composer (WP Bakery), el Divi Theme o el Thrive Architect.

¿Porqué? Para evitar conflictos y además aligerar tu web. Estos maquetadores visuales generan código y acaban sobre cargando las webs por muy bien hechos que estén.

Además pueden generar conflicto entre ellos, por lo que es recomendable no tener más de uno.

Si ya tienes un maquetador visual instalado, es mejor que pruebes con alguna de las otras opciones que te propongo.

A continuación te dejo un vídeo donde te explico como se conecta Elementor Pro con ActiveCampaign y las personalizaciones que vas a poder hacer.

Conectar ActiveCampaigncon tu web usando Elementor Prop

2.2 Crear el formulario de suscripción de ActiveCampaign con Thrive Leads

Thrive Leads  fue uno de los primeros plugins en salir al mercado que permitía crear los formularios de forma personalizada y sincronizarlo con las herramientas de email marketing.

Una de las ventajas que tiene Thrive leads es que ya tiene algunas plantillas creadas, por lo que es súper cómodo a la hora de crear el formulario.

Pero por supuesto siempre puedes personalizarlo. El coste actual de una licencia es de 67$/año y tiene una garantía de devolución de 30 días. Por lo que si no funciona de forma correcta en tu web, te devuelven el dinero.

¿Qué podrás hacer?

  • Distribuir los campos como desees, incluso en una misma línea
  • Definir la curva de los campos de entrada
  • Decidir si quieres el botón a ancho completo o no y la alineación
  • Escoger el color de fondo de los campos de entrada
  • Añadir un enlace a la política de privacidad en el checkbox (pero te vas a tener que atrever a tocar un poco de código)

¿Qué no podrás hacer?

Integrar el formulario usando la API de Active Campaign. ¿Y esto qué es? Pues algo muy sencillo, que deberás copiar un código que te da ActiveCampaign y pegarlo. Pero no es nada complicado, mira el vídeo donde te explico paso a paso como hacerlo.

¿Cuándo es recomendable usar Thrive Leads?

Si tu web te la han desarrollado usando Thrive Architect ya tienes Thrive Leads integrado por lo que no deberías adquirir ningún plugin extra.

Además si tienes el Thrive Architect también podrás crear landing pages de forma sencilla e intuitiva.

Thrive Leads también es recomendable cuando tienes otros maquetadores visuales distintos a Elementor, como es el caso de WP Bakery u otras plantillas en WordPress como el Divi Theme. Ya que no acostumbra a dar errores.

Si no tienes ningún maquetador visual instalado, y lo tuyo no es crear páginas con Gutemberg, entonces te recomiendo usar Elementor Pro.

A continuación te dejo un vídeo de como se conecta Thrive Leads con ActiveCampaign y todas aquellas cosas que vas a poder personalizar.

Conexión Thrive Leads con ActiveCampaign

3. Conecta tu WordPress con ActiveCampaign programando

Esta es la mejor opción de todas, es la que seguro funcionará y dejará el formulario perfecto, pero tiene un inconveniente. Y es que es necesario saber programar.

Pero si no sabes programar te puedes plantear contratar a alguien para hacerlo. Porque seamos sinceros o tienes tiempo o tienes dinero.

Si haces números, te puedes encontrar con que te cueste menos un programador que los plugins, ya que su pago es anual, exceptuando que ya los tengas.

¿Pero cuánto me puede costar una programación?

Pues como siempre, depende. Depende de muchos factores, del número de formularios, de si se crea o no la secuencia de bienvenida…

Pero para hacerte a la idea, nosotros lo que cobramos por personalizar los formularios es: 85€ + IVA.

¿Y qué incluye exactamente?

  • Formulario Home
  • 3 formularios en servicios
  • Formulario de suscripción en el blog (Sidebar o tras un post)

Si quieres saber más, puedes ponerte en contacto con nosotros aquí.

¿Te ha quedado alguna duda? ¿Lo has intentado pero no lo consigues? ¿Lo has conseguido a la primera y quieres decirme algo? Déjame un comentario 😉

Interacciones con los lectores

Comentarios

  1. Iris dice

    marzo 11, 2021 en 1:28 pm

    Encantada con la información, había cosas que ya sabía y he aprendido otras nuevas.

    La duda que me surge y por la que he llegado a esta página aún no sé como resolverla.

    Llevo tiempo trabajando con Active Campaign y, personalmente, me parece una de las mejores herramientas de email marketing y aquí viene mi PERO, es fundamentalmente el tema de los formularios propios y los externos.

    He usado todas las funcionalidades aquí descritas y tengo que decir que lo que mejor funciona para realizar correctamente el doble op-tin y evitar retrasos en la entregabilidad, así como, temas de suscripción y desuscripción de listas, es usar directamente el formulario de AC o utilizar una herramienta como Thrive leads o Convert Pro que desencadenan los formularios de AC y la secuencia sería la misma.

    En este caso, entiendo que con Elementor pro no sería así, ¿verdad? Voy a empezar a trabajar en un nuevo proyecto y no me gustaría tener que invertir en más herramientas y la opción del formulario de Elementor me parece estupenda pero según veo lo que hace es añadirles directamente a una lista sin que siquiera hagan el doble op-tin, cosa que no hace el formulario de AC, hasta que no confirman el correo no se les añade a la lista.

    Muchas gracias por todo 🙂

    Responder
    • emserra dice

      marzo 25, 2021 en 1:43 pm

      Hola Iris,

      Por desgracia esto es así, es decir, con Elementor aunque ahora ya cargan los campos personalizados el doble optin normal no funciona. Aquí lo suyo sería crear una automatización para confirmar los emails y así tenerlo todo bien 😉

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

.

  Accepto la política de privacitat

itSerra estudio de programacion
  • Home
  • Equipo
  • Web
  • eCommerce
  • Automatizaciones
  • Blog
  • Contacto

ItSerra @2022

  • / Aviso Legal
  • / Política de cookies
  • / Política de privacidad

Gestionar el consentimiento de las cookies
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Ver preferencias
{title} {title} {title}