Come creare un form di contatto Ajax in WordPress senza plugin

functions.php

<?php 

add_action( 'wp_ajax_nopriv_ajax_submit_form', 'ajax_submit_form' );
add_action( 'wp_ajax_ajax_submit_form', 'ajax_submit_form' );

function ajax_submit_form() {
    // verifico che il nonce sia valido
    if ( ! wp_verify_nonce( $_POST['nonce'], 'submit_form' ) ) {
        wp_send_json_error( 'Nonce non valido' );
    }

    // verifico che i campi siano stati compilati
    if ( empty( $_POST['name'] ) || empty( $_POST['email'] ) || empty( $_POST['message'] ) ) {
        wp_send_json_error( 'Compila tutti i campi' );
    }

    // verifico che l'email sia valida
    if ( ! is_email( $_POST['email'] ) ) {
        wp_send_json_error( 'Email non valida' );
    }

    // invio l'email
    $to = get_option( 'admin_email' );
    $subject = 'New message from ' . $_POST['name'];
    $message = $_POST['message'];
    $headers = array(
        'From: ' . $_POST['name'] . ' <' . $_POST['email'] . '>',
        'Reply-To: ' . $_POST['name'] . ' <' . $_POST['email'] . '>',
    );
    $sent = wp_mail( $to, $subject, $message, $headers );

    // se l'email non è stata inviata
    if ( ! $sent ) {
        wp_send_json_error( 'Email non inviata' );
    }

    // se l'email è stata inviata
    wp_send_json_success( 'Email inviata' );
}

page-contatti.php

<?php get_header(); ?>



<div>
    <form id="form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>">
        <input type="hidden" name="action" value="ajax_submit_form" />
        <input type="hidden" name="nonce" value="<?php echo wp_create_nonce('submit_form'); ?>" />

        <div>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" />
        </div>
        <div>
            <label for="message">Message</label>
            <textarea name="message" id="message"></textarea>
        </div>
        <div>
            <input type="submit" value="Send" />
        </div>
        <div id="feedback"></div>
    </form>
</div>


<?php get_footer(); ?>

script.js

jQuery(document).ready(function($) {
        $('#form').submit(function(e) {
            e.preventDefault();


            var name = $('#name').val();
            var email = $('#email').val();
            var message = $('#message').val();
            var ajaxurl = $(this).attr('action');
            var action_name = $(this).find('input[name="action"]').val();
            var nonce = $(this).find('input[name="nonce"]').val();

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: action_name,
                    nonce: nonce,
                    name: name,
                    email: email,
                    message: message
                },
                success: function(response) {
                    if (response.success) {
                        $('#feedback').html('<p class="success">' + response.data + '</p>');
                    } else {
                        $('#feedback').html('<p class="error">' + response.data + '</p>');
                    }

                }
            });
        });
    });

style.css

div {
        margin-bottom: 10px;
    }

    label {
        display: inline-block;
        width: 100px;
    }

    input,
    textarea {
        width: 300px;
    }

    form {
        width: 500px;
        margin: 0 auto;
    }

    input[type="submit"] {
        margin-left: 100px;

        background-color: #000;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;

    }

    #feedback {
        margin-left: 100px;

    }

    .success {
        color: green;
    }

    .error {
        color: red;
    }