Mini guide du formulaire de contact 7

Généralement, un site Web a besoin d'un formulaire de contact pour communiquer avec le propriétaire du site. L'un de nos favoris est le formulaire de contact 7. Voyons ce qu'il peut faire.!

Le formulaire de contact 7 est gratuit, simple et flexible (dans WordPress, cela signifie généralement qu’il existe une configuration simple pour ceux qui l’aiment simple et beaucoup de profondeur et de complexité pour ceux qui aiment jouer au violon), un formulaire de contact par Takayuki Miyoshi. Certains disent que Contact Form 7 est l’un des meilleurs plugins de formulaire pour notre système de gestion de contenu préféré. Le plugin a été mis à jour pour la dernière fois en février et a été téléchargé 6 457 967 fois au total (au moment de la rédaction de cet article)..

Le plugin peut également gérer plusieurs formulaires de contact et prend en charge la soumission AJAX, CAPTCHA, le filtrage anti-spam Akismet et le téléchargement de fichiers. La dernière version à la rédaction de cet article est la 3.1.1. Le site officiel est ContactForm7.com. Le téléchargement peut être effectué à partir du répertoire du plugin WordPress. Une documentation détaillée est accessible dans la documentation officielle..

Après l'installation et l'activation, vous trouverez un élément de menu dédié appelé "Contact" dans l'interface d'administration..


Code de formulaire

Voici un formulaire simple où vous pouvez commander un téléphone cellulaire. Vous pouvez également spécifier la marque, la couleur et le mode de paiement..

 

Produit *
[sélectionnez * produit "iPhone" "Samsung Galaxy S2" "htc Desire"]

Couleur *
[sélectionnez * couleur "noir" "blanc" "gris"]

Prénom *
[texte * votre nom]

Email *
[email * votre-email]

Paiement préféré
[méthode de paiement radio "VISA" "MASTERCARD" "AMEX"]

[checkbox quickdelivery] Livraison rapide (1 jour)

[soumettre "Passer la commande"]


Insérer le code du formulaire

Utilisez cet extrait pour importer le formulaire complet spécifié ci-dessus dans un article ou une page WordPress arbitraire..

 [contact-form-7 title = "formulaire de commande de téléphone portable"]

Syntaxe de base

La syntaxe de la balise consiste en champs de type, nom et valeur. Avec l'astérisque, il deviendra un élément obligatoire.

 [nom du type de valeurs] par exemple: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Types de balises

Voici une liste avec toutes les balises que vous pouvez utiliser dans vos formulaires:

  • champs de texte (texte, texte *, email, email *, textarea et textarea *),
  • cases à cocher, boutons radio et menus (case à cocher, case à cocher *, radio, sélection et sélection *),
  • téléchargement de fichier et pièce jointe (fichier et fichier *),
  • captcha (captchac et captchar),
  • quiz,
  • case à cocher acceptation (acceptation),
  • bouton de soumission (soumettre).

Création d'un formulaire à deux colonnes

Nous pouvons rapidement créer un formulaire avec le style à deux colonnes, en utilisant simplement du HTML et du CSS. Le petit secret est que nous pouvons combiner HTML avec le code de balise.

  
Prénom [texte prénom]
Email [email * votre-email]
Nom [nom de famille du texte]
Téléphone [text your-phone]
Sujet [texte * votre sujet]
Message [textarea * your-message]
[soumettre "envoyer"]

Voici le code CSS. Rien de spécial juste un style très basique.

 #left width: 300px; float: gauche;  #right width: 250px; float: gauche;  .clearfix: after content: "\ 0020"; bloc de visualisation; hauteur: 0; clarifier les deux; visibilité: cachée; débordement caché;  .clearfix display: block; 

Syntaxe avancée

La syntaxe de la balise peut également être plus détaillée. La partie options spécifie le comportement et l'apparence. Déclarer des options n'est pas nécessaire, mais voici comment vous pouvez le faire. Notez que dans l'exemple suivant, nous utilisons le identifiant et classe Propriétés. Vous pouvez utiliser CSS et JavaScript pour étendre votre formulaire..

 [type nom options options] par exemple: [radio paymethod id: paynow classe: paythis "VISA" "MASTERCARD" "AMEX"]

Configurer un modèle de courrier

Dans le formulaire de contact 7, vous pouvez très facilement modifier les modèles de courrier. Le texte, le code HTML et les données de formulaire peuvent être combinés de manière arbitraire. Notez les données de formulaire avec les crochets. Ci-dessous un exemple pour le corps du message.

 Cher [votrenom], Vous venez de commander un produit [produit] en [couleur] couleur! Bientôt, vous recevrez un email avec le lien vers lequel vous pourrez payer votre commande. --- Merci d'avoir acheté! OurCompany LLC, www.ourcompany.com

Voici une liste de ce que vous pouvez définir via le panneau d'administration:

  • champs d'en-tête de base (à, de et sujet)
  • Corps du message
  • en-têtes supplémentaires
  • pièces jointes
  • Mode HTML

Ajout de CAPTCHA

Le plugin formulaire vous permet d’insérer un CAPTCHA dans vos formulaires de contact pour éviter les messages indésirables. Le formulaire de contact 7 utilise Really Simple CAPTCHA comme module CAPTCHA. Avant de commencer, vous devrez installer le plugin Really Simple CAPTCHA. Assurez-vous que votre dossier temporaire pour les fichiers CAPTCHA existe et est accessible en écriture. Sinon, le CAPTCHA ne peut pas être créé.

Pour utiliser CAPTCHA dans vos formulaires, vous devez utiliser le captchac et captchar balises de formulaire. captchac signifie CAPTCHA-Challenge et représente un élément pour une image CAPTCHA. captchar signifie CAPTCHA-Response et représente un élément pour un champ d'entrée de réponse. UNE captchac le tag doit toujours être associé à un captchar tag avec le même nom. Par exemple, les balises ci-dessous sont valides:

  [captchac captcha-1] [captchar captcha-1]

Notez que les noms doivent être identiques pour fonctionner correctement. Ici captcha-1 est donné.


Correction des erreurs d'envoi

Impossible d'envoyer votre message. Veuillez essayer plus tard ou contacter l'administrateur par d'autres moyens.

Si le serveur n'autorise pas l'envoi de courrier via envoyer un mail(), vous pouvez utiliser un plugin pour envoyer des mails via SMTP. Les deux extensions sont compatibles avec WordPress 3.2.1. Ces plugins peuvent résoudre vos problèmes:

  • WP Mail SMTP
  • et configurer SMTP

Téléchargez et installez le plugin choisi dans WordPress. Entrez les paramètres de votre serveur SMTP sur la page Paramètres..


Messages d'événements personnalisés

Nous pouvons modifier librement les messages affichés sur les événements.

Encore plus agréable, vous pouvez utiliser du code HTML dans les zones de saisie! Essayez ceci (il s’agit en réalité d’un one-line HTML, mais ici par souci de clarté):

 Votre message a été envoyé avec succès. Je vous remercie! 

Support multilingue

Le formulaire de contact 7 affiche les formulaires en anglais par défaut, mais il regroupe plus de 40 traductions et vous pouvez même créer un formulaire de contact dans n’importe quelle langue. Pour utiliser l'interface d'administration de Contact Form 7 dans votre propre langue, définissez le WPLANG constante dans ton wp-config.php fichier.

 // Changer cette ligne: define ('WPLANG', 'ja');

Utiliser les données de formulaire publiées sur le serveur au lieu de l'envoi

Si vous voulez autre chose que la publication par défaut (envoi par courrier électronique), vous pouvez utiliser le code ci-dessous..

 add_action ("wpcf7_before_send_mail", "wpcf7_do_something_else"); function wpcf7_do_something_else (& $ wpcf7_data) // Voici la variable dans laquelle les données sont stockées! var_dump ($ wpcf7_data); // Si vous voulez éviter d'envoyer les données par mail, vous pouvez le faire… $ wpcf7_data-> skip_mail = true; 

Définir les droits pour que seuls les administrateurs puissent modifier les formulaires

Pour sécuriser les options d'édition, utilisez ce code.

 define ('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options'); define ('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Remplissage dynamique des champs

Le fait est que les valeurs par défaut dans le formulaire de contact 7 sont statiques. Supposons, par exemple, que vous souhaitiez utiliser un paramètre GET pour renseigner le formulaire de contact. Ensuite, la solution est le formulaire de contact 7 Dynamic Text Extension de Sevenspark. Ce plugin fournit un nouveau type de tag et permet la génération dynamique de contenu. Après l’installation et l’activation du plug-in, Contact Form 7 aura deux nouveaux types: le champ de texte dynamique et le champ masqué dynamique.


Résumé

Comme vous pouvez le constater, ce plugin de formulaire a beaucoup de potentiel et nous n’avons couvert qu’un faible pourcentage de toutes les fonctionnalités. Si vous n'avez pas trouvé quelque chose ici, plongez dans la documentation sur le site officiel. N'ayez pas peur de l'utiliser dès maintenant! S'amuser!

Utilisez-vous déjà le formulaire de contact 7 et avez-vous un conseil à partager avec nous? Ou y a-t-il un autre plugin de formulaire de contact pour WordPress que vous recommanderiez? Faites le nous savoir dans les commentaires!