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
Quels sont les avantages de l'utilisation de WordPress sur le codage d'un site Web à partir de zéro?Quels sont les avantages de l'utilisation de WordPress sur le codage d'un site Web à partir de zéro?Apr 25, 2025 am 12:16 AM

WordpressisadvantageousovercodingawebsitefromscratchDueto: 1) facilitésofuseandfasterdevelopment, 2) flexibilité et échec, 3) Communie solide.

Qu'est-ce qui fait de WordPress un système de gestion de contenu?Qu'est-ce qui fait de WordPress un système de gestion de contenu?Apr 24, 2025 pm 05:25 PM

WordPressisacmsDuetOtsEaseOfuse, personnalisation, usermanagement, référencement, et CommunitySupport.1)

Comment ajouter une boîte de commentaires à WordPressComment ajouter une boîte de commentaires à WordPressApr 20, 2025 pm 12:15 PM

Activez les commentaires sur votre site Web WordPress pour fournir aux visiteurs une plate-forme pour participer aux discussions et partager les commentaires. Pour ce faire, suivez ces étapes: Activez les commentaires: Dans le tableau de bord, accédez à Paramètres & GT; Discussions et sélectionnez la case Autoriser les commentaires. Créez un formulaire de commentaire: Dans l'éditeur, cliquez sur Ajouter un bloc et recherchez le bloc de commentaires pour l'ajouter au contenu. Formulaire de commentaire personnalisé: Personnalisez les blocs de commentaires en définissant des titres, des étiquettes, des espaces réservés et du texte des bouton. Enregistrer les modifications: cliquez sur Mettre à jour pour enregistrer la zone de commentaire et l'ajouter à la page ou à l'article.

Comment copier des sous-sites de WordPressComment copier des sous-sites de WordPressApr 20, 2025 pm 12:12 PM

Comment copier un subsite WordPress? Étapes: Créez un sous-site dans le site principal. Clonage du sous-site dans le site principal. Importez le clone dans l'emplacement cible. Mettez à jour le nom de domaine (facultatif). Plugins et thèmes séparés.

Comment écrire une en-tête d'un wordpressComment écrire une en-tête d'un wordpressApr 20, 2025 pm 12:09 PM

Les étapes pour créer un en-tête personnalisé dans WordPress sont les suivantes: modifier le fichier de thème "header.php". Ajoutez le nom et la description de votre site Web. Créez un menu de navigation. Ajoutez une barre de recherche. Enregistrez les modifications et affichez votre en-tête personnalisé.

Comment afficher les commentaires WordPressComment afficher les commentaires WordPressApr 20, 2025 pm 12:06 PM

Activer les commentaires dans le site Web de WordPress: 1. Connectez-vous au panneau d'administration, accédez à "Paramètres" - "Discussions" et vérifiez "Autoriser les commentaires"; 2. Sélectionnez un emplacement pour afficher les commentaires; 3. Personnaliser les commentaires; 4. Gérer les commentaires, approuver, rejeter ou supprimer; 5. Utiliser & lt ;? php commentaires_template (); ? & gt; Tags pour afficher les commentaires; 6. Activer les commentaires imbriqués; 7. Ajuster la forme du commentaire; 8. Utilisez des plugins et des codes de vérification pour empêcher les commentaires du spam; 9. Encouragez les utilisateurs à utiliser Gravatar Avatar; 10. Créer des commentaires pour se référer à

Comment télécharger le code source pour WordPressComment télécharger le code source pour WordPressApr 20, 2025 pm 12:03 PM

Vous pouvez installer le plug-in FTP via WordPress, configurer la connexion FTP, puis télécharger le code source à l'aide du gestionnaire de fichiers. Les étapes incluent: l'installation du plug-in FTP, la configuration de la connexion, la navigation sur l'emplacement de téléchargement, le téléchargement de fichiers et la vérification que le téléchargement est réussi.

Comment copier le code WordPressComment copier le code WordPressApr 20, 2025 pm 12:00 PM

Comment copier WordPress Code? Copier à partir de l'interface d'administration: connectez-vous au site Web WordPress, accédez à la destination, sélectionnez le code et appuyez sur Ctrl C (Windows) / Commande C (Mac) pour copier le code. Copiez à partir d'un fichier: connectez-vous au serveur à l'aide de SSH ou FTP, accédez au fichier thème ou plug-in, sélectionnez le code et appuyez sur Ctrl C (Windows) / Commande C (Mac) pour copier le code.

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

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

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),

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel