Integrate Acumbamail form in WordPress

In this article, you will find all the available options to integrate your WordPress website with Acumbamail, either by integrating a subscription form created in Acumbamail or by connecting a form you have already created on your website with one of your Acumbamail lists.

What options exist to integrate Acumbamail and WordPress?

Given a list, Acumbamail allows you to create, design, and publish subscription forms associated with it. The first integration option with WordPress consists of including this form on your website. In this way, once integrated, this form will be displayed on your website, and the data filled in by users will be synchronized directly with your Acumbamail list.

However, that is not the only option. If you have already created and designed a form on your website and do not want to replace it with another, it is possible to synchronize the information collected directly with an Acumbamail list.

Include a form created in Acumbamail in WordPress

This section describes the different methods you can follow to integrate and display a subscription form created in Acumbamail on your WordPress website.

Acumbamail plugin for WordPress (obsolete regarding forms)

⚠️ The plugin is not compatible with the new block-based widgets editor introduced in WordPress 5.8. Therefore, this option is only valid for WordPress installations prior to that version. In later versions, the installation of the plugin is only recommended if you want to use the integration with Woocommerce.

The first option is to use the Acumbamail WordPress plugin, which allows you to easily create a widget that loads an Acumbamail form. You just need to add the widget to a specific area of your website (sidebar, header, footer, etc.) for it to load.

If you are using a specific page-building plugin (also known as page builders) instead of classic WordPress themes, you should check if they are compatible with WordPress widgets. If they are compatible, you will only need to locate the element or block associated with the Acumbamail widget within the page editor and drag it onto your page (having previously installed the Acumbamail plugin for WordPress).

For example, in the specific case of Elementor, you should locate the section "WORDPRESS," where the Acumbamail widget is located.

This is the simplest integration option. However, if you are using a specific page-building plugin that is not compatible with WordPress widgets, if you are using a version of WordPress later than 5.7, or if you want to include more than one form on your website (since the plugin only allows integrating one form), you can explore the other options.

HTML element in the WordPress Widgets editor

Since version 5.8, WordPress introduces a new block-based Widgets editor. If you are using this editor to customize your website's theme, you should follow these steps:

First, you need to create your form in Acumbamail and reach step 4, where you will find the integration script generated by Acumbamail.
In the WordPress widgets editor, within the area where you want to include your form (sidebar, header, footer, etc.), create a new element of type "Custom HTML."
In this element, you need to copy and paste the script (and the div if it is a classic form) generated for your form.
And that's it! Save the changes, and you will see how the form loads on your website.

HTML element in page builder plugins

Page builder plugins (such as Elementor, Gutenberg, or Divi, among others) allow you to easily create pages by dragging content blocks. If your page builder is not compatible with the use of widgets (or if you want to integrate more than one Acumbamail form on your website), the alternative is to locate a specific content element or block that allows you to embed code on the page. It will have a different name depending on the chosen page builder, but they all usually include an element of this type.

As a reference, for the mentioned page builders, they would be as follows:

Elementor has an HTML element.
Gutenberg has a code module.
Divi has a custom HTML block.
Thrive Theme has a custom HTML block.

The way to perform the integration is very simple:

First, you need to create your form in Acumbamail and reach step 4, where you will find the integration script generated by Acumbamail.
In the WordPress page editor, you need to drag the element that allows you to embed code to the position on the page where you want to display the form (only for the classic form, as the other forms have a predetermined position and it won't matter where the element is located within the page). Inside the element, you can copy and paste the script generated in Acumbamail (and the div element if it is a classic form). In the preview of the page builder, the form will not appear, but when you publish the changes, you will see how the Acumbamail form loads on the page.

The following image shows an example of configuration with the "HTML element" of Elementor.

Third-party Insert Headers and Footers plugin

Another alternative is to install a third-party Insert Headers and Footers type plugin. With these, you can easily incorporate the necessary script to load Acumbamail forms of type popup, exit intent, bar, or sidebar on your website. This script is available in step 4 when creating your form in Acumbamail. Among all the existing plugins, we recommend the following:

Insert Headers and Footers to easily include the Acumbamail loading script in the footer, or

Header and Footer Script Loader to include the loading script only on selected pages, also in the footer.

In the case of the classic form (which also requires including an HTML element of type div) or in the case of the popup that opens when clicking a button (which requires adding the form-trigger-acm attribute to that button on your page), it would also be necessary to add a small additional piece of Javascript code that either inserts that div into the page in the desired position or adds that attribute to the button. Although it can be achieved with a few lines of code, if you do not have technical knowledge, we recommend reviewing the other options.

Connect a form created in WordPress with an Acumbamail list

This section describes the available alternatives to synchronize the information entered in a form created on your WordPress page with an Acumbamail list.

Connect through external integration services

Acumbamail is available on the following application interconnection services: Zapier, Integrately, Pabbly Connect, or KonnectzIT.

Therefore, if you are a user of any of these services and the plugin you are using to build your website offers options to integrate its forms with these services via Webhook ( Zapier is usually the most common), you will only need to configure that form integration through that connector.

In this article, you can review in detail how to configure through Zapier.

Connect through incoming webhooks

Aside from the API, in Acumbamail you can create incoming webhooks, which allow you to execute a series of actions in Acumbamail from an external system in the simplest way: simply by calling a URL.

If the plugin you are using to build your website offers options to integrate its forms via Webhook, you will only need to:

First, configure an incoming webhook in Acumbamail to add subscribers to your list.
Once created, it will generate a URL that you will need to copy when configuring the webhook integration option of the form created with the page builder.
You just need to keep in mind that the form information is being sent in JSON format with one of these two "content-types": application/json or application/x-www-form-urlencoded, which are compatible with Acumbamail.

As an example, for the specific case of Elementor, given a form, you should look for the option Actions after submit and within this configure the Webhook option.

If you are not clear on how to configure the incoming webhook in Acumbamail, we recommend following these steps:

First, obtain a test URL by visiting the website https://webhook.site. For now, copy the URL and keep the site open.
Configure the outgoing webhook in WordPress. When creating it, it will ask you to enter a URL, which is the URL to which it will send the form information. Here you should enter the URL you obtained in the first step.
Submit your form so that you can see the exact information being sent from your WordPress to the URL at https://webhook.site.
Once you know the information sent (or "incoming payload"), you can now create the incoming webhook in Acumbamail. More information here.
Once configured, the incoming webhook from Acumbamail will provide you with a custom URL. To finalize the configuration, you need to go back to the outgoing webhook configured in WordPress and replace the test URL you entered with the Acumbamail URL. This way, you will have completed the configuration, and the next time the form is filled out, the data will be sent and synchronized in Acumbamail.

Connect using the Forms: 3rd-Party Integration plugin

This method is only valid if you have created your form with one of the following WordPress plugins: Ninja Forms, Contact Form, or Gravity Forms.

To use this method, the first thing to keep in mind is that, even if you are not displaying it on your page, you will still need to create the form in Acumbamail (within the interest list). You won't have to worry about the design, as it is irrelevant. You will only need to add to this form the same fields that you have in your WordPress form (which you will need to have previously added as fields of the list). This is necessary to enable an integration URL that you will need when configuring the plugin.

Once you have the form ready in Acumbamail, with the help of the Forms: 3rd-Party Integration plugin, you will be able to connect the fields of your form in Acumbamail with the fields of your form in WordPress, so that when a user fills out the form, the information will be synchronized with the Acumbamail form. For more details, you can consult the specific article that explains the integration using the 3rd-Party Integration plugin.