.svg)
Installation de Contact Form 7
Pour commencer, vous devez installer et activer Contact Form 7 sur votre site Web WordPress. Procédez comme suit :
- Connectez-vous à votre tableau de bord d'administration WordPress.
- Accédez à Plugins > Ajouter.
- Dans la barre de recherche, tapez « Contact Form 7" et appuyez sur Entrée.
- Localisez le Plugin Contact Form 7 par Takayuki Miyoshi et cliquez sur Installer maintenant.
- Une fois l'installation terminée, cliquez sur Activer.
Félicitations, Contact Form 7 est maintenant installé et prêt à être utilisé sur votre site !
Création de votre premier formulaire de contact
Une fois Contact Form 7 installé, vous pouvez désormais créer votre premier formulaire de contact. Pour ce faire, procédez comme suit :
- Dans votre tableau de bord d'administration WordPress, accédez à Contact > Ajouter un nouveau.
- Entrez un titre pour votre formulaire de contact dans le champ prévu à cet effet.
- Vous verrez qu'un modèle de formulaire par défaut est déjà en place. Vous pouvez modifier ce modèle ou en créer un nouveau à partir de zéro. Pour l'instant, nous allons utiliser le modèle par défaut.
- Cliquez sur Enregistrer pour enregistrer votre nouveau formulaire de contact.
Ajouter des champs de formulaire
La personnalisation de votre formulaire de contact est facile avec Contact Form 7. Vous pouvez ajouter divers champs tels que des zones de texte, des menus déroulants, des cases à cocher, etc. Voici comment procéder :
- Dans l'éditeur de formulaires, placez votre curseur à l'endroit où vous souhaitez ajouter un nouveau champ.
- Cliquez sur le type de champ que vous souhaitez ajouter dans la barre d'outils au-dessus du modèle de formulaire (par exemple, texte, e-mail, URL, etc.).
- Une fenêtre contextuelle apparaît dans laquelle vous pouvez personnaliser les propriétés du champ, telles que l'étiquette, la valeur par défaut et le statut requis.
- Cliquez sur Insérer une étiquette pour ajouter le champ à votre modèle de formulaire.
Répétez ces étapes pour chaque champ que vous souhaitez ajouter à votre formulaire.
Configuration des notifications par e-mail
Une fois que votre formulaire est prêt, vous devez configurer des notifications par e-mail pour recevoir les messages des visiteurs de votre site. Pour ce faire :
- Accédez à la section Mail de l'éditeur de formulaires.
- Entrez votre adresse e-mail dans le champ À pour recevoir les soumissions de formulaires.
- Personnalisez les champs De, Objet et En-têtes supplémentaires selon vos besoins.
- Dans le champ Corps du message, assurez-vous que toutes les balises des champs de formulaire sont incluses afin de recevoir les informations soumises.
N'oubliez pas de cliquer sur Enregistrer pour enregistrer vos modifications.
Personnalisez votre formulaire de contact
Pour rendre votre formulaire de contact visuellement attrayant et cohérent avec le design de votre site Web, vous pouvez appliquer des styles CSS personnalisés. Voici comment procéder :
- Dans votre tableau de bord WordPress, accédez à : Apparence > Personnaliser.
- Accédez à la section CSS supplémentaire.
- Ajoutez votre code CSS personnalisé pour personnaliser les éléments du formulaire de contact 7. Par exemple :
.formulaire wpcf7 {
couleur de fond : #f8f8f8 ;
rembourrage : 20 pixels ;
rayon de bordure : 5 pixels ;
}
entrée de formulaire .wpcf7 [type="text "],
entrée de formulaire .wpcf7 [type="email "],
.wpcf7-form textarea {
largeur : 100 % ;
rembourrage : 10 pixels ;
bordure : 1px solid #ccc ;
rayon de bordure : 3 pixels ;
}
.wpcf7-soumettre {
couleur de fond : #4CAF50 ;
bordure : aucune ;
couleur : blanc ;
rembourrage : 15 x 32 pixels ;
text-align : centre ;
décoration de texte : aucune ;
affichage : bloc en ligne ;
taille de police : 16 pixels ;
marge : 4 x 2 pixels ;
curseur : pointeur ;
rayon de bordure : 5 pixels ;
}
- Cliquez sur Publier pour enregistrer vos styles personnalisés.
Votre formulaire de contact devrait maintenant être stylisé en fonction de vos préférences.
Conseils pour la protection contre le spam
Le spam peut être un problème important pour les propriétaires de sites Web. Heureusement, Contact Form 7 propose plusieurs options pour protéger vos formulaires contre les spams :
- CAPTCHA: intégrez le service reCAPTCHA de Google pour ajouter un champ CAPTCHA à votre formulaire. Cela obligera les utilisateurs à vérifier qu'ils sont humains avant de soumettre le formulaire.
- Honeypot: Utilisez le plugin Contact Form 7 Honeypot pour ajouter un champ masqué à votre formulaire. Les robots rempliront le champ, mais les humains ne le verront pas. Si le champ est renseigné, la soumission sera signalée comme spam.
- Akísmet: Intégrez Contact Form 7 au service antispam Akismet pour filtrer automatiquement les envois de spam.
La mise en œuvre d'une ou de plusieurs de ces méthodes peut vous aider à garder votre boîte de réception propre et à vous assurer de ne recevoir que des messages légitimes de la part des visiteurs de votre site.
Intégration à Alumio
Alumio est une puissante plateforme d'intégration qui peut vous aider à Intégrations WordPress avec des applications et des systèmes variés. En intégrant Contact Form 7 à Alumio, vous pouvez automatiser les processus et rationaliser vos flux de travail.
Par exemple, vous pouvez connecter Contact Form 7 à votre système CRM pour créer automatiquement des prospects ou des contacts lorsqu'un formulaire est soumis. Cela permettra de gagner du temps et de garantir qu'aucune piste ne soit manquée.
Pour intégrer Contact Form 7 à Alumio, vous devez :
- Ouvrez un compte Alumio.
- Créez une nouvelle intégration dans Alumio, en connectant WordPress à l'application de votre choix (par exemple, CRM, automatisation du marketing, etc.).
- Configurez les paramètres d'intégration pour associer les champs de Contact Form 7 aux champs appropriés de votre application connectée.
- Activez et testez l'intégration pour vous assurer que tout fonctionne correctement.
Grâce à la collaboration d'Alumio et de Contact Form 7, vous serez en mesure de créer des flux de travail plus efficaces et de tirer le meilleur parti des formulaires de contact de votre site Web.
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
