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 forminc/class-mwp-form.php– class for rendering the MailChimp form
We need to include those files in our main plugin class MWP.
Handling Errors
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 table.
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
The 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 .mwp-subscribe-form. This element will be used to render the form with React, but that will come later in this series. By rendering the form without the React, we have a nice fallback that will work just fine if the JavaScript doesn’t load.
So, now if we render our form and our user submits it, we need to handle the subscription process.
Helper functions
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 inc/functions-form.php.
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 mwp_subscribe_user().
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 mwp_subscribe_user():
This is the summary of this function:
- Define the defaults of the variable
$result - If the
$nameis empty, we are adding an error - If the
$emailis empty, we are adding an error. Otherwise we check if the email is valid - If the
$emailis valid, we get the$list_idand subscribe the user to that list with the functionmwp_subscribe_user_to_list() - 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 to0and the errors to parametererrors - The last part is to return the
$result.
Subscribing the user
In the 4th item above, we have mentioned the function mwp_subscribe_user_to_list(). Add that function to the file inc/functions-mailchimp.php:
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 lists/LIST_ID/members.
Parameter 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.
Conclusion
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
Share this: