Form is the main element in the MailChimp WordPress Plugin. This MailChimp form will give our visitors the option to subscribe to our content and site. In this tutorial we will create everything we need to handle the form submission.
This tutorial is part of a series MailChimp WordPress Plugin with React:
- MailChimp WordPress Plugin with React: Introduction
- MailChimp WordPress Plugin with React: Settings & Custom Post Type
- MailChimp WordPress Plugin with React: Metabox & MailChimp Lists
- MailChimp WordPress Plugin with React: The Form and Form Submission
- MailChimp WordPress Plugin with React: MailChimp Widget
- MailChimp WordPress Plugin with React: AJAX and React
In this tutorial we will need two additional files:
inc/functions-form.php– to hold functions related to MailChimp form
inc/class-mwp-form.php– class for rendering the MailChimp form
We need to include those files in our main plugin class
Since we will process form submission, we also need a way to handle errors. This form errors will be also displayed above the form fields. We will handle errors by using the WordPress class WP_Error. Let’s instantiate an object to our attribute
$errors in our main class.
We will also need some simple functions to get and set those errors. Open the file
inc/functions-form.php and add this:
If there are no errors when subscribing the user, we will redirect them to another page. This page can be a thank you page, a page with a gated content or something else.
MailChimp Form’s Redirect Field
To redirect our subscriber, we need a field. We will create a redirect field that will hold the page link. The position of this field is under our field where we select a MailChimp list. Open the file
inc/admin/metabox-form.php and add this:
We have defined a new variable
$redirect_url that will get the value from the postmeta database.
This is a simple table row
tr that contains the input for our redirect url. Place it right after the closing
tr of our list field, just before the closing
In the method
save_metabox we will also create a simple snippet for saving our new field. Add that to the bottom of the method. When saving the redirect url, we are using the WordPress function
esc_url_raw. This function will sanitize the url and also prepend
http:// if it’s not added.
MailChimp Form Class
MWP_Form will hold the code for rendering the MailChimp form and also to render any errors attached to that form. Open the file
inc/class-mwp-form.php and let’s add this:
The constructor method will just assign the ID we pass when instantiating our class to the attribute
$form_id. Now, let’s create a method that will display errors if there are any:
Here, we are using our helper function
mwp_get_form_errors to get the errors for that form. If there are any errors, we will render them.
The only thing we have to do now for our class is to define a method to render our form and the errors in it:
We have also wrapped our form inside a
So, now if we render our form and our user submits it, we need to handle the subscription process.
Now that we have our class, we can render it. We also need a way to get the list id from our MailChimp form. We will create two helper functions to render the form or get the list from the form:
MailChimp Form Subscription Process
When our form is submitted, the global
$_POST variable will contain a key
mwp_subscribe_form_submit with the MailChimp form ID as the value. We will check that in the
init action hook. Let’s add a new function to that hook in the method
hooks of our main plugin class:
We now need to define the function
mwp_subscribe_user_on_form_submit. This function will be defined in the file
In this function we check if a MailChimp form is submitted. If it is, we are getting the values and assigning them to the appropriate variables
$form_id, $email, $name. These variables are then passed as parameters to the function
If the user has subscribed successfully, we will redirect the user to our redirect link (if there is any). Let’s now define the function
This is the summary of this function:
- Define the defaults of the variable
- If the
$nameis empty, we are adding an error
- If the
- If the
$list_idand subscribe the user to that list with the function
- If the subscription went well, we are getting the redirect url to our
$result, otherwise an error is defined
- At the end, we are looking if there are any errors for that form. If there are, the
successparameter will be set to
0and the errors to parameter
- The last part is to return the
Subscribing the user
In the 4th item above, we have mentioned the function
mwp_subscribe_user_to_list(). Add that function to the file
Here we are first getting the MailChimp API key. If there is an API key, we are instantiating the class
MailChimp. We are subscribing the user by posting some parameters to
status is set to
pending so that our subscriber gets the email to confirm the subscription. Other values are: subscribed, unsubscribed and cleaned.
We are also returning <code>true</code> if the user was already a subscriber to that list so that the user gets redirected to that url with the message, resource or something else.
In this tutorial we have done a lot of things. We defined helper functions, handle errors, render the form and also subscribe the user. We don’t have a way to render the form by using the WordPress dashboard, but you can try to render it by using the code in a theme file:
The number that is there is actually an ID of the form. You can get it when creating a MWP Form from the url in the address bar. In the next tutorial we will define a way to display that form using a widget.Become a Sponsor