recherche
MaisonTutoriel CMSWordPresseConstruire 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)
*/
?>
  1. Activez le plugin dans votre panneau d'administration WordPress.

Building a WordPress Plugin to Create an AJAX Contact Form

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

Building a WordPress Plugin to Create an AJAX Contact Form

  1. 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:

Building a WordPress Plugin to Create an AJAX Contact Form

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:

Building a WordPress Plugin to Create an AJAX Contact Form

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:

Building a WordPress Plugin to Create an AJAX Contact Form

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Les 5 meilleurs IDE pour le développement WordPress (et pourquoi)Les 5 meilleurs IDE pour le développement WordPress (et pourquoi)Mar 03, 2025 am 10:53 AM

Choisir le bon environnement de développement intégré (IDE) pour le développement WordPress Depuis dix ans, j'ai exploré de nombreux environnements de développement intégrés (IDE) pour le développement WordPress. La variété pure - gratuite à commerciale, basique à FEA

Créer des plugins WordPress avec des techniques OOPCréer des plugins WordPress avec des techniques OOPMar 06, 2025 am 10:30 AM

Ce didacticiel montre la construction d'un plugin WordPress à l'aide de principes de programmation orientée objet (OOP), tirant parti de l'API Dribbble. Affinons le texte pour plus de clarté et de concision tout en préservant la signification et la structure d'origine. Objet-ori

Comment transmettre des données PHP et des chaînes à JavaScript dans WordPressComment transmettre des données PHP et des chaînes à JavaScript dans WordPressMar 07, 2025 am 09:28 AM

Meilleures pratiques pour passer des données PHP à JavaScript: une comparaison de WP_localize_script et WP_ADD_INLINE_Script Le stockage des données dans les chaînes statiques dans vos fichiers PHP est une pratique recommandée. Si ces données sont nécessaires dans votre code JavaScript, incorporez

Comment intégrer et protéger les fichiers PDF avec un plugin WordPressComment intégrer et protéger les fichiers PDF avec un plugin WordPressMar 09, 2025 am 11:08 AM

Ce guide montre comment intégrer et protéger les fichiers PDF dans les articles et pages WordPress à l'aide d'un plugin PDF WordPress. Les PDF offrent un format convivial et universellement accessible pour divers contenus, des catalogues aux présentations. Cette méthode Ens

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire