Comment ajouter des formulaires de contact à l'aide du plugin - P2 : utilisez WPForms

Dans l'article précédent de la série « Formulaire de contact », nous avons appris ce qu'est un formulaire de contact et comment utiliser le plugin Contact Form 7. Comme promis, j'ai écrit un autre tutoriel avec WPForms et je vais vous le montrer dans cet article.

WPForms est un plugin de formulaire de contact freemium par glisser-déposer avec un aperçu en temps réel. D'après mon expérience, il est facile et pratique de travailler avec ce plugin.

Vous souvenez-vous de cet exemple de formulaire d'inscription à l'université que nous avons créé dans la première partie de cette série ? Maintenant, nous allons créer le même avec WPForms.

Étape 1 : Installer et activer le plugin WPForms

Ce plugin a une version gratuite sur wordpress.org, il vous suffit donc d'installer et d'activer le plugin directement sur l' Admin Dashboard .

Formulaire de contact par WPForms – Générateur de formulaires par glisser-déposer pour WordPress

Auteur(s) : WPForms

Version actuelle : 1.7.1.2

Dernière mise à jour : 18 novembre 2021

wpforms-lite.1.7.1.2.zip

98% d' évaluations 5 000 000+ Installe WP 4.9+ Requiert

Étape 2 : créez un nouveau formulaire de contact et choisissez un modèle

Sur votre tableau de bord d'administration , accédez à WPForms > Ajouter un nouveau .

Voici l'interface avec laquelle vous devez travailler :

Dans la barre latérale gauche, vous pouvez voir 5 sections :

1. Paramétrage : Nommez le formulaire de contact et choisissez son modèle.
2. Champs : Ajoutez et personnalisez des champs pour le formulaire de contact.
3. Paramètres : Configurez les notifications, les confirmations et les paramètres généraux.
4. Marketing : Lien avec des outils d'email marketing tels que Constant Contact, Campaign Monitor, Mailchimp, …
5. Paiements : ajoutez un paiement à partir de PayPal Standard, Stripe et Authorize.Net.

Remarque : je ne lance aucune campagne de marketing par e-mail et mon formulaire ne nécessite pas d'informations de paiement. Par conséquent, je n'ai pas besoin des sections Marketing et Paiements .

Dans la section Configuration , entrez votre nom de formulaire et sélectionnez le modèle souhaité.

Il existe quatre modèles par défaut :

• Formulaire de contact simple
• Formulaire d'inscription à la newsletter
• Suggestion pour
• Formulaire BLANC

À l'exception des formulaires vierges , d'autres modèles ont leurs propres champs prédéfinis que vous pouvez utiliser pour créer des formulaires de contact plus rapidement. De plus, vous pouvez installer des modules complémentaires WPForms (uniquement disponibles sur les versions payantes) pour obtenir plus de modèles.

Dans cet article, j'ai choisi le modèle de formulaire vierge pour créer un formulaire de contact étape par étape depuis le début. Cela vous aidera à tout comprendre plus facilement et plus profondément.

Étape 3 : Ajouter des champs pour le formulaire de contact

Ajouter des champs

Après avoir choisi le modèle de formulaire vierge à l'étape 2, vous serez déplacé vers la section Champs .

Pour ajouter des champs à votre formulaire de contact, faites glisser les champs souhaités depuis l'onglet Ajouter des champs et déposez-les dans le formulaire de contact.

Ensuite, pour personnaliser un champ, cliquez dessus, puis modifiez ses paramètres dans l'onglet Options des champs .

En outre, vous pouvez supprimer ou dupliquer un champ en survolant celui-ci et en cliquant sur les boutons souhaités.

Dans cet article, je dois ajouter les champs suivants :

Après avoir ajouté tous ces champs, vous devez personnaliser chaque champ dans les étapes suivantes.

Personnaliser les options générales pour chaque champ

En général, il existe deux types d'options pour personnaliser chaque champ :

Options de base : tous les champs contiennent ces options et vous devez absolument les utiliser pour rendre votre formulaire de contact clair et compréhensible.

• Libellé : Saisissez le nom du champ que vous souhaitez afficher.
• Description : Il s'agit du texte affiché sous le champ pour indiquer aux utilisateurs ce qu'ils doivent faire.
• Obligatoire : C'est facultatif ! Cochez-la pour rendre ce champ obligatoire à remplir.

Dans les étapes suivantes, lorsque je mentionne « informations de base », cela signifie que vous devez gérer ces options de base.

Options avancées : il existe des fonctionnalités avancées pour chaque champ. C'est facultatif pour vous de les traiter, mais il y a des choses importantes que vous devriez regarder :

• Texte d'espace réservé : afficher un texte à l'intérieur des champs avant que les utilisateurs ne saisissent des données. Ce texte peut être utilisé comme guide ou exemple pour aider les utilisateurs à comprendre facilement ce qu'ils doivent remplir. Par exemple, vous pouvez définir le texte de l' espace réservé du champ de l'e-mail comme « Entrez votre e-mail ».
• Valeur par défaut : s'il y a plusieurs personnes qui ont la même réponse, vous pouvez définir une réponse par défaut pour économiser du temps et des efforts aux utilisateurs. Par exemple, vous créez un formulaire de contact pour les personnes qui vivent à New York, vous pouvez donc entrer une valeur par défaut de « New York » dans le champ « Emplacement ».
• Classes CSS : saisissez les classes CSS dans cette zone pour styliser le champ. Dans l'étape suivante, j'inclurai du code dans cette section pour styliser le formulaire de contact.

Remarque :

• Dans le formulaire de contact 7, vous pouvez utiliser la valeur par défaut comme texte d'espace réservé. Mais c'est plus pratique dans WPForms car vous avez la section Texte d' espace réservé séparée. En outre, WPForms a la section Description qui affiche le texte sous le champ. J'utilise cette méthode car cela améliore l'apparence de mon formulaire de contact.

• Vous pouvez cliquer sur le bouton point d'interrogation à côté des options / champs pour lire les instructions de WPForms pour eux.

De plus, il existe différentes options en fonction de chaque champ. Découvrons ce qu'ils sont !

Personnaliser le champ « Votre nom »

Sélectionnez le champ Texte de ligne simple et remplissez simplement les informations de base :

Dans ce champ, il y a 2 autres options dans la section Options avancées :

• Longueur limite : Cochez-la pour choisir une limite pour le maximum de caractères pouvant être saisis dans le champ.
• Masque de saisie : saisissez des masques de saisie pour exiger des formats spécifiques pour le champ. Lire plus de détails ici.

Personnaliser le champ « Votre numéro de téléphone »

Ce champ n'a rien de spécial. Sélectionnez simplement le champ Numéros et remplissez les informations de base :

Personnaliser le champ « Votre e-mail »

Sélectionnez le champ E - mail et remplissez les informations de base pour le champ :

Ce champ a une autre option de base : Activer la confirmation par e-mail . Vous pouvez le vérifier pour demander aux utilisateurs de fournir leur adresse e-mail deux fois. Cela garantit que leur e-mail est correct.

Personnalisez les champs « Lieu à étudier » et « Principaux »

Tout d'abord, choisissez le champ déroulant . Dans la section Choix, saisissez les options du champ. Vous pouvez cliquer sur (+) (-) pour ajouter/supprimer des choix.

En outre, vous pouvez également cliquer sur le bouton Ajouter en bloc pour ajouter plusieurs choix à la fois. Dans la zone Ajouter des choix , remplissez les choix dans l'ordre souhaité (chaque choix correspond à une ligne), puis cliquez sur Ajouter de nouveaux choix .

De plus, dans ce domaine, il y a 2 options avancées dont vous devriez vous soucier :

• Style : Vous pouvez styliser votre menu déroulant avec deux options : classique et moderne. Le style moderne vous permet de rechercher par mots-clés. Par conséquent, cela fonctionne bien sur les menus avec beaucoup d'options (plus de 10 options).
• Choix dynamiques : permet aux utilisateurs de sélectionner des choix parmi les types de publication ou les taxonomies. Par exemple, si vous choisissez la source de type de publication dynamique comme publications , chaque choix dans le menu déroulant correspond à une publication sur votre site Web.

Personnaliser le champ « S'inscrire à »

Sélectionnez les champs Cases à cocher et entrez des choix tels que les champs déroulants .

Dans ce domaine, il y a 2 options avancées dont vous devriez vous soucier :

• Utiliser des choix d'images : Vous pouvez l'utiliser pour illustrer vos choix et rendre votre formulaire de contact plus attrayant et visualisé.
• Choix aléatoires : Cela peut éviter aux gens de choisir un choix uniquement parce que c'est le premier.

Étape 4 : Configurer le formulaire de contact

Après avoir créé un formulaire de contact, nous devons le configurer. Dans la version gratuite de WPForms, vous pouvez configurer trois sections ci-dessous :

Configurer les paramètres généraux

Le plugin WPForms contient des instructions spécifiques pour chaque option de cette partie. Vous devez cliquer sur le bouton point d'interrogation, le lire attentivement et faire attention aux champs suivants :

• Texte du bouton Soumettre : Dans le formulaire de contact 7, vous devez créer le champ Soumettre . Mais dans WPForms, le bouton d'envoi est intégré. Vous pouvez changer le texte de ce bouton dans cette section en ce que vous voulez, comme S'inscrire à, Envoyer un e-mail, …
• Activer la protection anti-spam : Parfois, les spammeurs peuvent vous déranger avec des tonnes de « formulaires poubelles ». Dans ce cas, vous devez activer cette fonctionnalité d'anti-spam.

Configurer les notifications

Si vous souhaitez recevoir une notification par e-mail chaque fois qu'un utilisateur soumet un formulaire de contact, accédez à Paramètres > Notifications .

Vous pouvez ajouter des « balises intelligentes » ou du texte dans les champs de cette section pour gérer plus facilement les e-mails que vous recevez lorsqu'un utilisateur soumet un formulaire de contact.

Remarque : les balises intelligentes peuvent ajouter automatiquement des informations à vos notifications de formulaire de contact.

Voici un exemple de mes paramètres :

Configurer les confirmations

Dans la section Confirmation , vous pouvez configurer les messages que les utilisateurs reçoivent après avoir soumis des formulaires de contact.

Lorsque vous avez terminé toute la configuration, cliquez simplement sur Enregistrer .

Étape 5 : afficher le formulaire sur les pages/articles

Pour afficher vos formulaires sur les pages/posts, il existe 2 manières.

La première méthode consiste à cliquer sur Intégrer pour afficher votre formulaire sur une page :

Après cela, intégrez le formulaire de contact dans une nouvelle page ou une page existante sur votre site.

La deuxième façon consiste à insérer le shortcode du formulaire de contact dans les pages / publications. Je vous recommande de choisir la deuxième méthode car elle peut afficher le formulaire de contact à la fois sur les articles et les pages . Pour ce faire, sur le tableau de bord d'administration , accédez à WPForms > Tous les formulaires , recherchez votre formulaire de contact et copiez son shortcode.

Ensuite, collez ce shortcode dans les articles / pages souhaités.

Et voici le résultat:

Cela ne ressemble pas encore à l'exemple de formulaire de contact, je dois donc le styler un peu.

Étape 6 : styliser le formulaire

Sur le tableau de bord d'administration , accédez à WPForms > Tous les formulaires , recherchez votre formulaire de contact, puis cliquez sur Modifier .

Maintenant, cliquez sur chaque champ, accédez à Options avancées > Classes CSS et ajoutez les valeurs suivantes :

• Votre nom et ip-100 à : ip-100
• Votre numéro de téléphone , votre adresse e - mail , votre lieu d'étude , votre spécialité : ip-50

Ensuite, allez dans Customizer > Addition CSS , ajoutez ce code :

 .wpforms-field-conteneur {
    affichage : flexible ;
    flex-wrap : envelopper ;
		justifier-contenu : espace-entre
}

.ip-50 {
    largeur : 48 % !important ;
}

.ip-100{
		largeur : 100 % !important ;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	largeur maximale : 100 % ;
}

.ip-100 ul {
	affichage : flexible ;
	justifier-contenu : espace-entre ;
}

div.wpforms-container-full {
    marge inférieure : 24 px ;
    arrière-plan : #eeeeee ;
    rembourrage : 20px ;
}

Enfin, cliquez sur Publier .

Et voici le résultat final :

Le formulaire de contact a l'air mieux maintenant, n'est-ce pas ? Eh bien, nous venons de terminer les dernières étapes pour avoir un formulaire complètement similaire à mon échantillon.

Derniers mots

D'après mon expérience, l'utilisation de l'interface glisser-déposer comme dans WPForms est plus simple et plus rapide que l'utilisation du formulaire de contact 7. En outre, il comporte le bouton d'envoi prédéfini et 2 sections plus utiles comme Texte d' espace réservé et Description . L'aperçu en direct est également très pratique. Cela m'aide à détecter plus facilement les erreurs lors de la création et de la personnalisation du formulaire.

Pour apprendre à utiliser plus de plugins de formulaire de contact, suivez notre prochain article de cette série ! Si vous avez des questions sur WPForms ou suggérez un plugin de formulaire de contact, n'hésitez pas à le laisser dans la section commentaires.