Formulaire de contact 7 styles WordPress prêts à l'emploi.

J'avais besoin d'un beau formulaire pour un plugin, les formulaires nécessaires hier, mais il est assez difficile de s'asseoir et d'écrire des styles manuellement, et pour de nombreux projets, ce n'est tout simplement pas dans les limites du budget. Je suis donc parti à la recherche de plugins intéressants pour mettre en place rapidement des formulaires de contact CSS.

Tout le monde a recommandé à l'unanimité (cela s'applique aux moteurs de recherche) - ont dit les sages - de modifier le CSS et de ne tromper personne, de prendre le Bloc-notes et de continuer. En regardant vers l’avenir, les sages avaient raison.

Cependant, la curiosité a pris le dessus et il a été décidé de tester le plugin plus en détail. Je l'avais déjà essayé auparavant, mais cela me paraissait extrêmement ennuyeux et peu pratique. Le plugin n'a pas été mis à jour depuis 11 mois, ce qui est dommage. Un peu plus de 6K webmasters se sont risqués à lui confier leurs formulaires, ce qui n'est pas non plus un nombre important (dont je l'ai téléchargé quatre ou cinq fois).

Après l'installation, il crée une section « Style de contact » à la racine du menu d'administration. Dans cette section, vous trouverez deux éléments contenant des modèles pour la Saint-Valentin et Noël et un « Style personnalisé » où vous pouvez entièrement personnaliser la sortie du formulaire. En fait, c'est la section « Style personnalisé » qui vous intéresse le plus ; plus de détails sur les paramètres disponibles :

« PARAMÈTRES GÉNÉRAUX » - vous pouvez définir la couleur d'arrière-plan, la largeur de la forme (définie en px, % n'ont pas essayé), l'épaisseur de la bordure, la forme (en pointillés, unis, etc.), la couleur, l'arrondi.

« PARAMÈTRES D'ENTRÉES ET D'ÉTIQUETTES » - l'arrière-plan des champs de saisie, la couleur de la police de saisie, la police (la liste n'est pas longue et il n'y a presque rien en cyrillique) et sa taille. Couleur de la bordure du champ, style (ligne pointillée pleine, etc.), épaisseur, arrondi. Police d'entrée et sa taille. Paramètres de marge en px - hauteur/largeur, remplissage. Police, style, taille, couleur de l'étiquette.

« PARAMÈTRES DU BOUTON DE SOUMISSION » – paramètres du bouton de soumission du formulaire. Les paramètres disponibles sont la taille du bouton, l’arrondi, la couleur, le type de bordure et la couleur de la bordure.

Problèmes d'utilisation.

Après avoir examiné les paramètres, vous pouvez conclure que tout va très bien - la pratique a montré le contraire. Il y a vraiment beaucoup de paramètres, mais ils ne suffisent pas - il n'y a pas de paramètres de retrait à l'intérieur du formulaire, donc tous les blocs sont rassemblés sur la bordure gauche près du bord du formulaire. Étranges paramètres « par défaut » - où le champ de saisie est de 100*100 px. Si vous définissez correctement la taille des champs, cela n'affectera pas la liste déroulante et elle reprendra le style du thème principal. Il n'était pas possible de réinitialiser les paramètres d'origine avant de désinstaller le plugin...

Jusqu'à présent, à part changer manuellement les styles, cela n'a pas fonctionné plus ou moins décemment... Un miracle ne s'est pas produit.

Note importante! Le plugin a été récemment mis à jour et quelque chose a changé de manière assez significative dans les paramètres, vous devez donc regarder et tester.

Contact Form 7 peut gérer plusieurs formulaires de contact dans lesquels vous pouvez personnaliser de manière flexible le contenu du formulaire et du courrier avec une mise en page assez simple. Les formulaires prennent en charge la soumission Ajax, le CAPTCHA, le filtre anti-spam Akismet et bien plus encore.

Documentation et assistance

Captures d'écran

Installation

  1. Téléchargez l'intégralité du dossier contact-form-7 dans le répertoire /wp-content/plugins/.
  2. Activez le plugin depuis la page Plugins de votre tableau de bord WordPress.

Dans le menu de la console WordPress, vous trouverez l'onglet « Commentaires ».

Pour savoir comment utiliser correctement le plugin, vous pouvez visiter sa page d'accueil.

Participants et développeurs

Contact Form 7 est un projet open source. Les contributeurs suivants ont contribué au développement du plugin :

Participants

Journal des modifications

Pour plus d’informations, voir Versions.

5.1.3

  • Correction d'un bug qui empêchait de désélectionner une option dans l'onglet Mail.

5.1.2

  • Constant Contact : introduction du sélecteur de liste de contacts.
  • Contact constant : un paramètre supplémentaire, constant_contact, est introduit.
  • reCAPTCHA : introduction des hooks de filtre wpcf7_recaptcha_actions et wpcf7_recaptcha_threshold.

5.1.1

  • reCAPTCHA : modifie la réponse en jetons de réponse vides.

5.1

  • Le module d'intégration Constant Contact a été introduit.
  • Le module reCAPTCHA a été mis à jour pour prendre en charge reCAPTCHA v3.
  • Ajoute des règles de style en mode sombre.

5.0.5

  • Correction d'un problème d'incohérence entre get_data_option() et get_default_option() dans la classe WPCF7_FormTag.
  • Supprime les erreurs PHP qui se produisent lors de l'appel de unlink().
  • Introduction de wpcf7_is_file_path_in_content_dir() pour prendre en charge la constante UPLOADS.

5.0.4

  • Définit explicitement l'argument power_type dans l'appel register_post_type() pour résoudre un problème d'élévation de privilèges non autorisée.
  • Fichier joint local - il est interdit de spécifier des chemins absolus vers des fichiers situés en dehors du répertoire wp-content.
  • Validateur de configuration - Ajoute un élément de test pour détecter les paramètres incorrects des fichiers joints.
  • Correction d'un bug dans la fonctionnalité de rétrocompatibilité JavaScript pour les navigateurs existants qui ne prennent pas en charge l'attribut d'espace réservé HTML5.
  • Case à cocher Consentement : désactive la fonction de non-stockage de la balise de formulaire.

5.0.3

  • CSS : applique le style de curseur « non autorisé » pour soumettre les boutons à l'état « désactivé ».
  • Case à cocher d'acceptation : révise l'interface utilisateur du générateur de balises pour encourager l'utilisation de meilleures options en termes de protection des données personnelles.
  • Présente la fonction wpcf7_anonymize_ip_addr().
  • Introduction de l’option consent_for:storage pour tous les types de balises de formulaire.

5.0.2

  • Ajout de la section Avis de confidentialité au fichier readme.txt.
  • Mise à jour du contenu de la méta-boîte d'informations.
  • Utilisez get_user_locale() au lieu de get_locale() là où cela est plus approprié.
  • Case à cocher d'acceptation : réinitialisez le statut désactivé des boutons de soumission après une soumission réussie.

5.0.1

  • Correction des utilisations incorrectes de _n().
  • Validation de la configuration : correction du nombre incorrect d'alertes dans le panneau de l'onglet Paramètres supplémentaires.
  • Validation de la configuration : correction d'un traitement inapproprié pour la balise de messagerie spéciale [_site_admin_email] dans le champ d'en-tête From mail.
  • Case à cocher Acceptation : les attributs class et id spécifiés ont été appliqués au mauvais élément HTML.
  • Validation de la configuration : lorsqu'il existe un en-tête de courrier supplémentaire pour les boîtes aux lettres comme Cc ou Reply-To, mais qu'il a une valeur vide possible, l'erreur « Une syntaxe de boîte aux lettres non valide est utilisée » sera renvoyée.
  • Spécifiez explicitement le quatrième paramètre de add_action() pour éviter de transmettre des valeurs de paramètres involontaires.
  • Vérifiez si le répertoire cible est vide avant de supprimer le répertoire.

5.0

  • Paramètres supplémentaires : on_sent_ok et on_submit ont été supprimés.
  • Nouveau paramètre supplémentaire : skip_mail
  • Flamingo : le titre du canal entrant change en conjonction avec un changement du titre du formulaire de contact correspondant.
  • Événements DOM : rendez un objet de réponse API complet accessible via la propriété event.detail.apiResponse.
  • Courrier HTML : ajoute des attributs liés à la langue à l'en-tête HTML.
  • Téléchargement de fichier : définit l'attribut d'acceptation sur un champ de téléchargement.
  • Présente la classe WPCF7_MailTag.
  • Vous permet d'abandonner une tentative d'envoi de courrier à l'aide du hook d'action wpcf7_before_send_mail. De plus, vous pouvez définir un statut et un message personnalisés via un intercepteur d'action.
  • Case à cocher Acceptation : permet de spécifier une déclaration de conditions dans la partie contenu de la balise de formulaire.
  • Case à cocher Acceptation : prend en charge l’option facultative.
  • Nouvelles balises de messagerie spéciales : [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname] et [_user_display_name]
  • Nouveaux hooks de filtre : wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) et wpcf7_mail_tag_replaced_($type)
  • Nouvelles fonctionnalités de balise de formulaire : Zero-Controls-Container et Not-For-Mail

Utilisation du plugin Formulaire de contact. Mais au fil du temps, on s'est rendu compte que les capacités de ce plugin ne suffisaient clairement pas et que le plus gros inconvénient est qu'il vous permet de créer un seul formulaire de commentaires.

En fait, il semble qu’il n’y ait aucun problème. Mais certains propriétaires de sites Web ont besoin de plusieurs formulaires de commentaires, qui peuvent être situés non seulement sur la page « Commentaires » ou « Contact », mais également sur toute autre page ou publication.

Dans ce tutoriel, je souhaite vous montrer comment créer un formulaire de feedback en utilisant un autre plugin, plus fonctionnel et un peu plus complexe que celui évoqué dans le dernier post. On commence ?

Description du plugin

Le plugin Contact Form 7 vous permet de créer de nombreux formulaires différents pour envoyer les résultats dans votre boîte de réception e-mail. Absolument tout est personnalisable : l'apparence du formulaire, l'ordre des champs, le nom des inscriptions, le format des emails, le choix des destinataires des réponses. En général, le plugin est vraiment très fonctionnel et sympa.

De plus, vous pouvez y connecter le plugin Akismet pour une protection anti-spam, l'implémenter et également utiliser la fonctionnalité multilingue. C'est cool, à mon avis ! :-)

Installation du plugin Contact Form 7

Le plugin est installé de manière standard dans WordPress. Allez dans la section « Plugins » - « Ajouter un nouveau », entrez le nom Contact Form 7 et installez-le depuis le référentiel. N'oubliez pas d'activer immédiatement après l'installation.

Configuration du formulaire de contact 7

Après avoir activé le plugin, un nouvel élément « Contacts (CF7) » apparaîtra dans le menu principal de WordPress ; c'est l'endroit principal pour configurer vos formulaires de commentaires. Le nombre de formulaires est illimité.

Une liste des formulaires existants est disponible dans la rubrique « Formulaires de contact » :

Ici, vous pouvez copier le shortcode souhaité pour le coller dans une page ou une publication :

Ajout d'un nouveau formulaire de commentaires

Comme vous pouvez le constater, il n'y a pas d'éléments supplémentaires spéciaux dans le menu, passons donc à la création du formulaire de commentaires lui-même. Pour ce faire, sélectionnez l'élément « Ajouter un nouveau » dans le menu principal.

Tout d’abord, il nous est demandé de sélectionner la langue de l’interface du formulaire qui sera créé. WordPress détecte la version installée sur votre site et vous invite à la sélectionner par défaut :

Mais vous pouvez sélectionner n'importe quelle langue disponible dans la liste :

Après avoir cliqué sur le bouton « Ajouter un nouveau », le concepteur de formulaire apparaîtra.

Changer le nom du formulaire

Tout d'abord, il faut saisir le nom de notre formulaire pour ne pas se perdre dans la liste des formulaires lorsqu'ils sont trop nombreux. Pour ce faire, il suffit de cliquer sur le mot « Titre » dans la zone supérieure de l'écran :

Après cela, un champ de texte apparaîtra dans lequel nous saisissons un nom avec une description :

Une fois la page actualisée, vous verrez le message suivant :

Vous pouvez copier le shortcode proposé et le coller sur la page dont vous avez besoin.
Mais vous pourrez le faire plus tard, une fois que vous aurez configuré le formulaire. Le choix t'appartient.

Changer le modèle de formulaire

Un modèle de formulaire est un simple code HTML qui définit l'apparence de votre formulaire. Par défaut, il contient 4 champs (Nom, Email, Objet et Message) et un bouton d'envoi de formulaire. Cela ressemble à ceci :

Vous pouvez échanger des blocs en coupant et en collant simplement leur code n'importe où.
Par exemple, nous pouvons échanger le champ de l'adresse e-mail et le nom du client :

Ou nous pouvons supprimer le champ « Sujet » afin qu'il n'apparaisse pas sur notre formulaire. Pour ce faire, supprimez simplement le bloc de texte correspondant dans notre modèle :

Un astérisque à côté du code de l'élément signifie que ce champ est obligatoire et jusqu'à ce que le client entre une valeur, le formulaire ne sera pas soumis :

Comment ajouter un nouveau champ à un formulaire

Imaginez que vous deviez ajouter un champ avec une adresse de site Web à un formulaire standard. Le concepteur de formulaires de ce plugin vous permet de mettre en œuvre vos plans sans aucun problème. Utilisez simplement le bouton « Générer le tag » :

Lorsque vous cliquez dessus, une énorme liste de champs supplémentaires possibles apparaîtra :

Tout ce que vous avez à faire est de sélectionner le type de champ dont vous avez besoin et d'effectuer un certain nombre d'étapes simples.

Ne vous inquiétez pas. Même si les réglages semblent intimidants, ils sont en réalité très simples :-)

La case à cocher « Champ obligatoire » permet de définir des vérifications supplémentaires et tant que ce champ reste vide ou a une valeur incorrecte, le formulaire ne sera pas soumis. Presque tous les types de champs ont ce paramètre :

De plus, bon nombre de nos champs de formulaire ont les mêmes paramètres de nom, ID d'élément et classe CSS, grâce auxquels vous pouvez modifier l'apparence de ces champs. Ils sont présents dans presque tous les domaines :

Le champ « Nom » est le plus important ; il est utilisé à la fois dans le modèle de formulaire et dans le modèle de lettre.

Mais en utilisant ce plugin, je n'ai jamais eu à modifier ou définir les valeurs de ces attributs. Très probablement, vous n’en aurez pas besoin non plus. Mais je dois leur dire et leur présenter :-)

Tous les champs de texte de notre constructeur de formulaire ont des champs supplémentaires avec la taille du champ lui-même et la longueur maximale de la valeur, les voici :

De plus, des champs spécifiques, tels que l'URL ou certains autres champs autres que ceux de texte ordinaires, ont leurs propres paramètres spéciaux. Par exemple, notre champ URL a un paramètre supplémentaire :

Je ne considérerai absolument pas tous les réglages, car... ils sont trop nombreux et spécifiques à chaque type de domaine. Eh bien, si soudainement vous avez encore besoin de ces informations, écrivez-en dans les commentaires de cet article et je préparerai un aperçu supplémentaire des paramètres.

Nous devons maintenant ajouter le code de ce champ au formulaire du modèle de formulaire.
Pour cela, vous devez copier le code proposé et le coller dans le formulaire de gauche :

Par exemple, je souhaite placer un champ avec l'adresse du site Web après le nom du client. Je devrai saisir un code similaire aux autres champs, c'est-à-dire ajouter un paragraphe, un saut de ligne et insérer le shortcode de ce nouveau champ :

Eh bien, pour que la valeur de ce champ nous soit envoyée par email, il faut copier cette valeur :

Et collez-le dans le champ de texte ci-dessous dans « Modèle d'e-mail » :

D'autres champs sont ajoutés de la même manière. Tout est simple et clair :-)

Destinataire et modèle de lettre

Voyons maintenant les paramètres qui sont pris en compte lors de l'envoi d'un message. Dans notre cas, il s'agit du destinataire (presque toujours vous) et du modèle de lettre qui sera envoyé à l'adresse email indiquée après l'envoi du message.

Tout d'abord, vous devez spécifier le destinataire auquel les e-mails de notre formulaire seront envoyés. Par défaut, l'adresse e-mail des paramètres WordPress est insérée ici.

Je pense que vous avez déjà remarqué que ces formulaires utilisent des codes incompréhensibles, comme , . Il s’agit donc du même champ « Nom » du générateur de champs dont j’ai parlé ci-dessus :

Eh bien, il ne vous reste plus qu'à ranger le modèle de la lettre lui-même :

Vous pouvez utiliser tous les champs que vous avez créés automatiquement via le bouton « Générer une balise », ou vous pouvez quitter le formulaire standard si vous n’avez rien modifié dans les paramètres.

P.S. Dans les paramètres de ce plugin, il existe une opportunité plutôt intéressante : spécifier un deuxième destinataire du message. Pour être honnête, je ne vois pas immédiatement pourquoi cela pourrait être nécessaire, mais puisqu’il y a une opportunité, quelqu’un en profitera de toute façon.

Configuration des messages

Eh bien, de quel type de plugin d'envoi de messages s'agit-il s'il ne vous permet pas de modifier le texte des notifications ou des inscriptions ? Et le plugin Contact Form 7 ne fait pas exception. Il vous permet de traduire n'importe quel texte ou message d'erreur :

Problèmes connus

Il arrive que lors de l'utilisation de contrôles non standard, tels que l'e-mail ou l'URL, l'apparence des éléments individuels sur la page soit différente. Par exemple, faites attention au champ « Adresse de votre site Web » dans le formulaire lui-même :

Vous n'avez pas vu ? Et je vais vous montrer de plus près :

En général, le problème est que l’apparence de ces champs est visuellement différente des champs de texte standard. Comparez-le avec le champ « Votre nom », vous comprendrez tout de suite.

Il y a ici deux solutions possibles. La première chose est d’ajouter les styles appropriés au fichier style.css de votre thème, ou de changer le type d’url en texte dans le modèle de formulaire, alors tout ira bien :

Conclusion

Je pense que l'examen des moyens de créer des formulaires de commentaires peut être considéré comme complètement clos et que le sujet lui-même a été examiné de haut en bas.

Bien sûr, il y aura certainement quelqu’un qui ne réussira pas ou qui voudra suggérer un autre plugin similaire à considérer. Je suis toujours heureux de poser des questions et des suggestions ! N'hésitez pas à les poser dans les commentaires :-)

Si vous souhaitez me remercier pour le matériel, vous pouvez le faire ici :-)

Si vous trouvez une erreur, veuillez surligner un morceau de texte et cliquer sur Ctrl+Entrée.