Integrar formulario de Acumbamail en Wordpress

En este artículo encontrarás todas las opciones disponibles para integrar tu página web de WordPress con Acumbamail, bien sea integrando un formulario de suscripción creado en Acumbamail, o bien conectando un formulario que tengas ya creado en tu página web con una de tus listas de Acumbamail.

En este artículo:

¿Qué opciones existen para integrar Acumbamail y WordPress?

Dada una lista, Acumbamail permite crear, diseñar y publicar formularios de suscripción asociados a la misma. La primera opción de integración con WordPress consiste en incluir este formulario en tu página web. De esta forma, una vez integrado, este formulario se mostrará en tu página web y los datos que rellenen los usuarios se sincronizarán directamente con tu lista de Acumbamail.

Sin embargo, esa no es la única opción. En caso de que ya hayas creado y diseñado un formulario en tu página web y no quieras reemplazarlo por otro, es posible sincronizar la información recopilada directamente con una lista de Acumbamail. 

Incluir en WordPress un formulario creado en Acumbamail

En este apartado se describen los distintos métodos que puedes seguir para integrar y mostrar un formulario de suscripción creado en Acumbamail en tu página web creada con WordPress.


Plugin de Acumbamail para WordPress (obsoleto respecto a formularios)

⚠️ El plugin no es compatible con el nuevo editor de widgets basado en bloques introducido en WordPress 5.8. Por lo tanto esta opción solo es válida para instalaciones de WordPress previas a esa versión. En versiones posteriores solo se recomienda la instalación del plugin en caso de querer emplear la integración con Woocommerce.

La primera opción consiste en emplear el plugin de WordPress de Acumbamail, el cual permite crear fácilmente un widget que carga un formulario de Acumbamail. Solo tienes que añadir el widget a un área concreta de tu página web (sidebar, header, footer, etc.) para que se cargue.

Si en lugar de los temas clásicos de WordPress estás usando un plugin específico para construir páginas (también conocidos como  page builders), debes comprobar si son compatibles con los widgets de WordPress. En caso de ser compatibles, solo tendrás que localizar el elemento o bloque asociado al widget de Acumbamail dentro del editor de páginas y arrastrarlo en tu página (habiendo instalado previamente el plugin de Acumbamail para WordPress).

Por ejemplo, en el caso específico de  Elementor, debes localizar el apartado "WORDPRESS", donde se ubica el widget de Acumbamail.

Esta es la opción de integración más sencilla. No obstante, si estás usando un plugin específico para creación de páginas que no sea compatible con los widgets de WordPress, si estás usando una versión de WordPress posterior a la 5.7 o bien quieres incluir más de un formulario en tu página web (ya que el plugin solo permite integrar un formulario) puedes explorar el resto de opciones.

Elemento HTML en el editor de widgets de Wordpress

Desde la versión 5.8, WordPress introduce un nuevo editor de Widgets basado en bloques. Si haces uso de este editor para personalizar el tema de tu página web, debes seguir los siguientes pasos:

  1. Primero debes crear tu formulario en Acumbamail y llegar hasta el paso 4, donde encontrarás el script de integración generado por Acumbamail.

  2. En el editor de widgets de WordPress, dentro del área donde quieras incluir tu formulario (sidebar, header, footer, etc.), crea un nuevo elemento de tipo "Custom HTML".

  3. En este elemento debes copiar y pegar el script (y el div si es formulario clásico) generados para tu formulario.

  4. ¡Y listo! Guarda los cambios y verás como se carga el formulario en tu página web.

Elemento HTML en los plugins para construir páginas

Los plugin de construcción de páginas o page builders (como Elementor, Gutenberg o Divi, entre otros) permiten crear fácilmente páginas arrastrando bloques de contenido. En caso de que tu page builder no sea compatible con el uso de widgets (o bien quieras integrar más de un formulario de Acumbamail en tu página web), la alternativa consiste en localizar un elemento o bloque de contenido específico que te permita incrustar código en la página. Tendrá un nombre diferente según el page builder elegido, pero todos suelen incorporar un elemento de este tipo. Como referencia, para los page builder mencionados serían los siguientes:

La forma de realizar la integración es muy sencilla:

  1. Primero debes crear tu formulario en Acumbamail y llegar hasta el paso 4, donde encontrarás el script de integración generado por Acumbamail.
  2. En el editor de páginas de WordPress, debes arrastrar el elemento que permite incrustar código a la posición de la página donde se quiera mostrar el formulario (solo para el clásico, ya que el resto de formularios tiene una posición predeterminada y dará igual donde se ubique el elemento dentro de la página). Dentro del elemento, podrás copiar y pegar el script generado en Acumbamail (y el elemento div si es un formulario clásico). En la previsualización del page builder no aparecerá el formulario, pero cuando publiques los cambios, verás cómo en la página sí se carga el formulario de Acumbamail.

En la siguiente imagen se muestra un ejemplo de configuración con el "elemento HTML" de Elementor.

Plugin de terceros de tipo Insert Headers and Footers

Otra alternativa es instalar un plugin de tipo Insert Headers and Footers. Con estos puedes incorporar fácilmente a tu página web el script necesario para cargar los formularios de Acumbamail de tipo popup, exit intent, de barra o lateral. Este script está disponible en el paso 4 al crear tu formulario en Acumbamail. De entre todos los plugins existentes, recomendamos los siguientes:

En el caso del formulario clásico (que requiere incluir también un elemento HTML de tipo div) o en el caso del popup que se abre al hacer clic en un botón (que requiere añadir el atributo form-trigger-acm a dicho botón de tu página), también sería necesario agregar un pequeño fragmento de código Javascript adicional que bien, inserte ese div en la página en la posición deseada, o bien añada ese atributo al botón. Aunque se puede lograr con pocas líneas de código, si no tienes conocimientos técnicos te recomendamos revisar el resto de opciones.

Conectar un formulario creado en WordPress con una lista de Acumbamail

En este apartado se describen las alternativas disponibles para sincronizar con una lista de Acumbamail la información introducida en un formulario creado en tu página de WordPress.


Conectar a través de servicios de integración externos

Acumbamail está disponible en los siguientes servicios de interconexión de aplicaciones:  Zapier, Integrately, Pabbly Connect o KonnectzIT.

Es por ello que si tú eres usuario de alguno de estos servicios y el plugin que estés usando para construir tu página web ofrece opciones de integración de sus formularios con estos servicios a través de Webhook ( Zapier suele ser el más habitual), solo tendrás que configurar esa integración de formulario a través de dicho conector.

En este artículo puedes revisar al detalle cómo realizar la configuración a través de Zapier.


Conectar a través de webhooks de entrada

A parte de la API, en Acumbamail puedes crear webhooks de entrada, que te permiten ejecutar una serie de acciones en Acumbamail desde un sistema externo de la forma más sencilla: simplemente llamando a un URL. 

Si el plugin que estés usando para construir tu página web ofrece opciones de integración de sus formularios a través de Webhook solo tendrás que:

  • Configurar en primer lugar en Acumbamail un webhook de entrada para añadir suscriptores a tu lista.
  • Una vez creado, te generará una URL que tendrás que copiar al configurar la opción de integración a través de webhook del formulario creado con el page builder.
  • Solo debes tener en cuenta que la información del formulario se esté mandando en formato JSON con uno de estos dos "content-types": application/json o application/x-www-form-urlencoded, que son con los que Acumbamail es compatible.

Como ejemplo, para el caso específico de Elementor, dado un formulario, debes buscar la opción de Acciones después del submit y dentro de esta configurar la opción de Webhook.


En caso de no tener claro cómo configurar el webhook de entrada en Acumbamail, te recomendamos seguir estos pasos:

  1. Obtén en primer lugar una URL de pruebas visitando el sitio web https://webhook.site. Por el momento copia la URL y mantén el sitio abierto.
  2. Configura el webhook de salida en Wordpress. Al crearlo, te pedirá introducir una URL, que es la URL a la cual enviará la información del formulario. Aquí debes introducir la URL que obtuviste en el primer paso.
  3. Haz un submit de tu formulario para que en https://webhook.site puedas ver la información exacta que se envía desde tu Wordpress a la URL.
  4. Una vez que ya conoces la información enviada (o "payload de entrada") ahora sí puedes crear el webhook de entrada en Acumbamail. Más información aquí.
  5. Una vez configurado, el webhook de entrada de Acumbamail te proporcionará una URL custom. Para finalizar la configuración, debes irte de nuevo al webhook de salida configurado en Wordpress y sustituir la URL de pruebas que introdujiste por la URL de Acumbamail. De esta manera, habrás finalizado la configuración y la siguiente vez que se rellene el formulario, los datos serán envíados y sincronizados en Acumbamail.

Conectar empleando el plugin Forms: 3rd-Party Integration

Este método solo es válido si has creado tu formulario con uno de los siguientes plugins de WordPress: Ninja Forms, Contact Form o Gravity Forms. 

Para emplear este método lo primero a tener en cuenta es que, aunque no estés mostrándolo en tu página, tendrás que crear igualmente el formulario en Acumbamail (dentro de la lista de interés). No tendrás que  preocuparte del diseño, ya que es irrelevante. Únicamente tendrás que añadir a este formulario los mismos campos que tengas en tu formulario de WordPress (y que tendrás que haber añadido previamente como campos de la propia lista).  Esto es necesario para habilitar una URL de integración que necesitarás cuando configures el plugin.

Una vez tienes listo el formulario en Acumbamail, con ayuda del plugin Forms: 3rd-Party Integration podrás conectar los campos de tu formulario en Acumbamail con los campos de tu formulario en WordPress, de forma que cuando un usuario rellene el formulario, la información se sincronizará con el formulario de Acumbamail. Para más detalle, puedes consultar el artículo específico donde explica la integración empleado el plugin 3rd-Party Integration.