WordPress Ajax stands for Asynchronous JavaScript and XML. This helps us to load data from the server without refreshing browser page. Ajax is the technique for creating better, faster and more interactive web application with the help of CSS, XML, JavaScript, and HTML.
How to create a contact form using WordPress Ajax?
1. Create an HTML Form
At first, let’s create an HTML FORM that collects data from the user. To create HTML form copy the code below in your index.php file.
<div class="ajax-form"> <div class="container"> <div class=row> <div class="col-md-6 col-md-offset-3 form-box"> <form action="" method="post" class="ajax" enctype="multipart/form-data"> <h1>Ajax Form</h1> <label><b>Name</b></label> <input type="text" placeholder="Enter Your Name" name="name" required class="name"> <label><b>Email</b></label> <input type="email" placeholder="Enter your Email" name="email" required class="email"> <label><b>Message</b></label> <input type="textarea" placeholder="Message" name="message" required class="message"><hr> <div id="msg"></div> <input type = "submit" class="submitbtn" value="submit"><div class="success_msg" style="display: none">Message Sent Successfully</div> <div class="error_msg" style="display: none">Message Not Sent, There is some error.</div> </form> </div> </div></div>
The above HTML contains <form> tag which consists, text fields for Name, Email, and Message. To process this form and submit data using AJAX, we need jQuery file which is already inbuilt in the latest WordPress.
2. Using AJAX to submit the form
Now, we are going to use jQuery to handle our AJAX request. Create the file name main.js under the js folder inside your theme folder. In this file, we’ll place code for Ajax call.
