Souhaitez-vous intégrer des extraits de code HTML personnalisés dans vos formulaires de contact WordPress ? L'ajout de code HTML personnalisé à votre formulaire est un excellent moyen d'être créatif et d'améliorer vos formulaires.
Les meilleurs plugins de formulaires WordPress vous permettent de créer des formulaires sans code, tout en vous permettant d'ajouter votre propre HTML personnalisé à vos formulaires pour les rendre encore plus avancés.
Dans ce tutoriel, nous allons vous expliquer comment ajouter du HTML personnalisé à vos formulaires WordPress en utilisant WPForms.
Pourquoi ajouter du HTML personnalisé à votre formulaire de contact ?
Vous vous demandez peut-être pourquoi vous devriez ajouter du HTML à vos formulaires WordPress.
Dans de nombreux cas, un utilisateur avancé ou un développeur web peut vouloir étendre les fonctionnalités d'un formulaire. L'un des principaux avantages de l'ajout de HTML personnalisé à votre formulaire est qu'il vous aide à le faire ressortir du reste du contenu.
Dans l'exemple ci-dessous, vous pouvez voir à quel point il est facile d'ajouter un lien vers une politique de confidentialité dans un texte de votre formulaire de contact.
Les visiteurs verront donc quelque chose comme ceci :
Vous pouvez également ajouter une image à votre formulaire à l'aide d'un code HTML personnalisé pour rendre le formulaire plus attrayant ou pour présenter des produits et des options de produits personnalisés.
En ajoutant ces caractéristiques supplémentaires à vos formulaires, vous pouvez faire ressortir le formulaire sur la page, ce qui permet d'attirer l'attention de vos visiteurs. Cela peut les encourager à soumettre votre formulaire.
L'ajout de HTML personnalisé à votre formulaire crée une multitude d'opportunités pour améliorer votre formulaire WordPress. Voici quelques-unes de ces idées :
- Intégrer une vidéo YouTube: Vous pouvez rendre votre formulaire plus attrayant en y intégrant une vidéo YouTube ou Vimeo.
- Intégrer Google Maps: Sur votre page de contact, vous pouvez indiquer l'emplacement de votre entreprise en intégrant Google Maps à votre formulaire de contact.
- Afficher une offre exclusive avec une logique conditionnelle : Si vous créez un formulaire de commande, vous pouvez afficher un bloc HTML contenant une offre exclusive si l'utilisateur sélectionne une option spécifique dans votre formulaire. Cette logique conditionnelle intelligente est idéale pour les ventes incitatives et pour réduire la longueur du formulaire.
- Affichez votre politique de confidentialité : Ajoutez un texte avec un lien vers votre politique de confidentialité directement sur votre formulaire.
Comment ajouter un code HTML personnalisé à votre formulaire de contact WordPress
Si vous préférez lire le tutoriel, suivez ces instructions pour créer un endroit sur vos formulaires où placer votre code HTML personnalisé.
Étape 1 : Installer WPForms
La première chose à faire pour commencer est d'installer et d'activer le plugin WPForms. Il s'agit d'un constructeur de formulaires facile à utiliser qui vous permet de créer des formulaires simples ou avancés. C'est l'un des meilleurs plugins WordPress existants.
Si vous n'avez pas l'habitude de télécharger des plugins, voici un guide étape par étape sur l'installation d'un plugin WordPress.
Vous devez également créer un formulaire. C'est ce que nous allons faire maintenant.
Étape 2 : Créer un formulaire
L'étape suivante consiste à créer votre premier formulaire. Vous pouvez choisir n'importe quel formulaire auquel vous souhaitez ajouter un HTML personnalisé, mais pour cet exemple, nous allons créer un simple formulaire de contact en utilisant le défi WPForms.
C'est parfait. Maintenant, ajoutons le champ qui acceptera le HTML personnalisé.
Étape 2 : Ajouter un bloc HTML à votre formulaire
Vous devez maintenant ajouter un champ HTML à votre formulaire. Vous pouvez le trouver sous l'onglet Champs, puis Champs fantaisie.
Il suffit ensuite de faire glisser le champ du panneau de gauche vers le formulaire de droite.
Il est vraiment très facile d'ajouter un champ HTML personnalisé à votre formulaire de contact WordPress en utilisant WPForms.
Étape 3 : Insérer votre code HTML personnalisé
Maintenant que votre boîte HTML personnalisée se trouve sur votre formulaire de contact, vous pouvez ajouter votre extrait de code HTML personnalisé.
Allez dans votre formulaire à droite et cliquez sur le champ du bloc HTML / Code que vous venez d'ajouter.
Ensuite, dirigez-vous vers le panneau de gauche où vous verrez la case Code HTML sous Options de champ.
C'est ici que vous pouvez ajouter votre extrait de code HTML personnalisé.
Allez-y et collez votre code HTML personnalisé dans ce champ. Vous pouvez ajouter n'importe quel type de code HTML personnalisé à votre formulaire.
Lorsque vous avez terminé, cliquez sur le bouton Enregistrer dans le coin supérieur droit.
Maintenant, allons-y et mettons ce formulaire sur votre site !
Étape 4 : Ajouter votre formulaire de contact HTML personnalisé à votre site Web WordPress
Maintenant que vous avez construit votre formulaire de contact avec un champ HTML personnalisé à l'aide du plugin WPForms, vous allez vouloir l'ajouter à votre site web.
Pour commencer, cliquez sur le bouton Embed dans le générateur de formulaires.
Lorsque la notification Intégrer dans une page apparaît, cliquez sur le bouton Créer une nouvelle page .
Ensuite, WPForms vous demandera de nommer votre page. Pour notre exemple, nous ajoutons ce formulaire de contact HTML personnalisé à une page de contact, nous l'appellerons donc Contact Us.
Tapez le titre de la page que vous souhaitez dans la case et cliquez sur Let's Go !
Vous voyez maintenant la nouvelle page avec votre formulaire de contact HTML personnalisé. Vous pouvez aller de l'avant et cliquer sur le bouton Publier dans le coin supérieur droit de votre page.
Ensuite, jetez un coup d'œil à votre nouveau formulaire. Vous devriez pouvoir le voir à l'œuvre.
Vous l'avez fait. Vous avez terminé la configuration d'un formulaire de contact WordPress avec un champ HTML personnalisé.
Dernières réflexions sur les formulaires HTML personnalisés
Bon travail. Nous espérons que ce tutoriel vous a aidé à apprendre comment configurer ce champ HTML personnalisé sur vos formulaires de contact dans WordPress.
Maintenant que vous avez ajouté du HTML personnalisé à votre formulaire, nous vous conseillons de consulter notre guide sur le style des formulaires de contact dans WordPress afin de vous assurer que votre code personnalisé ressemble à ce que vous souhaitez.
Alors qu'attendez-vous ? Commencez dès aujourd'hui à utiliser le plugin de formulaires WordPress le plus puissant et commencez à créer facilement de magnifiques formulaires personnalisés pour le site web de votre petite entreprise.
Et si vous avez aimé cet article, suivez-nous sur Facebook et Twitter pour d'autres tutoriels gratuits sur WordPress.
