We can show our MailChimp Form with a widget that we have made in the last tutorial. In this tutorial, you will learn how to code the whole interaction with the form using React.
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 & React
New Hooks for AJAX and React
Let’s go back to our main plugin file and extend our main class with some hooks:
The first hook is
wp_enqueue_scripts. We are hooking the method
enqueue from our main class. The other two hooks are used for AJAX calls. The second AJAX hook has the
nopriv word so that we can also process AJAX calls for non logged-in users. The function
mwp_subscribe_user_on_ajax will subscribe the user on AJAX request.
We now need to define all those methods and functions.
Enqueueing our React file
mwp.js. Create the folder
assets in the main plugin folder and create the
mwp.js inside that folder. Let’s define the method
mwp_object that we can then use inside our file. After we have defined every parameter in our object, we are enqueuing it.
Subscribing the User from AJAX
When our visitor subscribes from our MailChimp form, we will create an AJAX request to our site. The action hooks for AJAX calls will be activated and our function
mwp_subscribe_user_on_ajax will process the request.
Open the file
inc/functions-form.php and add this code to the end of it:
We are getting the variable values from the superglobal
$_POST variable. When the variables
The result we get from that function is then echoed in a
JSON format. We also call the function
wp_die() at the end so that nothing else is processed on the backend.
Handling the Form with React
This part is probably the most wanted one in this tutorial:) To work with React and manipulate the DOM, we need React and ReactDOM. We will add those scripts in a minified form in our
If you look at the method
render in our class
MWP_Form, you will see that we wrap our form with a class
.mwp-subscribe-form. This class will be used to render our React form inside it.
Add the next code at the bottom of the file
Creating the form
reactForms is global and it will hold every instance of our form. This is done because of WordPress widgets that can be used more than once.
In that class we are also creating an initial state. This state will hold the button text which we are getting from the global object
mwp_object. The state also contains an empty array of errors and a boolean
We are then getting all the HTML elements with the class
.mwp-subscribe-form. For each of those elements, we are creating a new DOM with ReactDOM in which we create a new React element. In this element we provide our new type
This new React Element also has a property attribute
id that holds the form ID. This will be our reference property so that we know to which form we need to subscribe our visitor.
Rendering the Form
To render the form, we need to create the logic behind it inside the method
In this method, we are checking if there are any errors in the
state. If there are, for each error we are creating a
li element with the error message inside. If the variable
errors is not empty, we are creating an error container that is an
ul with all the errors (
At the end we are returning a React element with a few properties and all the other elements needed inside (error container, input fields and submit field). The properties that are set are:
name– the form name attribute, accessible from global
onSubmit– an event that will call a function when a user submits the data
method– the form method attribute
action– the form action attribute
Checking the Form Fields
Before we create an AJAX request, we need to check the fields so that we don’t create an AJAX request with empty fields. This will be done in a custom function
In this function we are setting a few variables. The first one is
order which we have provided when creating the forms for each widget. This is used to select the right form using the global object
If we have more than one form, we will then get it by using the
window.mwpSubscribeForm. If the fields
state with those errors.
Creating the AJAX Request
This is the last method we have to create inside our React class. This one will be called when the visitor tries to subscribe. Add it to the code:
We are first checking the fields and if there are no errors, we are creating a
data object that will be sent with the AJAX request.
When the AJAX request is done, we are checking if the response was a success. If it was, then we are getting the redirect link and we redirect the subscriber to that url. If there are some error, we are setting them in the
This was the last part of our WordPress MailChimp plugin. In this series we have learned a lot, from building a simple basic plugin to extending it to a complete solution for subscribing. Did you find something that is missing? Do please say it in the comments:)
Thank you so much for reading and following this series. You can download WP MailChimp Plugin here.Become a Sponsor