Création d’un formulaire de contact avec le formulaire de contact 7

Facile à configurer, dispose de nombreuses intégrations disponibles et comprend même un répondeur automatique intégré. Dans ce manuel, vous apprendrez comment configurer les champs de formulaire, formater les e-mails entrants et également configurer un répondeur automatique.

Caractéristiques du formulaire de contact 7

Avec plus de 5 millions d’installations actives, Contact Form 7 est un plugin très populaire utilisé dans le monde entier.

Avec lui, vous pouvez effectuer les opérations suivantes:

• Créez et gérez plusieurs formes de contact.
• Personnalisez rapidement les champs de formulaire.
• Personnalisez facilement votre modèle d’e-mail en fonction de vos besoins.
• Publiez un formulaire sur des articles et / ou des pages.
• Arrêtez efficacement les apparitions ennuyeuses avec Akismet, Ajax et ReCAPTCHA de Google.
• Entrez un répondeur automatique HTML.
• Ajoutez des fonctionnalités supplémentaires avec une large gamme de modules complémentaires tiers.

Oui, vous pouvez faire tout cela GRATUITEMENT!

Maintenant que vous savez un peu ce que vous pouvez faire avec Contact Form 7, passons à l’installation et à la configuration sur votre site WordPress.

Installation du formulaire de contact 7

Pour commencer, vous devez installer le plugin Contact Form 7. Accédez simplement à appendice dans la barre latérale gauche de votre panneau WordPress, puis cliquez sur Ajouter un nouveau dans le menu de vol.

Entrez le formulaire de contact 7 dans la zone de recherche. Cliquez ensuite sur Installer bouton dans la boîte de pièces jointes. Une fois l’installation terminée, cliquez sur Activé boutons

Une fois que vous avez activé le plugin, vous verrez un nouveau lien appelé dans la barre latérale de votre panneau WordPress Contact. Ici, vous pouvez afficher les formulaires de contact existants, en ajouter un nouveau ou les intégrer à d’autres outils tiers.

Créer un formulaire de contact

Aller à Contact >> Formulaires de contact dans la barre latérale gauche. Vous verrez le formulaire par défaut appelé Formulaire de contact 1, que vous pouvez simplement renommer et modifier en fonction de vos besoins.

Par défaut, un nouveau formulaire comprend les champs suivants:

• Nom
• Email
• Matière
• Message
• Bouton de soumission

Si vous souhaitez ajouter des champs supplémentaires, vous pouvez facilement le faire en cliquant sur le bouton de création d’étiquette pour l’étiquette du formulaire que vous souhaitez créer (par exemple, texte, e-mail, URL, tel, etc.).

Dans cet exemple, nous ajouterons une balise de formulaire à un champ de saisie de texte brut (l’un des champs les plus courants que vous utiliserez dans un formulaire de contact).

Si vous souhaitez que ce nouveau champ soit recherché, cochez la case en haut. Donner un nom de domaine vous aidera plus tard lorsque vous configurerez l’e-mail qui sera envoyé après la soumission réussie du formulaire. Choisissez quelque chose qui vous aidera à identifier facilement le champ plus tard.

Vous pouvez définir une valeur par défaut et l’utiliser également comme espace réservé pour ce champ.

Si vous souhaitez personnaliser l’apparence de ce champ de formulaire avec CSS, vous pouvez lui attribuer un ID de classe ou un attribut.

Une fois que vous avez configuré votre nouveau champ de formulaire, cliquez sur Balise de publication boutons

Une fois que vous avez ajouté le libellé du formulaire, vous voudrez probablement le baliser d’une manière ou d’une autre. Bien que vous puissiez utiliser le texte d’espace réservé mentionné à l’étape précédente comme balise dans le champ, vous pouvez également ajouter une balise HTML hors champ dans l’exemple ci-dessous.

<label> Subject
    [text* your-subject] </label>

Ajustez simplement le champ pour inclure les étiquettes d’ouverture et de fermeture comme indiqué ci-dessus. Avec les cases à cocher et les boutons radio, vous ne pouvez pas encapsuler les champs du formulaire dans une étiquette et devez à la place l’insérer comme ceci:

<label> Choose one </label>
[checkbox checkbox-369 use_label_element "yes" "no" "maybe"]

Une fois que vous serez à l’aise d’ajouter des champs à votre formulaire de contact, réfléchissez aux informations que vous souhaitez obtenir des personnes et ajoutez tous les champs nécessaires.

Définir l’onglet e-mail pour les notifications par e-mail

Maintenant que vous avez créé tous les champs que vous souhaitez inclure dans votre formulaire de contact, vous êtes prêt à configurer le modèle de courrier électronique que vous recevrez lors de la soumission réussie du formulaire.

Tout d’abord, vous devrez configurer les éléments suivants:

• Pour elle – Entrez l’adresse e-mail à laquelle vous souhaitez recevoir les soumissions du formulaire de connexion.
• Par – Dans ce domaine, vous pouvez généralement utiliser « [email protected] »
• Matière – Définissez l’objet de l’e-mail. Dans de nombreux cas, vous pouvez simplement taper «soumission du formulaire de contact du nom de la page».
• En-tête supplémentaire – Ici, vous devez inclure une adresse de réponse (utilisez simplement le code d’adresse e-mail court que vous avez utilisé sur le formulaire), et vous pouvez également ajouter des champs Cc et Cci si vous souhaitez que l’e-mail soit envoyé à plusieurs personnes.

Une fois que vous avez configuré les détails de l’e-mail, vous êtes prêt à continuer avec le corps et les pièces jointes de l’e-mail (si vous autorisez les gens à télécharger des fichiers sur votre formulaire).

Je préfère en utiliser balises html pour rendre les e-mails de soumission de formulaire de contact un peu plus faciles à lire, mais vous n’êtes pas obligé de le faire.

Assurez-vous simplement que toutes les étiquettes que vous avez utilisées sur votre formulaire sont présentes sur Le corps du message, et toutes les balises de pièce jointe sont activées Pièces jointes champ

Une fois que vous les avez tous placés, accédez à votre formulaire de contact à l’avant et soumettez un test. Si vous aimez l’apparence de la mise en page dans votre e-mail, laissez-la telle quelle. Sinon, ajustez-le en fonction de vos besoins.

Définition d’une réponse automatique

Si vous faites défiler l’onglet Courrier, vous verrez Poteau (2). Cochez cette case pour activer ce modèle de courrier supplémentaire, souvent utilisé comme réponse automatique.

Une fois que vous avez coché la case, vous verrez les mêmes champs que dans la première section de courrier ci-dessus. Vous voudrez configurer cette zone un peu différemment si vous comptez l’utiliser comme répondeur automatique.

• Pour elle – Dans ce cas, vous souhaitez utiliser l’adresse e-mail de la personne qui a soumis le formulaire. Entrez simplement le shortcode que vous avez utilisé pour le champ email dans votre formulaire ci-dessus.
• Par – Entrez votre adresse e-mail et le nom de votre entreprise si vous souhaitez que les gens puissent répondre AVANT de leur répondre. Si vous le souhaitez, vous pouvez utiliser une adresse e-mail (par exemple) [email protected])
• Matière – Un simple merci fonctionne bien.
• En-tête supplémentaire – Dans cette zone, vous pouvez inclure une adresse Répondre – Si vous souhaitez que des personnes vous écrivent à une adresse e-mail différente de celle que vous avez saisie Par champ

Si vous connaissez du HTML, vous pouvez personnaliser votre répondeur automatique et ajouter votre propre logo ou photo. Vous pouvez également utiliser un générateur de signature HTML en ligne pour personnaliser votre répondeur automatique.

Questions fréquemment posées

Conclusion

Il est extrêmement important de permettre aux internautes de vous contacter facilement via votre site Web. Contact Form 7 est un excellent plugin gratuit et hautement personnalisable qui facilite la configuration d’un formulaire de contact. Nous espérons que ce guide vous a aidé à installer et configurer votre site WordPress.