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..
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"]
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"]
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"]
Voici une liste avec toutes les balises que vous pouvez utiliser dans vos formulaires:
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.
Sujet [texte * votre sujet]Prénom [texte prénom]
Email [email * votre-email]Nom [nom de famille du texte]
Téléphone [text your-phone]
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;
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"]
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:
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é.
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:
Téléchargez et installez le plugin choisi dans WordPress. Entrez les paramètres de votre serveur SMTP sur la page Paramètres..
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!
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');
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;
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');
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.
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!