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 de faire preuve de créativité et d’améliorer vos formulaires.
Les meilleurs plugins de formulaire WordPress vous permettent de créer des formulaires sans code, tout en vous permettant également d’ajouter votre propre HTML personnalisé à vos formulaires pour les rendre encore plus avancés.
Ainsi, dans ce didacticiel, nous vous expliquerons comment ajouter du code HTML personnalisé à vos formulaires WordPress à l’aide de 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 expérimenté ou un développeur Web peut souhaiter étendre les fonctionnalités d’un formulaire. L’un des principaux avantages de l’ajout de code HTML personnalisé à votre formulaire est qu’il vous aide à faire en sorte que votre formulaire se démarque 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.
Ainsi, les visiteurs verront quelque chose comme ceci :
De plus, vous pouvez ajouter une image à votre formulaire à l’aide d’un code HTML personnalisé pour rendre le formulaire plus attrayant visuellement ou pour afficher des produits et des options de produits personnalisés.
Et en ajoutant ces fonctionnalités supplémentaires à vos formulaires, vous pouvez faire en sorte que le formulaire se démarque sur la page, aidant ainsi à attirer l’attention de vos visiteurs. Cela peut les encourager à soumettre votre formulaire.
L’ajout de code HTML personnalisé à votre formulaire crée une tonne d’opportunités pour améliorer votre formulaire WordPress. Certaines de ces idées incluent :
- Intégrer une vidéo YouTube: Vous pouvez rendre votre formulaire plus attrayant en insérant une vidéo YouTube ou Vimeo dans votre formulaire.
- Intégrer Google Maps: Sur votre page de contact, vous pouvez afficher l’emplacement de votre entreprise en intégrant Google Maps dans 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 avec une offre exclusive si un utilisateur sélectionne une option spécifique sur votre formulaire. Cette logique conditionnelle intelligente fonctionne très bien pour la vente incitative et pour garder votre formulaire court.
- Affichez votre politique de confidentialité : Ajoutez du 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 emplacement sur vos formulaires pour mettre votre code HTML personnalisé.
Étape 1 : Installer WPForms
La première chose que vous devez faire pour commencer est d’installer et d’activer le plugin WPForms. C’est un générateur de formulaire facile à utiliser qui vous permet de créer n’importe quoi, des formulaires simples aux formulaires avancés. C’est l’un des meilleurs plugins WordPress disponibles.
Si vous débutez dans le téléchargement de plugins, voici un guide étape par étape sur la façon d’installer un plugin WordPress.
De plus, vous devrez créer un formulaire. Allons-y et faisons cela ensuite.
Étape 2 : Créer un formulaire
La prochaine étape consiste à créer votre premier formulaire. Vous pouvez choisir n’importe quel formulaire auquel vous souhaitez ajouter du code HTML personnalisé, mais pour cet exemple, nous allons créer un formulaire de contact simple à l’aide du défi WPForms.
Excellent. Maintenant, ajoutons le champ qui acceptera le code HTML personnalisé ci-dessous.
Étape 2 – Ajouter un bloc HTML à votre formulaire
Maintenant, vous devez ajouter un HTML champ à votre formulaire. Vous pouvez le trouver dans l’onglet Champs, puis terrains de luxe.
Ensuite, faites simplement glisser le champ du panneau de gauche vers le formulaire de droite.
Il est vraiment aussi simple d’ajouter un champ HTML personnalisé à votre formulaire de contact WordPress à l’aide de WPForms.
Étape 3 – Insérez votre code HTML personnalisé
Maintenant que vous avez votre boîte HTML personnalisée sur votre formulaire de contact, vous pouvez ajouter votre extrait de code HTML personnalisé.
Allez-y et allez à votre formulaire sur la droite et cliquez sur le Bloc HTML / Code champ que vous venez d’ajouter.
Ensuite, dirigez-vous vers le panneau de gauche où vous verrez la zone de code HTML ci-dessous Options de champ.
C’est ici que vous pouvez ajouter votre extrait de code HTML personnalisé.
Alors allez-y et collez votre code HTML personnalisé dans ce champ. Vous pouvez ajouter n’importe quel type d’extrait de code HTML personnalisé à votre formulaire.
Lorsque vous avez terminé, appuyez sur le Économiser dans le coin supérieur droit.
Maintenant, allons-y et intégrons ce formulaire sur votre site !
Étape 4 – Ajoutez votre formulaire de contact HTML personnalisé à votre site Web WordPress
Alors maintenant que vous avez créé votre formulaire de contact avec un champ HTML personnalisé à l’aide du plugin WPForms, vous voudrez l’ajouter à votre site Web.
Pour commencer, cliquez sur le Intégrer bouton dans le générateur de formulaire.
Maintenant, lorsque la notification d’insertion apparaît sur une page, continuez et cliquez sur le Créer une nouvelle page bouton.
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 Nous contacter.
Tapez le titre de la page que vous voulez dans la case et cliquez sur Allons-y!
Alors maintenant, vous verrez la nouvelle page avec votre formulaire de contact HTML personnalisé. Vous pouvez continuer et appuyer sur le publier dans le coin supérieur droit de votre page.
Et puis jetez un oeil à votre nouveau formulaire. Vous devriez pouvoir le voir en action.
Vous l’avez fait. Vous avez fini de configurer un formulaire de contact WordPress avec un champ HTML personnalisé.
Réflexions finales sur les formulaires HTML personnalisés
Grand travail. Nous espérons que ce tutoriel vous a aidé à apprendre à configurer ce champ HTML personnalisé sur vos formulaires de contact WordPress.
Alors maintenant que vous avez ajouté du code HTML personnalisé à votre formulaire, vous devriez consulter notre guide sur la conception de formulaires de contact dans WordPress pour vous assurer que votre code personnalisé ressemble à ce que vous souhaitez.
Alors qu’est-ce que tu attends? Commencez dès aujourd’hui avec le plugin de formulaires WordPress le plus puissant et commencez à créer de superbes formulaires personnalisés pour le site Web de votre petite entreprise.
Et si vous aimez cet article, suivez-nous sur Facebook Oui Twitter pour plus de tutoriels WordPress gratuits.
