How to hack yourself a custom ActiveCampaign form component in React

A tale as old as time — you just want a simple newsletter subscribe form in your website. ActiveCampaign is a powerful paid CRM but has limited options for using their forms in your website: either (1) redirect users externally to ActiveCampaign to fill out a form, or (2) embed a form designed in ActiveCampaign into your page using the <script> tag. These options offer a poor user and developer experience as option (1) breaks flow by taking the user away from your site and option (2) is ugly in React.

Instead let’s do this the React way: make an ActiveCampaign form component. This will give you full control of the look and flow of your form experience, as well as open the door to easy i18n and dynamic styling that painlessly evolves with your site.

Creating the form and component

This will work with any ActiveCampaign form. Our example will be a form that collects user emails and subscribes them to a List in ActiveCampaign.

First, create a new form via the ActiveCampaign dashboard Forms > Create a form . Set the form’s action to subscribe to the list of your choice. I have a “Newsletter” List I want the emails to be sent to.

Click Create and you will be prompted to edit the form fields. The fields are all you care about here as you will style the form with your own CSS. In my case I only need an email field, so I removed the default Name field. The bulky branded form provided by Active Campaign should look like this:

Click Integrate in the upper right. The next page provides code for embedding or linking the form. We will borrow some of the code in the Full Embed section. Annoyingly you can only select the whole code so copy and paste it to a text editor so you can hunt for the HTML<form> tag. Copy the entire form tag and paste it into a new component in your project NewsletterForm.

newsletterForm.js

Go ahead and delete stuff you don’t need, like the ActiveCampaign branding. The key is to not delete input tags, especially the hidden ones. Most important are the hidden input fields on lines 6 and 7: their value attribute must match the form ID integer of your ActiveCampaign form. This is how ActiveCampaign knows which form to perform the submit action on. The form ID for any ActiveCampaign form can be found in the URL of the form’s edit page — take note of this fact in case you want to use the same component for multiple forms, in which case I suggest passsing the form ID as a prop.

You can add and rename classes, add placeholders, validations, etc. to achieve the custom styling you want.

That’s it! Now you can import this form component and use it anywhere in your site, such as the footer. Submitted emails will be collected in the List you specifed in ActiveCampaign’s form editor. From there you can handle the List in ActiveCampaign to your wishes.

Some extras…

Redirecting on form submit

By default ActiveCampaign displays a “thank you” message on submit. You can alternatively specify a redirect URL somewhere in your site. If you want to do this, edit your form in ActiveCampaign and open the Options tab, then in the On Submit section select Open URL and specify the target URL.

As my client’s site used multiple ActiveCampaign forms, I decided to economize by only creating one page for all form redirects and use url parameters to conditionally render different messaging based on each form, such as prompts for users to check their email and confirm their subscription.

One way to get the URL params from your project is with window.location

const formResponse = (    
window.location.href.match(/success\/\?type=(.*\b)/) ?          window.location.href.match(/success\/\?type=(.*\b)/)[1] :    
null 
)

With this formResponse you can conditionally render messaging like so:

<div className="page">        
  <div className="container">       
    <p>Your request was processed successfully.</p>        
    <br/>        
    <br/>        
    {formResponse === "confirm_email" && (
      <p>Please complete your subscription by check your email    inbox following the instructions.</p>        
)}
  </div>        
</div>

Multilingual forms

My client’s site was bilingual (French and English), so I used page context to get the current language of the page NewsletterForm was used in and conditionally render placeholders and labels.

Since I chose the redirect on submit, I made two identical forms in ActiveCampaign — the only difference was the redirect destination with one pointing to the English /en/success URL and the other to the French /fr/success. Each of these forms has a unique ID, so I modified my form component to take formID as a prop and conditionally assign the ID based on the langauge defined in the page context.

Then wherever I use my form component I ensure I assign the correct formID depending on the page langauge, such as here in my footer:

<NewsletterForm formId={currentLang === 'fr' ? 9 : 21}/>

where 9 is the form ID of my French redirect form, and 21 is the ID of my English redirect form.

Wrapping up

Making a custom component for your ActiveCampaign forms gives you total design and flow control of your form experience. It also makes i18n a breeze. Naturally, if you decide to ditch the branding in the form, be sure to include credits somewhere in your site mentioning ActiveCampaign as your form service.