Construire un plugin WordPress pour créer un formulaire de contact ajax

Cet article montre la construction d'un plugin de formulaire de contact AJAX simple pour WordPress. Nous couvrirons la création du plugin, la conception de formulaires, la manipulation de l'AJAX et la mise en œuvre des raccourcis.

Concepts clés:

• Le développement du plugin WordPress exploite les plugins pour étendre les fonctionnalités du site. Cela comprend la création de formulaires de contact qui utilisent AJAX pour la soumission des données. Cela implique la création de fichiers de plugin, la construction de formulaires, un gestionnaire Ajax et un shortcode.
• Le gestionnaire Ajax est crucial. Il reçoit l'entrée de l'utilisateur, valide les données et envoie des notifications par e-mail à l'administrateur WordPress à l'aide de wp_mail(). Un enregistrement approprié du gestionnaire AJAX est essentiel pour le traitement des demandes AJAX.
• Shortcodes Simplifiez l'intégration de la forme. Une fonction génère le HTML du formulaire, qui est ensuite encapsulé dans un shortcode pour une insertion facile dans les poteaux et les pages.

Création du plugin:

1. Créez un dossier nommé ajaxcontactform dans votre répertoire WordPress wp-content/plugins.
2. à l'intérieur, créez ajaxcontactform.php avec l'en-tête du plugin suivant:

<?php
/*
Plugin Name: Ajax Contact Form
Plugin URI:  (Your Plugin URI)
Description: A simple contact form using AJAX.
Author: Abbas Suterwala
Version: 1.0
Author URI: (Your Author URI)
*/
?>

3. Activez le plugin dans votre panneau d'administration WordPress.

4. Créez un sous-dossier nommé js dans ajaxcontactform et ajoutez ajaxcontact.js pour votre code ajax.

5. Ajoutez le code PHP suivant à ajaxcontactform.php pour définir les constantes, les scripts en fidélisation et localiser l'URL AJAX:

define('ACFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('ACFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

function ajaxcontact_enqueuescripts() {
    wp_enqueue_script('ajaxcontact', ACFSURL.'/js/ajaxcontact.js', array('jquery'));
    wp_localize_script( 'ajaxcontact', 'ajaxcontactajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'ajaxcontact_enqueuescripts');

Création de formulaire:

La fonction suivante génère le HTML du formulaire de contact:

function ajaxcontact_show_contact() {
?>
<div>
    <div style="background-color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bE6E6FA ;color:blue;"></div>
    <input type="text" id="ajaxcontactname" placeholder="Name"><br>
    <input type="email" id="ajaxcontactemail" placeholder="Email"><br>
    <input type="text" id="ajaxcontactsubject" placeholder="Subject"><br>
    <textarea id="ajaxcontactcontents" placeholder="Message"></textarea><br>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="ajaxformsendmail(this.form);" style="cursor: pointer">Send Mail</a>
</div>
<?php
}

Ce formulaire sera affiché comme indiqué ci-dessous après avoir été intégré dans une page ou un message:

Ajax Handler:

Cette fonction gère la demande Ajax, valide les données et envoie l'e-mail:

function ajaxcontact_send_mail() {
    $results = '';
    $error = 0;
    $name = isset($_POST['acfname']) ? sanitize_text_field($_POST['acfname']) : '';
    $email = isset($_POST['acfemail']) ? sanitize_email($_POST['acfemail']) : '';
    $subject = isset($_POST['acfsubject']) ? sanitize_text_field($_POST['acfsubject']) : '';
    $contents = isset($_POST['acfcontents']) ? wp_kses_post($_POST['acfcontents']) : '';
    $admin_email = get_option('admin_email');

    if (!is_email($email)) {
        $results = $email." :email address is not valid.";
        $error = 1;
    } elseif (empty($name)) {
        $results = "Name is invalid.";
        $error = 1;
    } elseif (empty($subject)) {
        $results = "Subject is invalid.";
        $error = 1;
    } elseif (empty($contents)) {
        $results = "Content is invalid.";
        $error = 1;
    }

    if ($error == 0) {
        $headers = 'From: ' . $email . "\r\n";
        if (wp_mail($admin_email, $subject, $contents, $headers)) {
            $results = "*Thanks for your mail.";
        } else {
            $results = "*The mail could not be sent.";
        }
    }
    die($results);
}

La gestion des erreurs affichera un message comme celui-ci:

Enregistrement du gestionnaire AJAX:

Enregistrez le gestionnaire AJAX:

add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );

Envoi de la demande Ajax (ajaxContact.js):

function ajaxformsendmail(form) {
    jQuery.ajax({
        type: 'POST',
        url: ajaxcontactajax.ajaxurl,
        data: {
            action: 'ajaxcontact_send_mail',
            acfname: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactname').val(),
            acfemail: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactemail').val(),
            acfsubject: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactsubject').val(),
            acfcontents: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactcontents').val()
        },
        success: function(data, textStatus, XMLHttpRequest) {
            jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontact-response').html(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    return false; // Prevent default form submission
}

Création du shortcode:

function ajaxcontact_shortcode_func( $atts ) {
    ob_start();
    ajaxcontact_show_contact();
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'ajaxcontact', 'ajaxcontact_shortcode_func' );

Le formulaire rempli apparaîtra comme suit:

Sécurité, personnalisation et fonctionnalités avancées:

Le code fourni n'a pas de mesures de sécurité cruciales (vérification nonce). L'ajout de nonces est fortement recommandé pour empêcher les attaques du CSRF. Une personnalisation plus approfondie (style avec CSS, validation améliorée, intégration CAPTCHA, téléchargements de fichiers, etc.) peut être implémentée sur la base d'exigences spécifiques. La section FAQS dans le texte d'origine fournit des conseils sur ces améliorations. N'oubliez pas de désinfecter toutes les entrées utilisateur pour éviter les vulnérabilités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!