Ajouter une section HTML personnalis\u00e9e et configurer le formulaire WordPress<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984672306.jpg\")
<\/a><\/p>\nCr\u00e9ez une nouvelle page pour h\u00e9berger votre formulaire de contact WordPress. Connectez-vous \u00e0 votre tableau de bord WordPress et acc\u00e9dez \u00e0 la zone des param\u00e8tres de Pages. L’\u00e9tape 2 consiste \u00e0 s\u00e9lectionner et \u00e0 cliquer sur Ajouter nouveau. Lors de la cr\u00e9ation d’une page de contact, choisissez un nom significatif. Par exemple: \u00abContactez-nous \u00bb.<\/p>\n
Formulaire de contact plus simple – mieux c’est. Cela devrait \u00eatre aussi simple que possible. Vous n’avez besoin que de champs de nom, d’e-mail et de commentaires pour cr\u00e9er un formulaire de contact simple. Il doit \u00eatre copi\u00e9 et plac\u00e9 dans le fichier page-contact.php.<\/p>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984775736.jpg\")
<\/a><\/p>\nL’\u00e9tape 3 consiste \u00e0 cr\u00e9er votre formulaire WordPress apr\u00e8s avoir nomm\u00e9 votre page de contact. Vous pouvez utiliser le bloc de code si vous activez Bootstrap sur votre site WordPress.<\/p>\n
Si vous souhaitez garder un contr\u00f4le total sur l’apparence de votre site, vous pouvez utiliser le bloc de code du formulaire sans bootstrap. Apr\u00e8s avoir s\u00e9lectionn\u00e9 le bloc de code appropri\u00e9 pour votre site WordPress, ajoutez un bloc HTML personnalis\u00e9 Gutenberg. Collez le code du formulaire de votre choix.<\/p>\n
Si vous utilisez une ancienne version de WordPress d\u00e9pourvue du bloc HTML Gutenberg, acc\u00e9dez d’abord aux param\u00e8tres de l’onglet Texte. Collez le code de formulaire de votre choix dans la zone.<\/p>\n
N’oubliez pas d’inclure l’URL du point de terminaison que vous avez trouv\u00e9e dans la propri\u00e9t\u00e9 action du bloc HTML. En cons\u00e9quence, les soumissions seront envoy\u00e9es au formulaire que vous avez cr\u00e9\u00e9 sur votre tableau de bord Getform.<\/p>\n
Cr\u00e9ation d’un mod\u00e8le de page<\/strong><\/h2>\nL’\u00e9tape 1 consiste \u00e0 cr\u00e9er un mod\u00e8le pour une page WordPress. Pour ce faire, copiez le code de page.php dans un nouveau fichier appel\u00e9 page-contact.php. Pour s’assurer que WordPress traite le fichier contact.php comme un mod\u00e8le de page WordPress, nous devons inclure un commentaire en haut du fichier.<\/p>\n
Construire le formulaire<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e898487993c.jpg\")
<\/a><\/p>\nNous devons maintenant cr\u00e9er un formulaire de contact WordPress de base. Copiez et collez simplement le code dans le contenu de l’entr\u00e9e. Il n’est pas difficile d’utiliser ce code HTML explicite pour un formulaire. Il sera utilis\u00e9 plus tard pour d\u00e9terminer si le formulaire a \u00e9t\u00e9 soumis ou non.<\/p>\n
Pr\u00e9traitement des donn\u00e9es<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e898498f8a1.jpg\")
<\/a><\/p>\nLe formulaire cr\u00e9\u00e9 semblera sympa, mais il ne servira \u00e0 rien car il n’enverra aucun e-mail. Ce que nous devons faire, c’est jeter un coup d’\u0153il au formulaire qui a \u00e9t\u00e9 soumis et rev\u00e9rifier toutes les donn\u00e9es. Vous devez v\u00e9rifier si les champs ont \u00e9t\u00e9 correctement remplis avec les donn\u00e9es appropri\u00e9es.<\/p>\n
Si les cases sont remplies avec les donn\u00e9es correctes, nous obtiendrons l’adresse e-mail de l’administrateur du blog et lui enverrons l’e-mail.<\/p>\n
Sinon, aucun e-mail ne sera envoy\u00e9 et l’utilisateur aura des probl\u00e8mes. V\u00e9rifiez que le formulaire a \u00e9t\u00e9 soumis et rempli avec des donn\u00e9es exactes. Si une erreur se produit, comme un champ vide ou une adresse e-mail erron\u00e9e, un avis s’affiche et le formulaire n’est pas soumis. Vous devez corriger ces donn\u00e9es et r\u00e9essayer.<\/p>\n
Ajout d’une v\u00e9rification jQuery<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984aaacb5.jpg\")
<\/a><\/p>\nNotre formulaire est maintenant compl\u00e8tement pr\u00eat. Mais, nous pouvons l’am\u00e9liorer en incorporant la v\u00e9rification c\u00f4t\u00e9 client. Pour ce faire, nous allons utiliser jQuery et le plugin confirm jQuery. Ce plugin est fantastique car il vous permet de v\u00e9rifier rapidement si un formulaire a \u00e9t\u00e9 rempli avec des donn\u00e9es pr\u00e9cises. La premi\u00e8re \u00e9tape consiste \u00e0 t\u00e9l\u00e9charger et \u00e0 installer le plugin de validation dans votre fichier de th\u00e8me.<\/p>\n
Il faut maintenant connecter les fichiers Javascript \u00e0 notre th\u00e8me. Apr\u00e8s cela, le plugin de validation jQuery confirmera le formulaire de contact c\u00f4t\u00e9 client. Comment fonctionne-t-il? Il s\u00e9lectionne les donn\u00e9es de formulaire qui ont la classe CSS requise et v\u00e9rifie qu’elles sont correctement renseign\u00e9es. Si ce n’est pas le cas, un avis s’affiche et vous devrez corriger toutes les saisies de donn\u00e9es erron\u00e9es.<\/p>\n
Formulaire d’am\u00e9lioration<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984bbbb81.jpg\")
<\/a><\/p>\nUtilisez les capacit\u00e9s de WordPress pour prot\u00e9ger l’utilisation de notre formulaire en utilisant des nonces. Les fonctions vous permettront de vous assurer que le contenu d’une demande de formulaire provient du site en cours et non d’un autre. Par cons\u00e9quent, ce n’est pas une protection id\u00e9ale, bien qu’elle prot\u00e8ge dans de nombreuses circonstances.<\/p>\n
Son premier param\u00e8tre est une action, tandis que son deuxi\u00e8me argument est un nom. Ces deux mots sont r\u00e9utilis\u00e9s plus tard dans notre code pour d\u00e9terminer si le nonce soumis correspond \u00e0 ces deux entr\u00e9es.<\/p>\n
Il est important d’inclure des champs nonce dans vos formulaires WordPress. Les nonces peuvent \u00eatre utilis\u00e9s pour v\u00e9rifier qu’un utilisateur a l’intention d’effectuer une action et contribuent \u00e0 la protection contre la falsification de requ\u00eate intersite (CSRF) \u00bb.<\/p>\n
Interception de donn\u00e9es avec mod\u00e8le<\/strong><\/h2>\nConcentrez-vous sur la logique de traitement du formulaire\u00a0: nous quittons le mod\u00e8le et nous nous dirigeons vers le fichier functions.php pour g\u00e9rer les donn\u00e9es re\u00e7ues.<\/p>\n
Il est n\u00e9cessaire de se connecter \u00e0 une action WordPress qui s’ex\u00e9cute avant que les en-t\u00eates de page WordPress ne soient produits. Il s’agit de rediriger potentiellement l’utilisateur vers une autre page apr\u00e8s avoir \u00e9valu\u00e9 l’entr\u00e9e du formulaire.<\/p>\n
La premi\u00e8re condition de notre fonction nous assure qu’une entr\u00e9e de formulaire a \u00e9t\u00e9 soumise. Il existe un lien entre la fonction et l’action de redirection du mod\u00e8le. Pour cette raison, chaque fois que le \u0161age se charge, il sera appel\u00e9.<\/p>\n
Il est donc essentiel de filtrer les requ\u00eates et de s’assurer qu’il est temps d’analyser l’entr\u00e9e du formulaire si elle existe. Cela indique que le bouton d’envoi du formulaire a \u00e9t\u00e9 activ\u00e9 et qu’il est maintenant temps de tester la demande.<\/p>\n
Traitement des donn\u00e9es<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984ccdf3d.jpg\")
<\/a><\/p>\nUne fois nos v\u00e9rifications termin\u00e9es, c’est \u00e0 vous de faire ce que vous voulez avec les donn\u00e9es du formulaire stock\u00e9es dans la variable. Enregistrez le montant du cadeau en tant que variable.<\/p>\n
Apr\u00e8s avoir r\u00e9ussi \u00e0 mettre \u00e0 jour la base de donn\u00e9es, nous devons rediriger l’utilisateur vers une page. En outre, vous devez cr\u00e9er un message de r\u00e9ussite, que vous pouvez cr\u00e9er \u00e0 l’aide du tableau de bord.<\/p>\n
La gestion des erreurs<\/strong><\/h2>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-188795-61e8984dd1514.jpg\")
<\/a><\/p>\nVous devez vous assurer de soumettre et de remplir le formulaire de mani\u00e8re appropri\u00e9e. Si une erreur se produit, comme un champ vide ou une adresse e-mail erron\u00e9e, vous recevrez un avis et le formulaire ne pourra pas \u00eatre soumis.<\/p>\n
Apr\u00e8s cela, vous devez cr\u00e9er et afficher des avertissements d’erreur sous la case associ\u00e9e. Cr\u00e9ez quelque chose de simple, comme "Veuillez entrer votre nom". Vous obtiendrez un mod\u00e8le de page de formulaire complet que vous pourrez utiliser.<\/p>\n
Fin des r\u00e9flexions sur la fa\u00e7on de cr\u00e9er un formulaire dans WordPress sans plugin<\/strong><\/h2>\nUtiliser WordPress pour cr\u00e9er un site Web est un choix tr\u00e8s populaire pour beaucoup. Il offre diverses options \u00e0 ses utilisateurs. L’utilisateur est propos\u00e9 de choisir un th\u00e8me sp\u00e9cifique pour le site, d’organiser ce que l’on souhaite afficher sur son site dans les moindres d\u00e9tails\u2026 Il permet de cr\u00e9er et d’ajouter de nouvelles pages et contenus avec ou sans l’utilisation des plugins.<\/p>\n
WordPress est un excellent choix pour cr\u00e9er un site Web ou un blog. C’est bon pour les d\u00e9butants et aussi pour les personnes qui sont plus familiaris\u00e9es avec la cr\u00e9ation de sites Web et l’utilisation du code.<\/p>\n
Dans cet article, nous vous avons pr\u00e9sent\u00e9 comment cr\u00e9er un formulaire dans WordPress sans plugin pour votre site WordPress.<\/p>\n
La cr\u00e9ation de formulaires est essentielle lors de la conception d’un WordPress ou de n’importe quel site. Il faudra peut-\u00eatre un peu plus de connaissances sur le code. Mais, il y a toujours des plugins pour faciliter le travail pendant que vous apprenez encore \u00e0 travailler avec le code. Soyez patient, apprenez et vous cr\u00e9erez d’\u00e9tonnants sites WordPress ou blogs.<\/p>\n
Si vous avez aim\u00e9 lire cet article sur la fa\u00e7on de cr\u00e9er un formulaire dans WordPress sans plugin, vous devriez consulter celui-ci sur la fa\u00e7on de masquer l’auteur dans WordPress<\/a>.<\/p>\nNous avons \u00e9galement \u00e9crit sur quelques sujets connexes comme comment int\u00e9grer un formulaire Google dans WordPress<\/a>, comment t\u00e9l\u00e9charger un fichier HTML dans WordPress<\/a>, o\u00f9 sont stock\u00e9es les pages WordPress<\/a> et comment supprimer des th\u00e8mes WordPress<\/a>.<\/p>\n
<\/a><\/p>\nCr\u00e9ez une nouvelle page pour h\u00e9berger votre formulaire de contact WordPress. Connectez-vous \u00e0 votre tableau de bord WordPress et acc\u00e9dez \u00e0 la zone des param\u00e8tres de Pages. L’\u00e9tape 2 consiste \u00e0 s\u00e9lectionner et \u00e0 cliquer sur Ajouter nouveau. Lors de la cr\u00e9ation d’une page de contact, choisissez un nom significatif. Par exemple: \u00abContactez-nous \u00bb.<\/p>\n
Formulaire de contact plus simple – mieux c’est. Cela devrait \u00eatre aussi simple que possible. Vous n’avez besoin que de champs de nom, d’e-mail et de commentaires pour cr\u00e9er un formulaire de contact simple. Il doit \u00eatre copi\u00e9 et plac\u00e9 dans le fichier page-contact.php.<\/p>\n
L’\u00e9tape 3 consiste \u00e0 cr\u00e9er votre formulaire WordPress apr\u00e8s avoir nomm\u00e9 votre page de contact. Vous pouvez utiliser le bloc de code si vous activez Bootstrap sur votre site WordPress.<\/p>\n Si vous souhaitez garder un contr\u00f4le total sur l’apparence de votre site, vous pouvez utiliser le bloc de code du formulaire sans bootstrap. Apr\u00e8s avoir s\u00e9lectionn\u00e9 le bloc de code appropri\u00e9 pour votre site WordPress, ajoutez un bloc HTML personnalis\u00e9 Gutenberg. Collez le code du formulaire de votre choix.<\/p>\n Si vous utilisez une ancienne version de WordPress d\u00e9pourvue du bloc HTML Gutenberg, acc\u00e9dez d’abord aux param\u00e8tres de l’onglet Texte. Collez le code de formulaire de votre choix dans la zone.<\/p>\n N’oubliez pas d’inclure l’URL du point de terminaison que vous avez trouv\u00e9e dans la propri\u00e9t\u00e9 action du bloc HTML. En cons\u00e9quence, les soumissions seront envoy\u00e9es au formulaire que vous avez cr\u00e9\u00e9 sur votre tableau de bord Getform.<\/p>\n L’\u00e9tape 1 consiste \u00e0 cr\u00e9er un mod\u00e8le pour une page WordPress. Pour ce faire, copiez le code de page.php dans un nouveau fichier appel\u00e9 page-contact.php. Pour s’assurer que WordPress traite le fichier contact.php comme un mod\u00e8le de page WordPress, nous devons inclure un commentaire en haut du fichier.<\/p>\n Nous devons maintenant cr\u00e9er un formulaire de contact WordPress de base. Copiez et collez simplement le code dans le contenu de l’entr\u00e9e. Il n’est pas difficile d’utiliser ce code HTML explicite pour un formulaire. Il sera utilis\u00e9 plus tard pour d\u00e9terminer si le formulaire a \u00e9t\u00e9 soumis ou non.<\/p>\n Le formulaire cr\u00e9\u00e9 semblera sympa, mais il ne servira \u00e0 rien car il n’enverra aucun e-mail. Ce que nous devons faire, c’est jeter un coup d’\u0153il au formulaire qui a \u00e9t\u00e9 soumis et rev\u00e9rifier toutes les donn\u00e9es. Vous devez v\u00e9rifier si les champs ont \u00e9t\u00e9 correctement remplis avec les donn\u00e9es appropri\u00e9es.<\/p>\n Si les cases sont remplies avec les donn\u00e9es correctes, nous obtiendrons l’adresse e-mail de l’administrateur du blog et lui enverrons l’e-mail.<\/p>\n Sinon, aucun e-mail ne sera envoy\u00e9 et l’utilisateur aura des probl\u00e8mes. V\u00e9rifiez que le formulaire a \u00e9t\u00e9 soumis et rempli avec des donn\u00e9es exactes. Si une erreur se produit, comme un champ vide ou une adresse e-mail erron\u00e9e, un avis s’affiche et le formulaire n’est pas soumis. Vous devez corriger ces donn\u00e9es et r\u00e9essayer.<\/p>\n Notre formulaire est maintenant compl\u00e8tement pr\u00eat. Mais, nous pouvons l’am\u00e9liorer en incorporant la v\u00e9rification c\u00f4t\u00e9 client. Pour ce faire, nous allons utiliser jQuery et le plugin confirm jQuery. Ce plugin est fantastique car il vous permet de v\u00e9rifier rapidement si un formulaire a \u00e9t\u00e9 rempli avec des donn\u00e9es pr\u00e9cises. La premi\u00e8re \u00e9tape consiste \u00e0 t\u00e9l\u00e9charger et \u00e0 installer le plugin de validation dans votre fichier de th\u00e8me.<\/p>\n Il faut maintenant connecter les fichiers Javascript \u00e0 notre th\u00e8me. Apr\u00e8s cela, le plugin de validation jQuery confirmera le formulaire de contact c\u00f4t\u00e9 client. Comment fonctionne-t-il? Il s\u00e9lectionne les donn\u00e9es de formulaire qui ont la classe CSS requise et v\u00e9rifie qu’elles sont correctement renseign\u00e9es. Si ce n’est pas le cas, un avis s’affiche et vous devrez corriger toutes les saisies de donn\u00e9es erron\u00e9es.<\/p>\n Utilisez les capacit\u00e9s de WordPress pour prot\u00e9ger l’utilisation de notre formulaire en utilisant des nonces. Les fonctions vous permettront de vous assurer que le contenu d’une demande de formulaire provient du site en cours et non d’un autre. Par cons\u00e9quent, ce n’est pas une protection id\u00e9ale, bien qu’elle prot\u00e8ge dans de nombreuses circonstances.<\/p>\n Son premier param\u00e8tre est une action, tandis que son deuxi\u00e8me argument est un nom. Ces deux mots sont r\u00e9utilis\u00e9s plus tard dans notre code pour d\u00e9terminer si le nonce soumis correspond \u00e0 ces deux entr\u00e9es.<\/p>\n Il est important d’inclure des champs nonce dans vos formulaires WordPress. Les nonces peuvent \u00eatre utilis\u00e9s pour v\u00e9rifier qu’un utilisateur a l’intention d’effectuer une action et contribuent \u00e0 la protection contre la falsification de requ\u00eate intersite (CSRF) \u00bb.<\/p>\n Concentrez-vous sur la logique de traitement du formulaire\u00a0: nous quittons le mod\u00e8le et nous nous dirigeons vers le fichier functions.php pour g\u00e9rer les donn\u00e9es re\u00e7ues.<\/p>\n Il est n\u00e9cessaire de se connecter \u00e0 une action WordPress qui s’ex\u00e9cute avant que les en-t\u00eates de page WordPress ne soient produits. Il s’agit de rediriger potentiellement l’utilisateur vers une autre page apr\u00e8s avoir \u00e9valu\u00e9 l’entr\u00e9e du formulaire.<\/p>\n La premi\u00e8re condition de notre fonction nous assure qu’une entr\u00e9e de formulaire a \u00e9t\u00e9 soumise. Il existe un lien entre la fonction et l’action de redirection du mod\u00e8le. Pour cette raison, chaque fois que le \u0161age se charge, il sera appel\u00e9.<\/p>\n Il est donc essentiel de filtrer les requ\u00eates et de s’assurer qu’il est temps d’analyser l’entr\u00e9e du formulaire si elle existe. Cela indique que le bouton d’envoi du formulaire a \u00e9t\u00e9 activ\u00e9 et qu’il est maintenant temps de tester la demande.<\/p>\n Une fois nos v\u00e9rifications termin\u00e9es, c’est \u00e0 vous de faire ce que vous voulez avec les donn\u00e9es du formulaire stock\u00e9es dans la variable. Enregistrez le montant du cadeau en tant que variable.<\/p>\n Apr\u00e8s avoir r\u00e9ussi \u00e0 mettre \u00e0 jour la base de donn\u00e9es, nous devons rediriger l’utilisateur vers une page. En outre, vous devez cr\u00e9er un message de r\u00e9ussite, que vous pouvez cr\u00e9er \u00e0 l’aide du tableau de bord.<\/p>\n Vous devez vous assurer de soumettre et de remplir le formulaire de mani\u00e8re appropri\u00e9e. Si une erreur se produit, comme un champ vide ou une adresse e-mail erron\u00e9e, vous recevrez un avis et le formulaire ne pourra pas \u00eatre soumis.<\/p>\n Apr\u00e8s cela, vous devez cr\u00e9er et afficher des avertissements d’erreur sous la case associ\u00e9e. Cr\u00e9ez quelque chose de simple, comme "Veuillez entrer votre nom". Vous obtiendrez un mod\u00e8le de page de formulaire complet que vous pourrez utiliser.<\/p>\n Utiliser WordPress pour cr\u00e9er un site Web est un choix tr\u00e8s populaire pour beaucoup. Il offre diverses options \u00e0 ses utilisateurs. L’utilisateur est propos\u00e9 de choisir un th\u00e8me sp\u00e9cifique pour le site, d’organiser ce que l’on souhaite afficher sur son site dans les moindres d\u00e9tails\u2026 Il permet de cr\u00e9er et d’ajouter de nouvelles pages et contenus avec ou sans l’utilisation des plugins.<\/p>\n WordPress est un excellent choix pour cr\u00e9er un site Web ou un blog. C’est bon pour les d\u00e9butants et aussi pour les personnes qui sont plus familiaris\u00e9es avec la cr\u00e9ation de sites Web et l’utilisation du code.<\/p>\n Dans cet article, nous vous avons pr\u00e9sent\u00e9 comment cr\u00e9er un formulaire dans WordPress sans plugin pour votre site WordPress.<\/p>\n La cr\u00e9ation de formulaires est essentielle lors de la conception d’un WordPress ou de n’importe quel site. Il faudra peut-\u00eatre un peu plus de connaissances sur le code. Mais, il y a toujours des plugins pour faciliter le travail pendant que vous apprenez encore \u00e0 travailler avec le code. Soyez patient, apprenez et vous cr\u00e9erez d’\u00e9tonnants sites WordPress ou blogs.<\/p>\n Si vous avez aim\u00e9 lire cet article sur la fa\u00e7on de cr\u00e9er un formulaire dans WordPress sans plugin, vous devriez consulter celui-ci sur la fa\u00e7on de masquer l’auteur dans WordPress<\/a>.<\/p>\n Nous avons \u00e9galement \u00e9crit sur quelques sujets connexes comme comment int\u00e9grer un formulaire Google dans WordPress<\/a>, comment t\u00e9l\u00e9charger un fichier HTML dans WordPress<\/a>, o\u00f9 sont stock\u00e9es les pages WordPress<\/a> et comment supprimer des th\u00e8mes WordPress<\/a>.<\/p>\n<\/a><\/p>\nCr\u00e9ation d’un mod\u00e8le de page<\/strong><\/h2>\n
Construire le formulaire<\/strong><\/h2>\n
<\/a><\/p>\nPr\u00e9traitement des donn\u00e9es<\/strong><\/h2>\n
<\/a><\/p>\nAjout d’une v\u00e9rification jQuery<\/strong><\/h2>\n
<\/a><\/p>\nFormulaire d’am\u00e9lioration<\/strong><\/h2>\n
<\/a><\/p>\nInterception de donn\u00e9es avec mod\u00e8le<\/strong><\/h2>\n
Traitement des donn\u00e9es<\/strong><\/h2>\n
<\/a><\/p>\nLa gestion des erreurs<\/strong><\/h2>\n
<\/a><\/p>\nFin des r\u00e9flexions sur la fa\u00e7on de cr\u00e9er un formulaire dans WordPress sans plugin<\/strong><\/h2>\n