Comment créer des formulaires de contact dans WordPress

Chaque type de site Web, y compris la boutique en ligne, le blog, l'entreprise ou toute autre variante, a généralement une certaine structure composée d'un certain nombre de pages clés. Un site d'entreprise ordinaire a généralement une page d'accueil, une page à propos, une section d'équipe ou de personnel, un blog et, bien sûr, la page de contact où les visiteurs peuvent trouver l'adresse e-mail, le numéro de téléphone ou l'adresse physique pour pouvoir entrer en contact avec le propriétaire du site. .

Chaque page "Contact" comprend généralement un formulaire de contact avec un nombre standard de champs obligatoires à remplir et un bouton "Soumettre" pour envoyer la requête. Le nombre et les types de ces champs peuvent varier en fonction des préférences du propriétaire d'un site Web.

Quelqu'un veut connaître l'emplacement d'un visiteur qui entre en contact, alors il place les cases à cocher nécessaires dans le formulaire de contact, d'autres veulent connaître l'âge, le sexe, la profession, la raison du contact ou d'autres données, alors ils ajoutent le champs obligatoires pour qu'un visiteur les remplisse avec ses informations personnelles avant de cliquer sur le bouton "Envoyer".

Dans cet article, je vais vous montrer comment créer un formulaire de contact à l'aide de 2 solutions différentes. J'utiliserai un plugin Contact Form 7 traditionnel qui est inclus dans le pack des thèmes WP premium les plus modernes et du plugin WP Forms disponible dans le référentiel WordPress officiel.

Création d'un formulaire "Entrez en contact" avec le formulaire de contact 7

Donc, comme toujours, nous commençons par installer et activer les deux plugins. Commencez par installer le premier, puis allez dans Contact -> Ajouter nouveau pour créer un nouveau formulaire de contact.

Par défaut, vous disposez déjà de deux exemples de formulaires de contact dans le menu Contact -> Formulaires de contact. Voici à quoi ressemble un formulaire de contact standard : il s'agit de l'ensemble de codes abrégés qui crée la structure du formulaire que vous voyez habituellement sur la page Contacts.

Voici ce formulaire de contact en direct. Il comprend des champs tels que Nom, E-mail, Objet, Message et un bouton "Envoyer un message". Un formulaire de contact aussi court est le moyen le plus simple d'entrer en contact avec vous.

Un visiteur n'est pas obligé de remplir beaucoup de champs, ce qui peut être assez ennuyeux pour lui. Ainsi, ils peuvent facilement et rapidement entrer en contact avec vous simplement en remplissant quelques champs obligatoires du formulaire de contact en quelques minutes.

Comme nous l'avons déjà mentionné, parfois plus de champs sont requis, vous pouvez donc facilement les ajouter dans votre formulaire de contact à l'aide de shortcodes supplémentaires du formulaire de contact 7.

Ajout de cases à cocher dans votre formulaire de contact

Par exemple, je souhaite ajouter une case à cocher de sélection de pays dans mon formulaire de contact. Je choisis donc un shortcode de cases à cocher, et maintenant le générateur de balises de formulaire est ouvert.

Je coche la case 'Champ obligatoire' pour rendre ce champ obligatoire à remplir avant d'envoyer un message. Ensuite, je sélectionne un nom de ma case à cocher comme "votre pays" et je mets 3 options dans la fenêtre "Options" pour permettre à mes visiteurs de sélectionner la bonne variante parmi les 3 disponibles (je m'attends à ce que mes visiteurs viennent des États-Unis, de l'Inde ou Grande-Bretagne).

Bien sûr, vous pouvez ajouter plus d'options à sélectionner et insérer l'option "Autre" au lieu du nom de pays défini.

Après cela, je sélectionne l'option "Envelopper chaque article avec un élément d'étiquette" et, par conséquent, j'obtiens un shortcode comme celui-ci : [case à cocher* votre pays use_label_element "USA" "Inde " "Grande-Bretagne"]. Comme vous le voyez, cette case à cocher est obligatoire (sa balise est marquée d'un *), elle comprend le nom et trois options au choix.

Ajout d'un menu déroulant

Si vous souhaitez connaître l'âge des utilisateurs qui vous contactent, vous pouvez choisir le shortcode du menu déroulant qui commence par la balise "select".

Son générateur de balises de formulaire contient également le nom de votre menu, ses options et certains attributs que vous pouvez choisir.

J'ajoute un nom, quelques options parmi lesquelles choisir et je clique sur l'option "Autoriser les sélections multiples". Voici à quoi ressemble mon shortcode de menu déroulant [sélectionnez votre multiple d'âge "18-26" "26-35" "35-45"].

Et voici à quoi ressemble mon formulaire de contact avec des cases à cocher supplémentaires que je viens de créer. Si vous souhaitez ajouter un bouton radio ou des champs supplémentaires dans votre formulaire de contact, veuillez lire plus de détails ici.

Ajouter un reCaptcha

Lors de la création d'un formulaire de contact, vous souhaitez bien sûr protéger votre site Web des fausses inscriptions et de l'activité des robots. C'est à ce moment que reCaptcha devient utile.

N'hésitez pas à installer et activer le plugin Contact Form 7 – reCaptcha v2, puis allez dans Contact -> Intégration et cliquez sur le bouton 'Configurer l'intégration'.

Allez maintenant dans votre console Google -> Paramètres pour trouver le site et les clés secrètes pour reCaptcha.

Si vous n'avez pas encore ajouté votre site Web WP dans Google et que vous n'avez pas de compte dans Google Console, veuillez consulter les détails sur la façon d'enregistrer votre site Web dans Google ici.

Copiez les clés et collez-les dans les champs correspondants de votre tableau de bord. Cliquez sur le bouton Enregistrer les modifications pour faire fonctionner votre reCaptcha.

Maintenant, lorsque l'intégration est définie, accédez à Contact -> version de reCaptcha et sélectionnez la version 2 de reCaptcha au lieu de l'utilisation par défaut.

Vous trouverez ici le shortcode reCaptcha que vous devez utiliser pour insérer votre reCaptcha si nécessaire. Ceci est également géré via le générateur de balises de formulaire.

Ainsi, maintenant, lorsque vous accédez à votre formulaire de contact récemment créé dans la liste Contact -> Formulaires de contact et cliquez sur un formulaire sélectionné pour l'ouvrir,

vous verrez apparaître le shortcode reCaptcha.

Vous pouvez maintenant l'insérer avant le bouton "Envoyer" pour permettre à vos visiteurs de confirmer qu'ils sont des humains avant de soumettre un message.

Voici à quoi ressemble votre reCaptcha en direct.

Maintenant, lorsque vous avez terminé de modifier votre formulaire de contact, vous pouvez copier son shortcode et le coller sur votre page Contacts en utilisant le menu Pages -> Toutes les pages ou Pages -> Ajouter nouveau si votre page de contacts n'a pas encore été créée.

Construire un formulaire de contact avec WP Forms

Le principe de construction d'un formulaire de contact avec la solution WordPress WP Forms est un peu similaire, bien qu'il soit un peu plus facile, à mon avis.

Allez dans WP Forms -> Add New et sélectionnez un formulaire parmi les variantes disponibles. Ainsi, vous pouvez choisir un formulaire vierge, un simple formulaire de contact, un formulaire d'inscription à la newsletter ou un formulaire de suggestion. Je sélectionne un simple formulaire de contact pour continuer.

Comme vous le voyez, le formulaire de contact simple se compose de champs pour les noms et prénoms, d'un champ pour l'e-mail, d'un champ pour un message et d'un bouton "Soumettre". Vous pouvez compléter votre formulaire de contact avec des cases à cocher, une sélection de menus déroulants et bien d'autres options.

Choisissez simplement le module requis et faites-le glisser pour le mettre dans votre formulaire de contact si nécessaire.

Voici à quoi ressemble ma case à cocher de sélection de pays.

Lorsque toutes les modifications sont apportées, cliquez sur le bouton "Enregistrer" pour les conserver

et copiez le shortcode de votre formulaire de contact nouvellement créé pour le mettre sur la page de votre choix.

Comme vous le voyez, tout est assez facile.

Si vous avez des préoccupations, veuillez les laisser dans les commentaires.

J'espère que cela a été utile,

Mélanie H.