Create a Subscription Form and Connect It to Mailchimp with MB Frontend Submission
Tags: wordpress
Published: 2021-03-09 03:17:59

<!-- wp:paragraph -->
<p>Creating a subscription form is not rocket science today. Website owners often <strong>create a subscription form and then integrate it with an email marketing service</strong> to manage and send emails more quickly and conveniently. And one of the most common email services today is Mailchimp.</p>
<!-- /wp:paragraph -->
<p><!--more--></p>
<!-- wp:paragraph -->
<p>With WordPress by your side, you can create a subscription form on a whim, and then connect it to Mailchimp. This can be done easily with MB Frontend Submission - an extension of Meta Box plugin.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To do it, follow 5 steps below:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Before Getting Started</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You need the following plugins to get started:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><a href="https://metabox.io/">Meta Box</a>: to use Meta Box Builder and MB Frontend Submission plugins, you need to install the core plugin Meta Box first. It’s free and available on <a href="https://wordpress.org/plugins/meta-box">wordpress.org</a>.</li>
<li><a href="https://metabox.io/plugins/mb-frontend-submission/">MB Frontend Submission</a>: it’s a premium extension of Meta Box that allows users to submit content right on the front end of the WordPress website. In addition to the subscription form, it can duel with many other types of form.</li>
<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomy</a>: it’s a free extension of Meta Box plugin that helps you create custom post types easily. Otherwise, you can use the free tool <a href="https://metabox.io/post-type-generator/">Post Type Generator</a> (read the documentation <a href="https://docs.metabox.io/post-type-generator/">here</a>).</li>
<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to create custom fields, in addition to coding manually, you should use Meta Box Builder to save your time. It’s a premium extension of Meta Box plugin that has a drag-and-drop intuitive interface to create fields.</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>And, of course, you need a Mailchimp account. If you still haven’t had an account, create a new one <a href="https://login.mailchimp.com/">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After install and activate all the above plugins, follow these steps:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Step 1: Create a New Post Type for Subscribers</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First of all, to save and review subscriber data easily and conveniently, you need to <a href="https://metabox.io/create-wordpress-custom-post-types/">create a new post type</a> called <strong>Subscriber</strong>. This can be done with the <strong>MB Custom Post Type &amp; Custom Taxonomy </strong>extension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to <strong>Meta Box</strong> &gt;<strong> Post Types </strong>&gt; <strong>New Post Type</strong>. After that, enter the name and the slug of the post type and then click <strong>Publish</strong>.</p>
<p><img class="aligncenter" src="https://i.imgur.com/93r0w3q.png" alt="Create a New Post Type for Subscribers with Meta Box" width="1046" height="438" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Upon creating, you will see the post type name <strong>Subscriber </strong>displays on the left sidebar of the Dashboard (like the above image).</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Step 2: Create a Subscription Form</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Normally, a subscription form has two fields: Name and Email. Also, you can add <a href="https://metabox.io/series/custom-field">custom fields</a> as needed (this is the benefit of using custom fields to create the form). In this step, I just create only two basic fields: name and email using custom fields.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Besides, to save the database space, I will use the <code>post title</code> field for <code>name</code>, and the <code>post content</code> field for email. I set the ID for this meta box as <code>subscription-form</code>. The ID of the Name field is <code>post_title</code>, and the ID of the Email field is <code>post_content</code> because <code>post_title</code> and <code>post_content</code> are two default IDs in WordPress for title and post type content.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As mentioned, I use the Meta Box Builder extension to create fields. But if you want to save money, you can use the free tool <strong>Online Generator</strong> of Meta Box to generate code automatically (read the documentation <a href="https://docs.metabox.io/online-generator/">here</a>).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to <strong>Meta Box </strong>&gt; <strong>Custom Fields</strong> &gt; <strong>Add New</strong> to enter the name and ID of the meta box. After that, choose the field type as <code>Text</code> for <strong>Name </strong>and <strong>Email </strong>fields.</p>
<p><img class="aligncenter" src="https://i.imgur.com/bn3y6j0.png" alt="choose the custom field type" width="1899" height="937" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p><strong>Read more</strong>: <a href="https://metabox.io/add-configure-custom-fields-meta-box-builder/">How to add and configure custom fields using Meta Box Builder</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Upon creating fields, go to the <strong>Settings </strong>tab to choose the <strong>Subscriber </strong>post type.</p>
<p><img class="aligncenter" src="https://i.imgur.com/uuzeT3n.png" alt="choose the Subscriber post type" width="1897" height="937" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Finally, click <strong>Save Changes</strong>. Now you’ve finished creating all the needed fields for the subscription form.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Step 3: Insert and Display the Subscription Form on the Front End</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To insert the subscription form into the website and allow users to fill in the form right on the front end, you need to use the MB Frontend Submission extension. This can be done with the shortcode below:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<pre>[mb_frontend_form id="subscription-form" ajax="true" recaptcha_key="..." recaptcha_secret="..."]</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Explanation</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><code>subscription-form</code>: id of the meta box we’ve created</li>
<li><code>ajax="true"</code>: enable loading ajax</li>
<li><code>recaptcha_key</code>: Google reCaptcha site key</li>
<li><code>recaptcha_secret</code>: Google reCaptcha secret key</li>
</ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>I created a <strong>Subscribe </strong>page to insert this shortcode. Also, you can insert this shortcode on any other post or widget you want.</p>
<p><img class="aligncenter" src="https://i.imgur.com/IRR6Hra.png" alt="insert the shortcode on any post or widget you want" width="1017" height="565" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>To avoid form spamming, I use Google reCaptcha. Integrating Google reCaptcha into the front end form is quite easy, you just need to enter the site key and the secret key into the shortcode of the form as above. To get the detailed instruction for reCaptcha and other attributes of the form, read <a href="https://docs.metabox.io/extensions/mb-frontend-submission/#shortcode-attributes">the documentation of MB Frontend Submission</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is the subscription form that I’ve created. You can see the reCaptcha icon in the corner of the screen:</p>
<p><img class="aligncenter" src="https://i.imgur.com/WKtW25r.png" alt="he reCaptcha icon in the corner of the subscription form" width="833" height="473" /></p>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2>Step 4: Style the Subscription Form</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By default, Meta Box displays forms quite beautifully on the front end. However, to customize the subscription form so that it’s more beautiful, we need to make it up with some CSS. You can refer to my CSS code below and add it to <strong>Appearance </strong>&gt; <strong>Customize </strong>&gt; <strong>Additional CSS</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<pre>.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%;
}
</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And here is the result:</p>
<p><img class="aligncenter" src="https://i.imgur.com/3V8WPvr.png" alt="Style the Subscription Form" width="1365" height="562" /></p>
<!-- /wp:embed -->

<!-- wp:heading {"level":3} -->
<h2>Step 5: Connect the Subscription Form to Mailchimp</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this step, we’re going to integrate the subscription form to MailChimp. This is to send the subscriber information via the subscription form to MailChimp. After that, you can <a href="https://gretathemes.com/mailchimp-send-wordpress-blog-post-email/">use MailChimp to send marketing campaigns</a> to these subscribers.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To do it, I use the following library to connect to the Mailchimp API:</p>
<p><a href="https://github.com/drewm/mailchimp-api">https://github.com/drewm/mailchimp-api</a></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Click the link to download the <code>Mailchimp.php</code> file, and then insert it into your theme. I’m using <a href="https://gretathemes.com/wordpress-themes/estar">eStar</a> theme and its <a href="https://gretathemes.com/what-is-child-theme/#what-is-child-theme">child theme</a>, so I will create an <code>inc</code> folder and copy the <code>Mailchimp.php</code> file into this folder.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, add this code to the <code>functions.php</code> file:</p>
<!-- /wp:paragraph -->
<pre>include get_stylesheet_directory() . '/inc/MailChimp.php';
use \DrewM\MailChimp\MailChimp;

function insertList() {
	$key = 'API keys mailchimp của bạn';
	$list_id = ' id of the list that you want to integrate';
	$merge_var = array(
		'FNAME' =&gt; $_POST['post_title'],
		'LNAME' =&gt; '',
	);
	$mailchimp = new MailChimp( $key );

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

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {
	if ( 'subscription-form' === $config['id'] ) {
		insertList();
		die;
	}
}, 10, 2 );</pre>
<!-- wp:paragraph -->
<p><strong>Explanation</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><code>'rwmb_frontend_after_process'</code>: the hook we have after the form is submitted.</li>
<li><code>subscription-form</code>: id of the meta box we’ve created in step 2</li>
<li>To get the API key of Mailchimp, log in to your Mailchimp account, and then copy the API key in the <strong>Your API keys </strong>section.</li>
</ul>
<img src="https://i.imgur.com/OAcvrH6.png" alt="get the API key of Mailchimp" width="1122" height="834" /> 
<p><img class="aligncenter" src="https://i.imgur.com/OFkPt5f.png" alt="copy the API key of Mailchimp" width="1632" height="689" /></p>
<!-- /wp:embed -->

<!-- wp:list -->
<ul>
<li>To get the id of the list, log in to your Mailchimp account, and then go to <strong>Audience &gt; All Contacts</strong>, click <strong>Settings</strong>, and choose <strong>Audience name and defaults</strong>:</li>
</ul>
<p><img class="aligncenter" src="https://i.imgur.com/V0oExGs.png" alt="log in to your Mailchimp account" width="1793" height="892" /></p>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In the <strong>Audience ID</strong> section, you will see your list id:</p>
<p><img class="aligncenter" src="https://i.imgur.com/UCT9064.png" alt="The list id of Mailchimp" width="1716" height="750" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p><strong>Note</strong>: Mailchimp often changes their interface, so the next time going to Account Mailchimp, it may look different from this article. However, the process is still the same.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After you finish it, make a test if the system works appropriately. I tried filling in the subscription form with my name and email:</p>
<p><img class="aligncenter" src="https://i.imgur.com/s2X4gC1.png" alt="the subscription form with my name and email" width="860" height="366" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>And here they are in the email list of Mailchimp:</p>
<p><img class="aligncenter" src="https://i.imgur.com/YGt7SXR.png" alt="the email list of Mailchimp" width="1055" height="257" /></p>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Tada! We’ve finished creating the subscription form and integrating it with Mailchimp.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Last Words</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Creating a subscription form with MB Frontend Submission is quite flexible. You can create forms with various field types and advanced fields for users to submit depending on their needs. Besides, MB Frontend Submission has many other applications, so you can take advantage of them to enhance your website.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As for Mailchimp, you should learn <a href="https://gretathemes.com/mailchimp-send-wordpress-blog-post-email/">how to send WordPress blog posts by email</a> to make your marketing campaign more effective.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wishing you have successful campaigns!</p>