Skip to main content

Creating a subscription form connecting to Mailchimp

We’re going to use the MB Frontend Submission extension of Meta Box to create a subscription form and connect it with an email marketing service - Mailchimp to manage and send emails fast and easily.


We need to install the following tools:

Finally, you need to have a Mailchimp account. In case you haven’t had it, go here to create a new one.

1. Creating a new post type for subscribers

To save and review subscriber data easily and conveniently, firstly, you need to create a new post type. I named it as Subscribers.

Go to Meta Box > Post Types > New Post Type. Then modify the general information for the post type and publish it.

create new post type for subscribers

After publishing, a new menu named Subscribers will appear as below:

Newly created post type appears in the menu

2. Creating a subscription form

I’m going to add two basic custom fields for a subscription form: Name and Email.

Besides, to save the database space, I will use the name which is submitted into the form for the post title, and the email for the post content. So, the ID of the Name field will be post_title, and the ID of the Email field will be post_content which are two default IDs in WordPress for title and post content.

Go to Meta Box > Custom Fields > Add New. Then choose the field type as Text for both Name and Email fields.

Create new custom fields

Pay attention to the ID of these fields, remember to set the right IDs as I said above.

After that, move to the Settings tab and in Location, choose the Subscriber post type.

Set location for the created fields

Normally, after publishing the field group, its ID will be auto-generated in the Field Group ID box. You can also change the field group ID as you desire. This ID will be used in the next step.

The IDs are auto-generated

3. Displaying the subscription form on the front-end

To display the subscription form on the website, which means displaying the custom fields on the frontend, and allow users to fill in the fields right on the frontend, you need to use the MB Frontend Submission extension.

I created a Subscribe page to display the form on page.

First, go to Meta Box > Custom Fields to see all the field groups that you created on site. Then, you will see a column that show shortcodes like this:

Create a column showing shortcodes

Copy the shortcode of the field group that we use for the subscription form. This shortcode will be like this:

[mb_frontend_form id='subscription-form' post_fields='title,content']

Now, go to the Subscribe page and paste the shortcode into it.

Copy and paste the shortcode

To customize the subscription form, you can add some attributes as following:

[mb_frontend_form id="subscription-form" ajax="true" recaptcha_key="..." recaptcha_secret="..."]


  • subscription-form: id of the field group we’ve created
  • ajax=”true”: enable loading ajax
  • recaptcha_key: Google reCaptcha site key
  • recaptcha_secret: Google reCaptcha secret key

I use Google reCaptcha to avoid spamming. In addition, to integrate Google reCaptcha in the frontend form, simply enter the site key and the secret key into the shortcode above.

Read this documentation to get a detailed guide for reCaptcha and other attributes of the form.

Here is how the subscription form displays on the page.

The subscription form displays like this

4. Styling the subscription form

To style the form, go to Appearance > Customize > Additional CSS. Then add the CSS code below to make the form more appealing:

.rwmb-form {
background: #e2e8f0;
padding: 24px;
border-radius: 4px;
max-width: 768px;
margin: 0 auto;
.rwmb-form .rwmb-meta-box {
display: flex;
justify-content: space-between;
grid-gap: 12px;
.rwmb-form .rwmb-field {
flex: 1;
.rwmb-form .rwmb-field:not(:last-of-type) {
margin: 0 0 12px;
.rwmb-form .rwmb-label,
.rwmb-form .rwmb-field .rwmb-input {
float: none;
width: 100%;
margin-bottom: 5px;
.rwmb-form button, .rwmb-form input {
width: 100%;

This is how it looks after customizing with CSS:

Customize the form with css

5. Connecting the subscription form to mailchimp

We’re going to integrate the subscription form to MailChimp to send the subscriber information submitted into the form to MailChimp. With this information, you can use MailChimp to send email marketing campaigns to these subscribers easily.

To do it, use the library below to connect to the MailChimp API:

Access the link and download the Mailchimp.php file, then insert it into your theme.

For example, I’m using the eStar theme and its child theme, so I create an inc folder and copy the Mailchimp.php file to it.

Use the theme for example

Next, add this code to the functions.php file:

include get_stylesheet_directory() . '/inc/MailChimp.php';
use \DrewM\MailChimp\MailChimp;

function insertList() {
$key = 'your API keys mailchimp';
$list_id = ' id of the list that you want to integrate';
$merge_var = array(
'FNAME' => $_POST['post_title'],
'LNAME' => '',
$mailchimp = new MailChimp( $key );

$result = $mailchimp->post( '/lists/' . $list_id . '/members', array(
'email_address' => $_POST['post_content'],
'merge_fields' => $merge_var,
'status' => 'subscribed',
) );
return json_encode( $result );

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {
if ( 'subscription-form' === $config['id'] ) {
}, 10, 2 );


  • 'rwmb_frontend_after_process': the hook we have after the form is submitted;
  • subscription-form: id of the field group we’ve created in step 2;
  • To get the API key of MailChimp, log in to your MailChimp account, and then copy the API key in the Your API keys section.

Copy the API key

  • Press the Create A Key button to get the API key

Get the API key

  • To get the id of the list, go to Audience > All Contacts, click Settings, and choose Audience name and defaults:

Get the ID of the list

  • In the Audience ID section, the list of id will appear:

the list appear in the Audience ID section


Mailchimp often changes their interface, so the next time going to Account MailChimp, it may look different from this post. However, the process is still the same.

After that, make a test to check whether the system works well. I filled in the subscription form with the name and email as below:

Check whether the system works well

And here they are displayed in the email list of MailChimp:

The information displays in the email list

That’s how we have done the integration between the subscription form and your MailChimp account.