Ajax form for WordPress

Using ajax when submitting a form allows you to submit the form without reloading the page. In WordPress, this is quite simple to implement. Let's say we have the following call order form:

<form class="form-container recall-form-validate">
    <div class="form-title"><h2>Order a call</h2></div>
    <div class="form-title">Your name:</div>
    <input class="form-field form-name" type="text"  name="name" /><br />
    <div class="form-title">Enter your phone number:</div>
    <input class="form-field form-tel" type="text"  name="tel" /><br />
    <div id="submit-ajax" class="submit-container">
        <input class="submit-button" type="submit" value="Send"/>
    </div>
</form>

Now we will write a script that handles the event of clicking on the "Send" button:

$(".submit-button").on("click", function (event) {
        event.preventDefault();
        var name = $(".form-name").val();
        var tel = $(".form-tel").val();
        $.ajax({
            url: "/wp-admin/admin-ajax.php",
            method: 'post',
            data: {
                action: 'ajax_order',
                name: name,
                tel: tel

            },
            success: function (response) {
                $('#submit-ajax').html(response);
            }
        });
    });

The script cancels sending data to the server, then writes the values of the form fields and sends them via ajax. After receiving the result of request processing, the script outputs the message received from the server in the block with id = submit-ajax.

Improved version of the script that processes form fields automatically:

<script>

    jQuery(document).ready(function($){
        var form = $(".form-container");

        form.on("submit", function (event) {
            event.preventDefault();
            var vanilaForm = this;
            var form = $(vanilaForm);

            var way = form.data('action') || "ajax_order";

            var formData = new FormData(vanilaForm);
            formData.append("action", way);

             $.ajax({
               url: "/wp-admin/admin-ajax.php",
               method: 'post',
               data: formData,
               success: function (response) {
                $('#submit-ajax').html(response);
            }});
        });
    });

</script>

It remains to write a function that will process the data sent to the server (it can be placed in the theme file functions.php):

function ajax_form(){
    $name = $_REQUEST['name'];
    $tel = $_REQUEST['tel'];
    $response = '';
    $thm  = 'Ordering a call';
    $thm  = "=?utf-8?b?". base64_encode($thm) ."?=";
    $msg = "Name: ".$name."<br/>
        Telephone: ".$tel ."<br/>";
    $mail_to = 'here is the email address that the message will be sent to';
    $headers = "Content-Type: text/html; charset=utf-8\n";
    $headers .= 'From: sender name' . "\r\n";

// Sending a mail message

    if(mail($mail_to, $thm, $msg, $headers)){
        $response = 'The message is sent';
    }else
        $response = 'Error when sending a message';


    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );

Updated: 18.04.2020

Did this article help you? Rate it!
(No Ratings Yet)
Loading...

Support on Patreon https://www.patreon.com/processby

Leave a Reply

Your email address will not be published. Required fields are marked *

Contacts

E-mail: processby@gmail.com
Skype: inprocess.by
Belarus, Grodno

Send message