Come creare un form di contatto AJAX in WordPress senza plugin

Introduzione

Creare un form di contatto AJAX in WordPress senza plugin può offrire molti vantaggi rispetto all’utilizzo di plugin. Innanzitutto, un modulo personalizzato può essere perfettamente adattato alle esigenze del tuo sito e del tuo marchio. Inoltre, l’utilizzo di plugin di terze parti può rallentare il tuo sito e aumentare la vulnerabilità alla sicurezza.

In questo articolo, vedremo come creare un form di contatto AJAX in WordPress senza plugin. Ti mostrerò come configurare il file functions.php, creare il form HTML, gestire le richieste AJAX e creare le funzioni di elaborazione delle richieste. Inoltre, ti fornirò esempi pratici e consigli per rendere il tuo modulo di contatto il più efficace possibile. Alla fine di questo articolo, avrai un modulo di contatto personalizzato che offrirà un’esperienza utente ottimale e aumenterà le possibilità di conversione per il tuo sito web.

Configurare il file functions.php per gestire le richieste AJAX

Per gestire le richieste AJAX in WordPress, è necessario aggiungere alcune funzioni al file functions.php del tuo tema. Innanzitutto, dobbiamo creare una nuova funzione che verrà richiamata dalla richiesta AJAX. In questo esempio, la funzione si chiamerà “ajax_submit_form”.

<?php

function ajax_submit_form() {
  // codice per elaborare la richiesta AJAX
}

Successivamente, dobbiamo registrare la funzione per essere chiamata dalle richieste AJAX. Possiamo farlo utilizzando la funzione add_action() di WordPress. In questo esempio, stiamo registrando la funzione “ajax_submit_form” per essere richiamata dalle richieste AJAX con l’azione “wp_ajax_nopriv_ajax_submit_form” e “wp_ajax_ajax_submit_form”.

<?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() {
  // codice per elaborare la richiesta AJAX
}

Nota: La differenza tra “wp_ajax_nopriv_” e “wp_ajax_” è che la prima gestisce le richieste AJAX da utenti non autenticati, mentre la seconda gestisce le richieste AJAX da utenti autenticati.

Questi sono i passi fondamentali per configurare il file functions.php per gestire le richieste AJAX in WordPress. Nel prossimo passo, vedremo come creare il form HTML per il modulo di contatto.

Creare il form HTML per il modulo di contatto

Per creare il form HTML si possono scegliere numerose strade. In questo nostro esempio andremo a creare una pagina personalizzata secondo la gerarchia dei template di WordPress.

Quindi creeremo una pagina chiamandola Contatti e poi un nuovo file nella root del nostro tema chiamato ‘page-contatti.php’. All’interno del file page-contatti.php inseriremo questo codice

<?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(); ?>

I due campi “hidden” servono per trasmettere informazioni al server che non devono essere visualizzate o modificate dall’utente.

Il primo campo “action” convalida il nome dell’azione che deve essere eseguita sul server per elaborare i dati del form.

Il secondo campo “nonce”Il nonce, o numero usato una volta, è un meccanismo di sicurezza utilizzato in WordPress per prevenire attacchi CSRF (Cross-Site Request Forgery). Il concetto alla base di un nonce è quello di crear Leggi è una stringa univoca utilizzata per verificare che la richiesta AJAX sia autorizzata. Questo aiuta a proteggere contro attacchi XSRF (Cross-Site Request Forgery) in cui un utente malintenzionato potrebbe inviare dati dannosi da un sito web diverso.

Aggiungere stile al contact form

Diamo una piccola “pettinata” al nostro contact form con un po’ di css. Potete aggiungere questo codice nel vostro style.css oppure aggiungerlo in cima alla nostra pagina personalizzata.

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;
    }

Inviare la richiesta AJAX

Per inviare la richiesta AJAX, dobbiamo aggiungere un po’ di codice JavaScript al nostro modulo di contatto.

Il codice seguente utilizza la libreria jQuery per inviare la richiesta AJAX al momento dell’invio del modulo:

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>');
                    }

                }
            });
        });
    });

In questo codice, stiamo ascoltando l’evento di invio del modulo utilizzando la funzione submit di jQuery. Quando viene inviato il form, viene intercettato l’evento di submit e viene richiamata una funzione AJAX che invia i dati del form (nome, email, messaggio) al server. La risposta del server viene verificata e, in base al suo esito (successo o errore), viene mostrato un messaggio di successo o di errore all’utente.

Specificare l’azione in un form HTML è importante perché indica a quale script o pagina deve essere inviata la richiesta del modulo. Nel caso di un form di contatto in WordPress, l’azione specifica a quale punto del sito deve essere inviata la richiesta di contatto.

In questo caso, stiamo creando un form di contatto personalizzato senza l’utilizzo di un plugin, quindi useremo una action personalizzata per inviare i dati del modulo allo script AJAX che abbiamo creato in precedenza. In questo modo, quando un utente invia il modulo, i dati verranno inviati allo script AJAX anziché essere inviati a una pagina del sito o a un plugin di contatto esterno. In questo modo, possiamo elaborare i dati del modulo in modo personalizzato e fornire una risposta più adatta alle esigenze del sito.

Elaborare la richiesta AJAX tramite PHP

Questo passaggio comporta la creazione di una nuova funzione PHP che verrà chiamata dalla richiesta AJAX. Questa funzione conterrà il codice per elaborare la richiesta e restituire una risposta.

<?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' );
}

Come creare un form di contatto AJAX in WordPress senza plugin – Codice completo

Questo conclude il tutorial su come creare un form di contatto AJAX in WordPress senza plugin.

Ecco il codice completo

Ecco una demo

Spero che questo possa aiutare i principianti a comprendere come creare un modulo personalizzato e come utilizzare le funzionalità AJAX in WordPress.