Construisez votre propre plugin de formulaire de contact WordPress en 5 minutes

Les plats clés

• Développer votre propre plugin de formulaire de contact WordPress peut vous aider à mieux comprendre comment fonctionne WordPress, améliorer vos compétences de développement Web et créer un formulaire adapté à vos besoins spécifiques sans fonctionnalités inutiles.
• L'article fournit un guide étape par étape sur la façon de créer un plugin de formulaire de contact simple et non noir pour WordPress, y compris comment rédiger le code PHP, ajouter une validation de base au formulaire et envoyer les données du formulaire à L'adresse e-mail de l'administrateur du site.
• Le plugin de formulaire de contact résultant peut être facilement intégré dans n'importe quel site Web WordPress en l'activant dans la section «Plugins» du tableau de bord WordPress et en ajoutant le raccourci fourni à un post ou une page.
• L'article traite également de certains plugins de formulaire de contact gratuits populaires disponibles dans le répertoire des plugins WordPress, tels que le formulaire de contact 7, le formulaire de contact avec un e-mail, le formulaire de contact Formget et le formulaire de contact Bestwebsoft.

La plupart des sites Web sont généralement conçus pour se conformer aux pratiques Web standard en incluant une page dédiée où se trouve un formulaire de contact. Cela offre aux visiteurs un moyen facile de contacter le propriétaire du site.

En termes simples, un formulaire de contact a un ensemble de questions et champs qui sont remplis par un visiteur. Les informations sont généralement envoyées automatiquement par e-mail à l'administrateur du site ou à un autre compte de messagerie nommé. Il convient de noter que cette adresse e-mail n'est pas affichée aux visiteurs, donc l'utilisation d'un formulaire de contact réduit généralement le spam e-mail à partir de robots qui récoltent les adresses e-mail nues sur Internet. Les formulaires de contact jouent un rôle très important sur un site Web, où ils sont utilisés pour collecter des commentaires, des demandes et d'autres données des utilisateurs.

Si votre site Web est alimenté par WordPress, il existe de nombreux plugins qui intègrent de manière transparente un formulaire de contact sur votre site Web.

Dans cet article, je fournirai une liste de certains plugins de formulaire de contact WordPress gratuits. Je vais également discuter de la raison pour laquelle vous devriez envisager de lancer votre propre formulaire de contact. Ensuite, je vous fournirai un court tutoriel vous montrant comment créer votre propre plugin de formulaire de contact WordPress.

Plugins de formulaire de contact WordPress

Avant de commencer, nous allons passer en revue quelques-uns des plugins de formulaire de contact gratuits populaires disponibles dans le répertoire du plugin WordPress. Ceux-ci sont super à utiliser, mais encore mieux à apprendre du moment où vous commencez à construire vos propres plugins.

Voici quelques-uns des plugins de formulaire de contact gratuit les plus bien notés pour WordPress:

1. Formulaire de contact 7 - Il s'agit du deuxième plugin le plus populaire avec plus de 18 millions de téléchargements, il pourrait presque être considéré comme le plugin de formulaire de contact de facto pour un site Web WordPress. Le formulaire de contact 7 peut gérer plusieurs formulaires de contact et vous pouvez personnaliser le formulaire et le contenu des e-mails avec un balisage simple. Les caractéristiques du formulaire incluent une soumission alimentée par Ajax, le captcha, le filtrage du spam Akismet et bien plus encore.

2. Formulaire de contact par e-mail - ce plugin crée non seulement des formulaires de contact et envoie les données à une adresse e-mail spécifiée, mais il enregistre également les données du formulaire de contact dans une base de données, fournissant des rapports imprimables et l'option d'exporter les données sélectionnées pour Fichier CSV / Excel.

3. Formage de contact Formget - Un outil de générateur de formulaire de contact en ligne facile en ligne. Tout ce que vous avez à faire est de cliquer sur les champs que vous souhaitez dans votre formulaire, et en quelques secondes, votre formulaire de contact est prêt.

4. Formulaire de contact BestWebswoft - vous permet d'implémenter un formulaire de rétroaction sur une page Web ou un post sans effort. C'est extrêmement facile, et vous n'aurez pas besoin de paramètres supplémentaires, même s'il y en a disponibles.

Pourquoi rouler votre propre plugin de formulaire de contact?

devenant un meilleur développeur

Développer votre propre plugin WordPress vous aide à mieux comprendre comment WordPress fonctionne «sous le capot», ce qui peut vous aider à devenir un développeur Web plus expérimenté. Bien qu'il y ait des dizaines de milliers de plugins dans le répertoire de plugin WordPress à utiliser, être capable de modifier et d'étendre d'autres plugins est une compétence très utile.

construire une meilleure forme

De nombreux plugins de formulaire de contact WordPress sont gonflés. Ils incluent de nombreuses fonctionnalités que vous ne pouvez jamais utiliser. Une utilisation intensive des fichiers JavaScript et CSS est également courante dans certains des plugins de formulaire de contact standard. Cela augmente le nombre de demandes HTTP qui affectent négativement les performances WordPress.

Selon les règles de performance de Yahoo:

80% du temps de réponse de l'utilisateur final est passé sur le front-end. La majeure partie de ce temps est liée à la téléchargement de tous les composants de la page: images, styles de styles, scripts, flash, etc. Réduire le nombre de composants à tour réduit le nombre de demandes HTTP requises pour rendre la page. C'est la clé de pages plus rapides.

Si vous êtes comme moi et que vous désirez un plugin de formulaire de contact simple qui fonctionne, lisez la suite. Je vais vous guider à travers le processus simple pour développer votre propre plugin afin que vous puissiez embrasser les plugins gonflés au revoir. Dans cet exemple, aucun fichier CSS et JavaScript supplémentaire n'est requis, la validation effectuée en utilisant HTML5.

Contact Form Form Plugin Development

En cinq minutes, vous apprendrez à développer un simple formulaire de contact WordPress, c'est une promesse!

prêt? Ensemble? Aller!

Tous les pluignes WordPress sont des fichiers PHP, situés dans le répertoire / WP-CONTENT / PLUGINS / RÉPERTOIRE. Dans notre exemple, le fichier sera appelé SP-form-example.php. Je suppose que vous êtes à l'aise de vous connecter à votre serveur à l'aide de FTP / SFTP / SCP ou SSH.

Si vous souhaitez suivre, créez simplement un fichier appelé sp-form-example.php (l'exemple complet sera disponible à la fin de l'article):

Ensuite, nous ajoutons la fonction html_form_code () qui contient le formulaire de contact html:

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span></span>

La validation de base a été ajoutée au formulaire via l'attribut d'entrée de modèle.

<span>function html_form_code() {
</span>    <span>echo '<form action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'" method="post">';
</form></span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Name (required) <br>';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST[" cf-name esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Email (required) <br>';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST[" cf-email esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Subject (required) <br>';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST[" cf-subject esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Message (required) <br>';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"></p>';
</span>    <span>echo '';
</span><span>}</span>

Le regex dans le formulaire de contact fait la validation du champ suivante:

• [a-za-z0-9]: seulement des lettres, des espaces et des nombres autorisés dans le champ de nom; Les symboles spéciaux sont jugés non valides.

• [a-za-z]: seules les lettres et les espaces sont autorisés dans le champ du sujet.

• Le contrôle du formulaire de messagerie valide le champ d'e-mail, il n'y a donc pas besoin d'un attribut de modèle.

Pour plus d'informations sur le fonctionnement, lisez mon article sur la validation du formulaire côté client avec HTML5 pour comprendre comment l'attribut de modèle aide à la validation du formulaire.

Dépêchez-vous!

D'accord, combien de minutes nous reste-t-il? Quatre minutes! Nous avons encore le temps de terminer cela avec.

La fonction délivrée_mail () désinfecte les données du formulaire et envoie le courrier à l'adresse e-mail de l'administrateur WordPress.

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span></span>

L'assainissement des données de formulaire est effectué par les fonctions internes WordPress suivantes:

• Sanitize_text_field (): désinfecter les données de l'entrée de l'utilisateur.

• Sanitize_Email (): dépouille tous les caractères qui ne sont pas autorisés dans un e-mail.

• ESC_TTEXTAREA (): Échappez le message Message Valeurs de zone de texte.

Le code get_option ('admin_email') récupère par programme l'adresse e-mail de l'administrateur WordPress à partir de la base de données où l'e-mail sera livré.

Vous ne voulez pas que le formulaire de contact envoie le courrier à l'administrateur? Définissez simplement la variable $ sur l'adresse e-mail souhaitée.

Si l'e-mail a été traité avec succès sans aucune erreur par la fonction wp_mail (), le texte Merci de m'avoir contacté, attendez-vous à une réponse bientôt sera affichée, sinon une erreur inattendue s'est produite est affiché.

1 minute et 30 secondes à gauche

La fonction cf_shortcode () est la fonction de rappel qui est appelée lorsque le shortcode de formulaire de contact [SitePoint_Contact_Form] est actif.

<span>function html_form_code() {
</span>    <span>echo '<form action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'" method="post">';
</form></span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Name (required) <br>';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST[" cf-name esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Email (required) <br>';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST[" cf-email esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Subject (required) <br>';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST[" cf-subject esc_attr : . size="40">';
</span>    <span>echo '';
</span>    <span>echo '<p>';
</p></span>    <span>echo 'Your Message (required) <br>';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"></p>';
</span>    <span>echo '';
</span><span>}</span>

Les fonctions ci-dessus appellent les fonctions html_form_code () et deliver_mail () pour afficher le formulaire de contact html formulaire et valider respectivement les données de formulaire.

Enfin, le shortcode [SitePoint_Contact_Form] est enregistré sur WordPress. Alors ajoutez simplement:

<span>function deliver_mail() {
</span>
    <span>// if the submit button is clicked, send the email
</span>    <span>if ( isset( $_POST['cf-submitted'] ) ) {
</span>
        <span>// sanitize form values
</span>        <span>$name    = sanitize_text_field( $_POST["cf-name"] );
</span>        <span>$email   = sanitize_email( $_POST["cf-email"] );
</span>        <span>$subject = sanitize_text_field( $_POST["cf-subject"] );
</span>        <span>$message = esc_textarea( $_POST["cf-message"] );
</span>
        <span>// get the blog administrator's email address
</span>        <span>$to = get_option( 'admin_email' );
</span>
        <span>$headers = "From: <span><span>$name</span> $email</span>>"</span> . "\r\n";

        <span>// If email has been process for sending, display a success message
</span>        <span>if ( wp_mail( $to, $subject, $message, $headers ) ) {
</span>            <span>echo '<div>';
            <span>echo '<p>Thanks for contacting me, expect a response soon.</p>';
</span>            <span>echo '</span>
</div>';
</span>        <span>} else {
</span>            <span>echo 'An unexpected error occurred';
</span>        <span>}
</span>    <span>}
</span><span>}</span>

3, 2, 1… le temps est écoulé!

Félicitations, nous avons réussi à développer notre propre plugin de formulaire de contact WordPress et j'ai tenu ma promesse antérieure.

Maintenant, pour utiliser ce plugin sur votre site Web, activez-le simplement dans la section 'Plugins' de votre tableau de bord WordPress, puis créez un message ou une page, puis ajoutez simplement le shortcode où vous voulez que le formulaire apparaisse [SitePoint_Contact_Form] .

Si vous avez ensuite prévisualisé la page et vous devriez voir le formulaire de contact affiché comme indiqué ci-dessous.

Conclusion

Pour mieux comprendre comment le plugin a été construit et comment l'implémenter sur votre site WordPress, copiez le code ci-dessous, collez-le dans un fichier et téléchargez-le sur votre répertoire / WP-CONTING / PLINGINS / RÉPERTOIRE.

Voici tout l'exemple du plugin:

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span></span>

Ce n'est qu'un exemple simple. Si vous êtes intéressé à en savoir plus sur le développement des plugins, voici quelques autres lectures recommandées:

• Un plugin d'administration WordPress simple (tutoriel)
• un plugin widget wordpress (tutoriel)
• La documentation officielle du développeur du plugin Codex WordPress
• Le canal PHP de point de site

Faites-moi savoir vos pensées et vos questions dans les commentaires.

Questions fréquemment posées (FAQ) sur la construction de votre propre plugin de formulaire de contact WordPress

Quels sont les avantages de la création de mon propre plugin de formulaire de contact WordPress?

La création de votre propre plugin de formulaire de contact WordPress vous donne un contrôle total sur la conception, les fonctionnalités et la gestion des données du formulaire. Vous pouvez personnaliser le formulaire pour correspondre à l'esthétique de votre site Web, ajouter des champs uniques qui répondent à vos besoins spécifiques et gérer les données collectées d'une manière qui convient à vos opérations commerciales. De plus, il élimine le besoin de plugins tiers, ce qui peut parfois ralentir votre site Web ou poser des risques de sécurité.

Ai-je besoin de compétences de codage pour créer un plugin de formulaire de contact WordPress?

Oui , la connaissance de base de PHP, HTML et CSS est nécessaire pour créer un plugin de formulaire de contact WordPress. Cependant, le processus est simplifié dans notre guide, ce qui le rend accessible même pour les débutants. Si vous n'êtes pas à l'aise avec le codage, il existe de nombreux plugins WordPress Forms Builder disponibles qui offrent une interface plus conviviale et glisser-déposer.

Comment puis-je assurer la sécurité de mon formulaire de contact WordPress personnalisé ?

pour assurer la sécurité de votre formulaire de contact WordPress personnalisé, vous devez implémenter des mesures telles que la validation des données et la désinfection, l'utilisation de nonces pour la soumission de formulaire et la protection contre le spam à l'aide de captcha ou Techniques similaires. Les mises à jour et la surveillance régulières sont également cruciales pour maintenir la sécurité du formulaire.

Puis-je ajouter des champs personnalisés à mon formulaire de contact WordPress?

Oui, l'un des avantages de la création de votre propre formulaire de contact WordPress est la possibilité d'ajouter des champs personnalisés. Cela peut aller des entrées de texte simples à des champs plus complexes comme les téléchargements de fichiers, les sélecteurs de date ou même les départs personnalisés. Le processus consiste à modifier le HTML du formulaire et à gérer les données de manière appropriée dans votre code PHP.

Comment puis-je styliser mon formulaire de contact WordPress pour correspondre à la conception de mon site Web?

Le style de contact WordPress pour correspondre à la conception de votre site Web peut être réalisé à l'aide de CSS. Vous pouvez ajouter des classes personnalisées à vos éléments de formulaire et définir les styles du fichier CSS de votre thème ou un plugin CSS personnalisé. Cela vous permet de contrôler les couleurs, les polices, la mise en page et plus encore du formulaire. Soyez géré de différentes manières en fonction de vos besoins. Vous pouvez envoyer les données à une adresse e-mail, les stocker dans votre base de données WordPress ou même vous intégrer à des services tiers tels que les systèmes CRM ou les plateformes de marketing par e-mail. Cela nécessite un codage PHP supplémentaire pour traiter la soumission de formulaire.

Puis-je créer un formulaire de contact WordPress WordPress en plusieurs étapes?

Oui, la création d'un formulaire de contact WordPress en plusieurs étapes est possible mais nécessite plus avancé codage. Cela implique la création de plusieurs pages de formulaires et la gestion des données entre les étapes à l'aide de sessions ou des champs cachés. Les formulaires en plusieurs étapes peuvent améliorer l'expérience utilisateur en décomposant les formes longues en sections gérables.

Comment puis-je ajouter un captcha à mon formulaire de contact WordPress?

Ajout d'un captcha à votre formulaire de contact WordPress implique L'intégration avec un service CAPTCHA comme Google Recaptcha. Cela nécessite d'obtenir des clés API à partir du service et d'ajouter le code HTML et PHP nécessaire à votre formulaire. CAPTCHA aide à protéger votre formulaire contre le spam et les soumissions automatisées.

Puis-je créer un formulaire de contact WordPress réactif?

Oui, la création d'un formulaire de contact WordPress réactif implique l'utilisation de techniques CSS réactives pour s'assurer que le formulaire a l'air réactif Bon et fonctionne bien sur toutes les tailles de périphérique. Cela comprend la définition de largeurs, de marges et de rembourrage appropriés pour les éléments de formulaire et d'utiliser des requêtes multimédias pour ajuster les styles pour différentes tailles d'écran.

Comment puis-je résoudre les problèmes avec mon formulaire de contact WordPress?

Problèmes de dépannage Avec votre formulaire de contact WordPress, implique d'identifier le problème, de vérifier votre code pour les erreurs et de tester le formulaire dans différentes conditions. Les problèmes courants incluent le formulaire qui n'envoie pas de courriels, le formulaire ne s'affiche pas correctement ou les soumissions de formulaires n'étant pas enregistrées. Si vous n'êtes pas en mesure de résoudre le problème, envisagez de demander l'aide de la communauté WordPress ou d'un développeur professionnel.

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!