Nous allons maintenant créer un nouveau formulaire avec “Contact form 7” et voir les options avancées.
- Pour cela je clique à gauche dans mon menu sur le bouton “contact”
- Puis je clique sur le bouton “ajouter”
- Je saisis un titre à mon formulaire de contact, J’enregistre.
- Je copie le “code court” qui a été généré grâce à la création de mon nouveau formulaire.
Au préalable j’ai déjà créé une page vierge dans laquelle j’ai saisi un titre puis en dessous je colle le code généré par mon formulaire.
Si je visualise mon formulaire, on peut voir les champs qui ont été générés.
Au-dessus du code qui a été généré par défaut, vous avez la liste des nouveaux champs que vous pouvez insérer.
- le champ texte permet à l’utilisateur de saisir des caractères alphanumériques
- le champ email va faire un contrôle sur la saisie, comme par exemple l’@
- Le champ URL va faire un contrôle sur les extensions
- le champ téléphone va permettre de saisir éventuellement l’indicatif plus le numéro.
- le champ date va vous générer un mini calendrier.
- le champ zone de texte va permettre à l’utilisateur de saisir un texte long.
- le champ menu déroulant va permettre à l’utilisateur d’avoir un choix ou plusieurs dans une liste.
- le champ case à cocher va permettre à l’utilisateur de cocher son choix dans une des cases.
- le champ bouton radio va permettre de générer une option de type oui non
- le chant confirmation comme son nom l’indique va demander une confirmation avant l’envoi du formulaire.
- le champ fichier va permettre à l’utilisateur d’ajouter une pièce jointe
- Enfin le champ envoyer et le “call to action” qui va envoyer le formulaire au destinataire.
Nous allons maintenant rajouter un champ url.
Vous pouvez voir qu’il est possible de rendre le champ obligatoire à la saisie.
Il a généré un nom par défaut que vous pouvez changer.
- Vous pouvez lui indiquer une valeur par défaut
- Lui indiquer un attribut “id”
- Lui indiquer un attribut “class”
Une fois que le champ a été ajouté, vous pouvez enregistrer.
Voyons voir le résultat.
Dans notre page le champ a été ajouté, néanmoins le libellé qui représente le champ est absent, nous allons maintenant ajouter un libellé.
- Pour cela, je vais copier La première ligne <label> pour le coller au-dessus de mon champ, puis évidemment je vais le renommer.
- Je n’oublie pas de fermer la balise et je copie la balise </label>
qui ferme ma ligne de code.
Allons voir le résultat
On peut maintenant s’apercevoir que le libellé est apparu au-dessus de notre champ.
Ajoutons maintenant le le champ téléphone
je vais procéder de la même manière ajouter la ligne <label>
en fermant la balise</label>
je vais ajouter le champ nombre vous pouvez voir qu’il y a un certain nombre de paramètres de personnalisation et j’ajoute les libellé correspondant grâce à la balise <label></label>
J’ajoute le champ date puis je saisis les libellés
J’ajoute un menu déroulant, je simule plusieurs choix pour mon utilisateur, je valide.
il est possible d’avoir une sélection multiple et après avoir inséré la balise de la même manière que les autres champs j’ajoute mon libellé.
J’ajoute une case à cocher j’ai rajouté plusieurs choix attention ça va me mettre mon champ en erreur dans mon paramètre, je dois pouvoir mettre un choix par case.
Je rajoute un bouton radio dans lequel je vais lui associer mon choix
Dans la partie INTEGRATION il est possible d’insérer des modules externes.
Nous allons nous intéresser sur la partie reCAPTCHA le paramétrage requière deux clefs pour pouvoir faire apparaître un “CAPTCHA” de protection sur votre formulaire.
Pour cela nous allons cliquez sur le lien proposé, il va nous proposer le lien “Google Recaptcha” pour pouvoir gérer un CAPTCHA en version V3.
- Pour cela je clique sur la console puis en haut à droite je vais cliquer sur “plus”
- Je saisis un libellé libre pour identifier mon CAPTCHA
- Je sélectionne reCAPTCHA version 3
- J’ajoute mon domaine sans les www et sans le HTTP
- Je l’associe à un email, puis je valide.
- Google reCAPTCHA ma généré deux lignes de code que je devrais insérer dans les réglages de mon formulaire contact form 7
Vous pouvez maintenant regarder le résultat obtenu dans la page
