Active Campaign Valid Setup

Integrating Umbraco CMS and Forms with ActiveCampaign

A new tool for rendering ActiveCampaign forms and updating contacts/accounts

Adriancojocariu 500X500
Written by Adrian Cojocariu

Over the past couple of months, the term Composable DXP (cDXP) has been a hot topic in the digital world, pushing leading digital experience platforms (DXP) providers to extend their suites of products, delivering integrated solutions with a wide range of capabilities. We are pleased to add a new integration to the rack of many working with Umbraco, further strengthening the composable DXP offering. The new member of the CRM lineup for Umbraco is ActiveCampaign.

ActiveCampaign joins the likes of HubSpot and Microsoft Dynamics 365 - Marketing and delivers a powerful combination of integrations to the Umbraco backoffice. This comes in the form of a form picker and rendering component for forms managed within an ActiveCampaign account, and a custom workflow allowing form entries to be mapped to an ActiveCampaign contact record, a contact’s custom fields, or to associate a contact with an existing CRM account. As usual, it’s all open-source and the code is available on GitHub - for CMS and Forms -  where you can also provide feedback and raise issues).

 

Composable DXP graphic with integrations

 

If you want to read more about the other CRM integrations or explore their CRM environments, you can have a run through these blog posts:

This release sets the baseline for packages to follow, as the team’s goal will be to focus on Umbraco 10 and above (.NET6+); they will be shipped through NuGet, you can find the two ActiveCampaign packages here and here.

Without further ado, ActiveCampaign integrations require minimum versions of 10.1.0 for Umbraco CMS and Forms; please follow along as we deep dive into the integration specifics.

 

ActiveCampaign Overview

ActiveCampaign is a series of different marketing applications combined into one user-friendly platform that is designed to cater to the needs of various aspects of a business. As an email marketing and Customer Relationship Management platform, it provides the best tools for small and medium businesses. 

Amongst the main features we can mention:

  • Marketing automation
  • Conditional email content
  • Newsletters
  • Campaign, contact, and list reporting
  • Custom forms
  • Contact management
  • CRM and Sales automation
  • Built-in integrations
  • Drag-and-drop email designer
  • Automated series and more.

Their mission is to help growing businesses make meaningful connections with their customers by providing a personalized customer experience across all channels, and through the entire customer lifecycle, while having a scalable aggregated data warehouse that supports all types of analytics reports.

 

Working with ActiveCampaign

The free trial allows you to test the platform for 14 days, with up to 100 contacts and up to 100 email sends. The features available within the trial match the Professional tier of features. You can also use this getting started guide to help you with your next steps in exploring ActiveCampaign ecosystem.

With the ActiveCampaign API, you can sync contact information, view contact information, add contacts to accounts, and select and embed forms into an Umbraco web page. The API is structured around REST, HTTP and JSON and requires a valid API URL and Key. API endpoint URLs are organized around resources, such as contacts and forms.

To obtain your API URL and Key, you will need to go into your private portal and access Settings → Developer section, and you will find the access credentials group like this:

Screenshot: Developer section

 

Copy your API URL and Key, paste them into the Umbraco appsettings.json as highlighted in the sections below, and you will be set to go.

 

ActiveCampaign Forms for Umbraco CMS

This integration provides a form picker and rendering component for forms managed within your ActiveCampaign account, and it is open-sourced and available for review or inspiration here.

With the ActiveCampaign forms, you can collect information from leads and grow your lists; in short, forms are the doors to your contacts database.

To get started with ActiveCampaign forms, please use the following guide as a reference.

Now that you’re ready to use your account forms with Umbraco, please follow these steps to embed your first form.

Configuration

Once you have retrieved your API URL and Key, you will need to add them to your site’s configuration.

 

 

An invalid configuration will be signaled accordingly in the property editor and data type:

 

Screenshot: Active campaign Invalid API configuration Screenshot: Active campaign invalid API configuration Form Picker

 

Otherwise, a valid setup will look like this:

 

Screenshot: Active Campaign Valid setup

 

Rendering the form requires a strongly-typed model that passes the account name and the selected form ID to the custom JS script in the rendering view.

 

Using the CMS integration

To start using the package, you will need to create a new data type using the ActiveCampaign Form Picker property editor, then add it to your desired content type.

If the API configuration is valid, your ActiveCampaign form resources will be accessible by sending the API Key with the Api-Token header on each request.

 

Screenshot: Active Campaign Subscribe Form

 

The form will be rendered into your Umbraco page following the exact design you’ve added from the ActiveCampaign Form Designer component.

 

Screenshot: Active Campaign Rendered Form

 

Depending on the customization level of your ActiveCampaign account, there are different methods to integrate and render the forms. The one I’ve used for the Umbraco CMS integration covers all form types and uses simple embed code. This embed code uses JavaScript and any changes you make to your form will appear in your rendered form in real time.

Another option would be to use full embed code, a variant available for inline forms only, that uses CSS and HTML. This means that any changes you make to your ActiveCampaign form will not show up on your rendered form, you will need to re-paste the form code.

But we leave this decision up to you, as the front-end rendering is extendable and you can use your own Razor view. 

For front-end rendering, a strongly typed model will be generated by the property value converter, and using the HTML helper available, you will be able to render the form easily.

Just ensure your template has this reference:
@using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Helpers; and assuming your alias is activeCampaignForm render the form using

@Html.RenderActiveCampaignForm(Model.ActiveCampaignForm).

 

ActiveCampaign Contacts for Umbraco Forms

Contacts are the center of activity in ActiveCampaign and represent the people that the owner of an ActiveCampaign account is marketing or selling to. A contact is identified by a unique email address; you can create a contact just with only an email address, no other information is needed.

The default fields for storing information about a contact are:

  • Email - required
  • First Name
  • Last Name
  • Phone

You can also use custom fields to collect important information for your business. Using custom fields helps you better understand each contact in your account.

We have introduced the Accounts concept, which lets you capture details about the businesses you work with at an account level and keep it all in one place. With Accounts, you will be able to store and track details in account fields and see all contacts associated with a business.

This integration provides a custom workflow allowing form entries to be mapped to an ActiveCampaign contact, a contact’s custom fields, or to associate a contact with an existing account. As usual, the integration is open-sourced and available for review or inspiration here.

 

Configuration

For this particular integration, the configuration looks slightly different from the CMS one, as two new properties have been added:

  • AllowContactUpdate - Contacts within ActiveCampaign are identified by email address and duplicates are not allowed. If the workflow finds a contact already existing, by setting this option to true you can have the contact record updated with the latest information from the form.  This may not be appropriate for a publically available form; if so, you can leave the setting as false and the existing contact record won't be updated.  A similar flag is introduced for the HubSpot for Umbraco Forms package as well.
  • ContactFields - I have mentioned before that to create a contact you only need an email address. But you can require the other fields also, in case you want to ensure you have more detailed information about a contact.

 

 

An invalid configuration will prompt the user with an error message

 

Screenshot: ActiveCampaign Invalid Configuration

 

Workflow Setup

To start using the integration for Umbraco Forms you will need to attach the ActiveCampaign Contacts Workflow to a form, configure the mappings between the contact properties and the form fields, select an account if you want to associate the contacts, and map any contact custom fields.

Custom fields are created in ActiveCampaign by managing the fields of an existing contact.

 

Screenshot: Active Campaign Manage custom fields Screenshot: Active Campaign custom fields

 

While setting up the workflow, the list of custom fields will be retrieved from ActiveCampaign and made available for mapping:

 

Screenshot: Active Campaign custom fields mapping

 

If the rule of required fields is not met, then you will not be able to save the workflow.

 

Screenshot: Active Campaign required field rules not met

 

When a form that has the ActiveCampaign workflow attached is submitted, the contact is looked up by email, if a record is found and the AllowContactUpdate flag is false, the workflow execution will stop and a message logged. Otherwise, the custom fields will be added to the request object and then the contact record will get created or updated. If an account association has been specified, then the created contact will be associated with the account.

 

Conclusions

Hope you’ve enjoyed this journey into ActiveCampaign with this Umbraco duology for rendering ActiveCampaign forms and updating contacts/accounts. Stay tuned for more integrations for Umbraco products in the near future!

 

Loved by developers, used by thousands around the world!

One of the biggest benefits of using Umbraco is that we have the friendliest Open Source community on this planet. A community that's incredibly pro-active, extremely talented and helpful.

If you get an idea for something you would like to build in Umbraco, chances are that someone has already built it. And if you have a question, are looking for documentation or need friendly advice, go ahead and ask on the community forums.

Want to be updated on everything Umbraco?

Sign up for the Umbraco newsletter and get the latest news and special offers sent directly to your inbox