How to Integrate Shack Forms with MailChimp

In this tutorial, you will learn how to use Shack Forms to create a sign-in form for your MailChimp lists.

Creating a MailChimp sign-up form using Shack Forms gives you a few benefits.

  • Your sign-up form will have all of the cool effects and themes offered by Shack Forms! 
  • You will be able to further direct the form sender to any page on your site. 
  • You will be able to automatically store submitted data in your Google Sheets document. 
  • You will be able to track your sign-up form performance and analyze it in Google Analytics.

In this tutorial, you will use Shack Forms to create a MailChimp sign-up form with three fields:

  1. First Name.
  2. Last Name.
  3. Email Address:

The form will be displayed in a lightbox. It will be displayed when a Homepage visitor tries to exit the page. 

Let's get started.


Step #1. Authenticate your Joomla site in MailChimp

For your Shack Forms module to work with MailChimp, you need to authenticate your site's domain name in MailChimp.

This authentication is a three-step process:

  1. Under your site control panel, create an email account. 
  2. Configure your desktop or tablet or mobile email client to receive emails sent to this email address.
  3. Verify this email address in your MailChimp account.

Let's take a look at this process in more detail.

  • Log into your site hosting control panel and create an email account. Consult your hosting documentation or tech support should you need help in this step.
  • Configure your desktop or tablet or mobile email client to receive emails sent to this email address. Consult your hosting documentation or tech support should you need help in this step.
  • Login to your MailChimp account.
  • In the top right corner, click Account: 

click account

  • On the next screen, click Settings > Domains:

click settings domains

  • You will see the "Verify Domain" box, prompting you to enter an email address that contains the domain name you wish to verify. Enter the email address you created in the previous step and click the Send Verification Email:

enter the email address

  • You will see "Your verification email is on the way!" message. Check the inbox your set for this email address.
  • Open the verification email sent by MailChimp. Copy the verification code that you will find at the bottom of the email:

copy the verification code

  • Get back to your MailChimp account. Enter the verification code into the field and click the Verify button:

enter the verification code and click verify

  • You will see "Domain successfully verified!" message. Click Done to close its box:

domain successfully verified

Excellent! You just verified your Joomla site domain name in MailChimp. You are now ready to connect your Shack Forms module to MailChimp. 


Step #2. Connect Shack Forms to your MailChimp account

A Shack Form integration with MailChimp starts from connecting the form with your MailChimp account.

You do this by setting your MailChimp API key in your Shack Form.

  • Log to your MailChimp account.
  • In the top right corner, click Profile:

click profile

You will see your profile overview page.

  1. Click Extras.
  2. Click API keys:

under extras click api keys

You will be taken to the API keys page.

  1. Find Your API keys group of settings.
  2. Copy your API key:

copy your api key

  1. In your Shack Form, click on the Integrations tab.
  2. Select Mailchimp from the Choose provider field.
  3. Copy your MailChimp API key into the API key field and click Save:

select mailchimp provider copy the key

  • Click inside the Subscribe to lists field:

click inside the subscribe to list field

  • You will see your MailChimp audiences/lists. Click on the list(s) you would like your site visitors to be able to subscribe to. You will see your audiences appearing inside the Subscribe to lists box with a cross icon next to them. You can click on a list cross icon to deselect the list:

lists selected

  • Click Yes for the Double Opt-in parameter:

click yes for double opt in

  • Click Visible on front and unchecked for the Visibility of lists setting:

click on visible on front and unchecked

  • Enter some text into the Subscribe label box. This text will be displayed on your Shack Forms sign-up form next to each audience/list. For my tutorial, I entered Subscribe to our newsletters:

subscribe to our newsletters label

  • Click Save: 

Good job! Your Shack Form is now connected to your MailChimp account.

You can now use your MailChimp sign-up form fields in your Shack Form.


Step #3. Synchronize your Shack Form and MailChimp fields

In this step, you will create your Shack Form fields matching your MailChimp list sign-up fields. 

You just need to copy your MailChimp fields names into your Shack Form.

  • In your MailChimp account, go to Lists:

go to lists

You will be taken to the Lists page. For the required list:

  1. Click on the little arrow pointing down.
  2. Click Signup forms:

click signup forms

  •  On the next page, click Form builder:

click form builder

You will see the Form builder page. 

  1. Select the Signup form option under the Forms and response emails.
  2. Make sure you opened up the Build it tab:

make sure you see signup form

  1. Click inside the First Name field.
  2. You should see the Fields setting tab slid out. Copy the FNAME value from the Field tag field:

click inside the first name field copy its name

  • In your Shack Form, click the Fields tab.
  • Paste the FNAME inside the Alias name field:

paste fname into alias name

  • Repeat this step for the Last Name and Email fields.
  • Click Save. 

Excellent! You now connected your Shack Form with your MailChimp account.

You also synchronized your Shack Form and MailChimp fields.


Step #4. Configure the Shack Forms

In this last step, you will define on what page(s) and how your Shack Form/MailChimp sign-up form will be displayed.

For the purpose of this tutorial, your form will be displayed on the Home page, in a lightbox, and when a visitor attempts to exit the Home page.

  • In your Shack Form, click the Menu Assignment tab.
  • Assign the form to the Home menu item:

assign the form to the home menu item

Next, let's simplify the form's lightbox and hide the toggler tab:

hide the form toggler tab

  1. Click on the Toggler Tab.
  2. Click No for the Show toggler tab parameter.

set show toggler tab to no

Well done! In conclusion, you will set this form to display as a lightbox. You will set it to be shown to the Home page visitor attempting to exit it.

  1. Click the Module tab.
  2. Select the Lightbox Window for the Layout setting:

select lightbox window

  1. Click the Events tab.
  2. Set the Auto-popup parameter to On exit.
  3. Make sure the Auto-popup count is set to 0 (zero):

set on exit

  • Click Save or Save & Close.

Now go to your site frontend. Refresh the browser and point your mouse cursor away from the browser. 

You should see your MailChimp sign-up form displayed in a Shack Form lightbox:

final result


Step #5. Test your Shack Form

  • Fill in the First Name and Last Name fields with dummy names.
  • Enter one of your actual email addresses into the Email Address field.
  • Click within the Yes, please ... checkbox.
  • Send the form.
  • Check the inbox. You should see the email marked with the Confirm Subscription button:

confirm subscription

  • Open this email.
  • Inside the email body, click on the Yes, subscribe me to this list button:

click to confirm your subscription

You will be taken to the MailChimp's Confirm Humanity page.

  1. Click within the I'm not a robot checkbox.
  2. Click Subscribe to list:

confirm humanity

You will see the Subscription Confirmed page:

subscription confirmed

  • Check your MailChimp list to which you set your Shack Form. You will see the subscription listed:

subscribed listed