How to Build a WordPress AJAX Form (in 4 Easy Steps)

## How to Build a WordPress AJAX Form (in 4 Easy Steps)

AJAX, or Asynchronous JavaScript and XML, allows web pages to update content without requiring a full page reload. This leads to a much smoother and more responsive user experience. When incorporated into a WordPress form, it offers immediate feedback to the user, handles data validation seamlessly, and reduces server load by only transmitting the necessary information. This article will guide you through building a simple WordPress AJAX form in four straightforward steps.

## Step 1: Setting up the WordPress Form HTML

The first step is to create the HTML structure for your form. We’ll build a basic contact form with fields for name, email, and message. We’ll embed this form directly into a WordPress page or post for simplicity. Remember to include a unique ID for the form, as this will be crucial for identifying it with our JavaScript code.

“`html

“`

Let’s break down the code:

* **`id=”ajax-contact-form”`**: This unique ID allows us to target the form using JavaScript.
* **`action=””`**: The action attribute is left empty. We will handle form submission with JavaScript, so we don’t need to specify a URL here.
* **`method=”post”`**: We are using the POST method to send the form data to the server.
* **`` and `` elements**: Standard HTML form elements for name, email, and message input fields. The `required` attribute ensures that these fields are filled before submission.
* **``**: Used for the multi-line message field.<br /> * **`<input type="submit">`**: The submit button that triggers the form submission.<br /> * **`</p> <div id="form-messages">`**: This is a crucial element. It will display success or error messages to the user after the form is submitted.</p> <p>You can insert this HTML directly into a WordPress page or post using the “Text” or “Code” editor in the WordPress editor.</p> <p>## Step 2: Enqueueing JavaScript and Setting up AJAX Handling</p> <p>Now, we need to create a JavaScript file to handle the AJAX submission. We’ll enqueue this file in our WordPress theme’s `functions.php` file. Enqueueing is the proper way to add JavaScript to WordPress to avoid conflicts with other scripts.</p> <p>First, create a file named `ajax-form.js` in your theme’s directory (or a dedicated “js” directory within your theme). Then, add the following code to your `functions.php` file:</p> <p>“`php<br /> function enqueue_ajax_form_scripts() {<br /> wp_enqueue_script( ‘ajax-form’, get_template_directory_uri() . ‘/ajax-form.js’, array( ‘jquery’ ), ‘1.0’, true );</p> <p> wp_localize_script( ‘ajax-form’, ‘ajax_object’,<br /> array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ), ‘nonce’ => wp_create_nonce( ‘ajax-form-nonce’ ) )<br /> );<br /> }<br /> add_action( ‘wp_enqueue_scripts’, ‘enqueue_ajax_form_scripts’ );<br /> “`</p> <p>Let’s explain this code:</p> <p>* **`wp_enqueue_script()`**: This function registers and enqueues our JavaScript file.<br /> * **`’ajax-form’`**: A unique handle for the script.<br /> * **`get_template_directory_uri() . ‘/ajax-form.js’`**: The path to our JavaScript file. Replace `get_template_directory_uri()` with `get_stylesheet_directory_uri()` if you are working with a child theme.<br /> * **`array( ‘jquery’ )`**: This makes sure that jQuery is loaded before our script runs. jQuery is essential for simplifying AJAX requests.<br /> * **`’1.0’`**: The version number of the script. It helps with caching.<br /> * **`true`**: This loads the script in the footer, improving page load time.</p> <p>* **`wp_localize_script()`**: This function makes data available to our JavaScript file from PHP.<br /> * **`’ajax-form’`**: The handle of the script we’re localizing.<br /> * **`’ajax_object’`**: The name of the JavaScript object that will hold our data.<br /> * **`array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ), ‘nonce’ => wp_create_nonce( ‘ajax-form-nonce’ ) )`**: An array of data we’re passing to the JavaScript file.<br /> * **`’ajax_url’ => admin_url( ‘admin-ajax.php’ )`**: The URL to WordPress’s AJAX handler.<br /> * **`’nonce’ => wp_create_nonce( ‘ajax-form-nonce’ )`**: A security nonce to prevent Cross-Site Request Forgery (CSRF) attacks. It is crucial for security.</p> <p>Now, let’s add the JavaScript code to `ajax-form.js`:</p> <p>“`javascript<br /> jQuery(document).ready(function($) {</p> <p> $(‘#ajax-contact-form’).submit(function(event) {<br /> event.preventDefault();</p> <p> var formData = {<br /> ‘name’ : $(‘input[name=name]’).val(),<br /> ’email’ : $(‘input[name=email]’).val(),<br /> ‘message’ : $(‘textarea[name=message]’).val()<br /> };</p> <p> $.ajax({<br /> type : ‘POST’,<br /> url : ajax_object.ajax_url,<br /> data : {<br /> action : ‘process_ajax_form’, // The name of our WordPress action<br /> formData : formData,<br /> nonce : ajax_object.nonce<br /> },<br /> dataType : ‘json’,<br /> encode : true<br /> })<br /> .done(function(data) {<br /> // Handle the response from the server<br /> if (data.success) {<br /> $(‘#form-messages’).removeClass(‘error’);<br /> $(‘#form-messages’).addClass(‘success’);</p> <p> // Set the message text<br /> $(‘#form-messages’).text(data.message);</p> <p> // Clear the form<br /> $(‘#ajax-contact-form’).trigger(“reset”);<br /> } else {<br /> $(‘#form-messages’).removeClass(‘success’);<br /> $(‘#form-messages’).addClass(‘error’);</p> <p> // Set the message text<br /> $(‘#form-messages’).text(data.message);<br /> }<br /> })<br /> .fail(function(data) {<br /> // If things went wrong<br /> $(‘#form-messages’).removeClass(‘success’);<br /> $(‘#form-messages’).addClass(‘error’);</p> <p> // Set the message text<br /> if (data.responseText !== ”) {<br /> $(‘#form-messages’).text(data.responseText);<br /> } else {<br /> $(‘#form-messages’).text(‘An error occurred. Please try again.’);<br /> }<br /> });</p> <p> });</p> <p>});<br /> “`</p> <p>Here’s a breakdown of the JavaScript:</p> <p>* **`jQuery(document).ready(function($) { … });`**: This ensures that the code runs after the DOM (Document Object Model) is fully loaded. Using `$` inside the function ensures that it references jQuery, even if other libraries use the `$` symbol.<br /> * **`$(‘#ajax-contact-form’).submit(function(event) { … });`**: This sets up a submit event handler for our form.<br /> * **`event.preventDefault();`**: This prevents the default form submission behavior (which would reload the page).<br /> * **`var formData = { … };`**: This creates an object containing the data from the form fields.<br /> * **`$.ajax({ … });`**: This performs the AJAX request.<br /> * **`type: ‘POST’`**: Specifies the HTTP method.<br /> * **`url: ajax_object.ajax_url`**: The URL to WordPress’s AJAX handler (obtained from `wp_localize_script`).<br /> * **`data: { … }`**: The data to send to the server.<br /> * **`action: ‘process_ajax_form’`**: This is the name of the WordPress action hook we will use to process the form data on the server-side.<br /> * **`formData: formData`**: The form data we collected.<br /> * **`nonce: ajax_object.nonce`**: The security nonce.<br /> * **`dataType: ‘json’`**: Specifies that we expect a JSON response from the server.<br /> * **`encode: true`**: URL-encodes the data being sent.<br /> * **`.done(function(data) { … });`**: This function is executed if the AJAX request is successful. It handles the response from the server (success or error messages).<br /> * **`.fail(function(data) { … });`**: This function is executed if the AJAX request fails. It displays an error message to the user.</p> <p>## Step 3: Processing the Form Data on the Server-Side</p> <p>Now, we need to create a PHP function to handle the AJAX request on the server-side. Add the following code to your theme’s `functions.php` file:</p> <p>“`php<br /> function process_ajax_form() {<br /> // Verify the nonce<br /> check_ajax_referer( ‘ajax-form-nonce’, ‘nonce’ );</p> <p> // Sanitize the form data<br /> $name = sanitize_text_field( $_POST[‘formData’][‘name’] );<br /> $email = sanitize_email( $_POST[‘formData’][’email’] );<br /> $message = sanitize_textarea_field( $_POST[‘formData’][‘message’] );</p> <p> // Basic validation<br /> if ( empty( $name ) || empty( $email ) || empty( $message ) ) {<br /> wp_send_json_error( array( ‘message’ => ‘Please fill in all fields.’ ) );<br /> }</p> <p> if ( ! is_email( $email ) ) {<br /> wp_send_json_error( array( ‘message’ => ‘Please enter a valid email address.’ ) );<br /> }</p> <p> // Process the form data (e.g., send an email)<br /> $to = get_option( ‘admin_email’ );<br /> $subject = ‘New Contact Form Submission’;<br /> $body = “Name: $namenEmail: $emailnMessage: $message”;<br /> $headers = array( ‘Content-Type: text/html; charset=UTF-8’ );</p> <p> $mail_success = wp_mail( $to, $subject, $body, $headers );</p> <p> if ( $mail_success ) {<br /> wp_send_json_success( array( ‘message’ => ‘Your message has been sent successfully!’ ) );<br /> } else {<br /> wp_send_json_error( array( ‘message’ => ‘There was an error sending your message. Please try again later.’ ) );<br /> }</p> <p> // Always exit after processing an AJAX request<br /> wp_die();<br /> }<br /> add_action( ‘wp_ajax_process_ajax_form’, ‘process_ajax_form’ );<br /> add_action( ‘wp_ajax_nopriv_process_ajax_form’, ‘process_ajax_form’ );<br /> “`</p> <p>Here’s a breakdown of the PHP code:</p> <p>* **`function process_ajax_form() { … }`**: This is the function that will handle our AJAX request.<br /> * **`check_ajax_referer( ‘ajax-form-nonce’, ‘nonce’ );`**: This verifies the nonce to prevent CSRF attacks. It checks if the nonce value sent from the client matches the nonce we generated on the server.<br /> * **`$name = sanitize_text_field( $_POST[‘formData’][‘name’] );`**: This sanitizes the input data to prevent security vulnerabilities. `sanitize_text_field()` removes HTML tags and encodes special characters. `sanitize_email()` and `sanitize_textarea_field()` are used for email and textarea fields, respectively.<br /> * **`if ( empty( $name ) || empty( $email ) || empty( $message ) ) { … }`**: This performs basic validation to ensure that all required fields are filled.<br /> * **`if ( ! is_email( $email ) ) { … }`**: This validates the email address.<br /> * **`$to = get_option( ‘admin_email’ );`**: Gets the admin email from wordpress settings.<br /> * **`$mail_success = wp_mail( $to, $subject, $body, $headers );`**: This uses the `wp_mail()` function to send the form data via email.<br /> * **`wp_send_json_success( array( ‘message’ => ‘Your message has been sent successfully!’ ) );`**: This sends a JSON response back to the client indicating success.<br /> * **`wp_send_json_error( array( ‘message’ => ‘There was an error sending your message. Please try again later.’ ) );`**: This sends a JSON response back to the client indicating an error.<br /> * **`wp_die();`**: This is crucial. It terminates the script execution after the AJAX request is processed.<br /> * **`add_action( ‘wp_ajax_process_ajax_form’, ‘process_ajax_form’ );`**: This registers the `process_ajax_form` function to handle AJAX requests for logged-in users. `’wp_ajax_process_ajax_form’` corresponds to the `action` value we sent in the JavaScript AJAX request.<br /> * **`add_action( ‘wp_ajax_nopriv_process_ajax_form’, ‘process_ajax_form’ );`**: This registers the `process_ajax_form` function to handle AJAX requests for non-logged-in users (e.g., website visitors). `’wp_ajax_nopriv_process_ajax_form’` is important for forms accessible to the general public.</p> <p>## Step 4: Styling and Testing Your Form</p> <p>Finally, you should style your form using CSS to make it visually appealing. You can add CSS rules to your theme’s `style.css` file or create a separate CSS file and enqueue it in your `functions.php` file using `wp_enqueue_style()`.</p> <p>For example, you might add the following CSS to style the success and error messages:</p> <p>“`css<br /> #form-messages.success {<br /> color: green;<br /> font-weight: bold;<br /> margin-top: 10px;<br /> }</p> <p>#form-messages.error {<br /> color: red;<br /> font-weight: bold;<br /> margin-top: 10px;<br /> }<br /> “`</p> <p>After styling, thoroughly test your form.</p> <p>* Fill in all the fields and submit the form. Check if the success message appears.<br /> * Check your email inbox to confirm that you received the form submission.<br /> * Try submitting the form with missing fields or an invalid email address. Verify that the appropriate error messages are displayed.<br /> * Test the form with different browsers and devices to ensure compatibility.</p> <p>By following these four steps, you can create a simple yet functional AJAX form in WordPress, providing a better user experience and improving the efficiency of your website.</p> <div class="sharebaiviet"> <div class="facelike-bv"> <div class="fb-like" data-href="https://123web.io.vn/how-to-build-a-wordpress-ajax-form/" data-width="" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> </div> <div class="zalolike-bv"> <div class="zalo-share-button" data-href="https://123web.io.vn/how-to-build-a-wordpress-ajax-form/" data-oaid="1519305186852511949" data-layout="1" data-color="blue" data-customize=false></div> </div> </div> <script src="https://apis.google.com/js/platform.js"></script> <script src="https://sp.zalo.me/plugins/sdk.js"></script> <style> .sharebaiviet { float: left; width: 100%; } .facelike-bv { float: left; } .zalolike-bv { float: left; padding-right: 7px; } </style> <div class="box-seealso"> <span class="mb-reader">Related Topics by Tag</span> <ul class="box-also"> <li><a class="mb-reader" href="https://123web.io.vn/how-to-add-page-slug-in-body-class-of-your-wordpress-themes/" title="How to Add the Page Slug to Body Class in WordPress">How to Add the Page Slug to Body Class in WordPress</a></li> <li><a class="mb-reader" href="https://123web.io.vn/how-to-display-a-wordpress-post-only-if-it-has-a-specific-custom-field/" title="How to Display a WordPress Post Only if It Has a Specific Custom Field">How to Display a WordPress Post Only if It Has a Specific Custom Field</a></li> <li><a class="mb-reader" href="https://123web.io.vn/how-to-add-custom-dashboard-widgets-in-wordpress/" title="How to Add Custom Dashboard Widgets in WordPress (2 Methods)">How to Add Custom Dashboard Widgets in WordPress (2 Methods)</a></li> <li><a class="mb-reader" href="https://123web.io.vn/21-best-wordpress-starter-themes-for-developers/" title="19 Best WordPress Starter Themes for Developers in 2025">19 Best WordPress Starter Themes for Developers in 2025</a></li> <li><a class="mb-reader" href="https://123web.io.vn/how-to-add-custom-styles-to-wordpress-widgets/" title="How to Add Custom Styles to WordPress Widgets (2 Ways)">How to Add Custom Styles to WordPress Widgets (2 Ways)</a></li> <li><a class="mb-reader" href="https://123web.io.vn/wordpress-body-class-101-tips-and-tricks-for-theme-designers/" title="WordPress Body Class 101: Tips and Tricks for Theme Designers">WordPress Body Class 101: Tips and Tricks for Theme Designers</a></li> </ul> </div> <style> .box-seealso { width: 100%; height: auto; } .box-seealso ul li::before { content: ""; padding: 1px 0 0 10px; background: url(./images/bg_dot_gray_3x3.gif) no-repeat left 11px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .box-seealso ul a { color: #00648a; font: 400 14px arial; font-size: 15px; } span.mb-reader { width: 100%; height: auto; border-bottom: 2px dashed #00648a; font-size: 21px; font-weight: 400; padding-bottom: 5px; } ul.box-also { padding-top: 10px; margin-bottom: 13px !important; } .box-seealso ul a:hover { color: #333; } </style> <div class="post-tags"> <a href="https://123web.io.vn/tag/ajax-form-tutorial/" rel="tag">AJAX form tutorial</a>, <a href="https://123web.io.vn/tag/form-development/" rel="tag">form development</a>, <a href="https://123web.io.vn/tag/wordpress-ajax-form/" rel="tag">WordPress AJAX form</a>, <a href="https://123web.io.vn/tag/wordpress-development/" rel="tag">WordPress development</a>, <a href="https://123web.io.vn/tag/wordpress-form/" rel="tag">WordPress form</a></div> <style> .post-tags { padding: 5px; overflow: hidden; margin-bottom: 10px; } .post-tags a { border: 1px solid #ddd; color: #4f4f4f; /* float: left; */ font-size: 13px; /* padding: 2px 8px; */ /* margin: 8px; */ text-decoration: none; text-transform: capitalize; background: #eee; padding: 0 5px; } .post-tags a:before { content: "# "; } </style> </div> <div class="col-sm-2 single-netweb"> <div class="author-desktop"> <div id="author-block"> <div class="author-meta"> <div class="author-avatar"> <img alt='' src='https://secure.gravatar.com/avatar/0f2cf2ba9f3bf32cb8a9143db3886552c7c85736d1db8fc1d0b538d4c7c1e6b1?s=300&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0f2cf2ba9f3bf32cb8a9143db3886552c7c85736d1db8fc1d0b538d4c7c1e6b1?s=600&d=mm&r=g 2x' class='avatar avatar-300 photo' height='300' width='300' decoding='async'/> </div> <div class="author-name "> <a href="#" title="Posts by admin" rel="author">admin</a></div> <div class="author-desc"> </div> </div> </div> </div> <br> <div class="side-bar-right"> .. </div> </div> </div> </div> <style> .sub-youtube-123 h3 { color: #e62117; font-weight: bold; } .sub-youtube-123 { width: 100%; margin-top: 12px; margin-bottom: 11px; background: #e3e3e3; padding-top: 9px; padding-left: 13px; } .single-post h1 a { color: #4285f4 !important; } .single-post h1 a:hover { color: #e62117 !important; } </style> <div class="container-fluid footer-full-bt"> <div class="container bottom-footer"> <footer id="footer" class="block-reponsive"> <div class="footer-info"> <h2>123web.io.vn</h2> <div class="row address-social"> <div class="col-sm-9 footer-address"> is a free WordPress resource website for beginners. 123web.io.vn. The goal of this site is to provide quality WordPress tips, tricks, and resources that allow beginners to use WordPress to improve their websites. <br> © Copyright 2025, ® All Reserved. </div> <div class="col-sm-3 footer-social"> <h4>Theo dõi 123web.io.vn</h4> <div class="fa-footer"> <a href="#" rel="nofollow noopener" target="_blank"><i class="fa fa-facebook-square"></i></a> <a href="#" target="_blank" rel="nofollow noopener"><i class="fa fa-youtube"></i></a> <a href="#" target="_blank" rel="nofollow noopener"><i class="fa fa-telegram"></i></a> </div> <div> <a href="http://www.dmca.com/Protection/Status.aspx?ID=fdf2ba87-9fb3-4585-85b2-8feb207279c9&refurl=https://123web.io.vn/how-to-build-a-wordpress-ajax-form/" target="_blank" title="DMCA.com Protection Status" class="dmca-badge"> <img src="//images.dmca.com/Badges/dmca_protected_sml_120n.png?ID=fdf2ba87-9fb3-4585-85b2-8feb207279c9" alt="DMCA.com Protection Status"></a> </div> </div> </div> </div> </footer> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/likeweb.1.0\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://123web.io.vn/wp-includes/js/hoverIntent.min.js?ver=1.10.2" id="hoverIntent-js"></script> <script type="text/javascript" id="megamenu-js-extra"> /* <![CDATA[ */ var megamenu = {"timeout":"300","interval":"100"}; /* ]]> */ </script> <script type="text/javascript" src="https://123web.io.vn/wp-content/plugins/megamenu/js/maxmegamenu.js?ver=3.1.1" id="megamenu-js"></script> <script type="text/javascript" src="https://123web.io.vn/wp-content/plugins/megamenu-pro/assets/public.js?ver=2.1.1" id="megamenu-pro-js"></script> <script> (function($){ $(document).ready( function() { $('.netwebvn_post_view_count').each( function( i ) { var $id = $(this).data('id'); var $nonce = $(this).data('nonce'); var t = this; $.get('https://123web.io.vn/wp-admin/admin-ajax.php?action=svl-ajax-counter&nonce='+$nonce+'&p='+$id, function( html ) { $(t).html( html ); }); }); }); })(jQuery); </script> <script src="https://123web.io.vn/wp-content/themes/likeweb.1.0/js/popper.min.js" ></script> <script src="https://123web.io.vn/wp-content/themes/likeweb.1.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://123web.io.vn/wp-content/themes/likeweb.1.0/js/slick.min.js"></script> <script> jQuery(function() { //caches a jQuery object containing the header element var fix_netweb = $(".toc-netweb-custom"); jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 250) { fix_netweb.addClass("fix-ok"); } else { fix_netweb.removeClass("fix-ok").addClass('ok'); } }); var fix_sidebar1 = $(".side-bar-right"); jQuery(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 550) { fix_sidebar1.addClass("fix-ok"); } else { fix_sidebar1.removeClass("fix-ok").addClass('ok'); } }); }); </script> </body> </html>