Résumé IA
Souhaitez-vous améliorer l'engagement client avec des notifications par e-mail personnalisées pour votre site WordPress ? En quelques étapes seulement, vous pouvez créer des notifications par e-mail personnalisées qui laisseront une impression durable sur votre public.
Ce tutoriel vous montrera comment personnaliser vos e-mails de notification WPForms.
Dans cet article
Avant de commencer, vous devrez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au constructeur de formulaires. Ensuite, assurez-vous de terminer la configuration de base des notifications par e-mail.
Accès aux paramètres de personnalisation des e-mails
Pour personnaliser vos notifications par e-mail, vous devrez d'abord aller dans WPForms » Paramètres et cliquer sur l'onglet E-mail.
Personnalisation des notifications par e-mail
Après avoir cliqué sur l'onglet E-mail, vous trouverez tous les paramètres qui vous permettent de personnaliser les notifications par e-mail envoyées via WPForms. Nous couvrirons chacune des options de personnalisation dans les sections suivantes.
Remarque : Les paramètres des sections suivantes s'appliquent à tous les e-mails de notification WPForms de votre site, pas seulement à ceux d'un formulaire individuel.
Choix d'un modèle d'e-mail
WPForms propose de nombreux modèles que vous pouvez utiliser pour personnaliser l'apparence de vos e-mails de notification.
Dans la section Modèle, vous trouverez tous les modèles disponibles pris en charge par WPForms. Chacun des modèles d'e-mail a son style et ses fonctionnalités uniques. Ci-dessous, nous avons décrit les modèles disponibles.
- Classique
- Compact
- Moderne
- Élégant
- Technique
- Texte brut
Remarque : Vous aurez besoin d'une licence WPForms valide pour utiliser les modèles Moderne, Élégant et Technique.
Par défaut, tous les e-mails utilisent le format Classique. Mais vous pouvez mettre à jour le modèle et le schéma de couleurs pour correspondre aux styles de votre marque.
Remarque : Si vous aviez précédemment configuré le modèle HTML avant de passer à la version 1.8.5 ou supérieure de WPForms, vous verrez le modèle Hérité sélectionné par défaut. Ce modèle ne prend pas en charge certaines des options de style modernes comme la définition d'un schéma de couleurs ou la modification de la famille de polices. Consultez notre section FAQ pour plus de détails.
Pour sélectionner un modèle, survolez simplement le modèle que vous souhaitez utiliser et cliquez sur le bouton Choisir. Pour cet exemple, nous choisirons le modèle Moderne, mais vous pouvez en choisir un qui vous plaît.
À tout moment, vous pouvez cliquer sur le bouton Aperçu pour voir à quoi ressembleraient les modèles dans la boîte de réception de votre utilisateur.
Voici un exemple de l'apparence du modèle d'e-mail Moderne.
Si vous préférez passer à des notifications compactes, sélectionnez Compact dans la section Modèle. Cliquez ensuite sur Aperçu pour voir à quoi cela ressemble.
Voici un exemple de l'apparence d'un e-mail compact.
L'option Texte brut supprime tous les styles de l'e-mail de notification. Voici à quoi il ressemble lorsque vous prévisualisez le modèle.
Ajustement des paramètres d'apparence
WPForms vous permet de personnaliser vos notifications par e-mail avec un thème Clair ou Sombre pour correspondre au style de votre marque. Pour modifier le thème visuel de vos e-mails, sélectionnez simplement l'option Clair ou Sombre dans la section Apparence. Cela garantit que vos e-mails auront fière allure et resteront cohérents avec votre marque dans la boîte de réception de vos utilisateurs.
Une fois que vous avez choisi votre mode d'apparence préféré, vous pouvez définir sa propre image d'en-tête, son schéma de couleurs unique et sa typographie pour ce mode, garantissant ainsi un aspect cohérent et attrayant pour vos e-mails dans les thèmes Clair et Sombre.
Remarque : L'apparence de l'e-mail peut varier en fonction du paramètre de mode sombre de votre appareil. Pour un aperçu précis, assurez-vous que les paramètres de votre appareil correspondent à l'option d'apparence que vous avez choisie.
Définition d'une image d'en-tête d'e-mail
Si vous souhaitez ajouter une image d'en-tête ou un logo à vos e-mails de notification, faites défiler jusqu'à la section Image d'en-tête. Cliquez ensuite sur Télécharger l'image pour sélectionner votre fichier d'image d'en-tête.
Pour une meilleure expérience de visualisation sur toutes les tailles d'écran, nous vous recommandons d'utiliser une image de 300 pixels de large et 100 pixels de haut.
Après avoir téléchargé votre image, vous verrez un menu déroulant pour sélectionner la taille de l'image à utiliser pour vos notifications par e-mail. Les tailles disponibles incluent Petit, Moyen et Grand. La sélection de l'une de ces tailles ajustera la résolution de l'image pour correspondre à la taille choisie.
L'image s'ajuste également à l'écran de l'utilisateur. Cela signifie que si vous consultez l'e-mail de notification depuis un appareil mobile, il s'adaptera à la taille de l'écran.
Pour plus de détails, consultez notre tutoriel sur l'ajout d'une image d'en-tête aux e-mails de notification.
Modification du schéma de couleurs
WPForms fournit une section Schéma de couleurs qui vous permet de personnaliser les couleurs des éléments de l'e-mail de notification. Vous trouverez ci-dessous une explication de tous les schémas de couleurs disponibles :
Arrière-plan
Cette couleur contrôle l'apparence extérieure du modèle d'e-mail. Vous trouverez ci-dessous un exemple avec une couleur de fond bleu clair.
Corps
La couleur du corps contrôle l'apparence du conteneur du modèle d'e-mail. C'est la zone où réside l'e-mail de notification réel. Voici une image d'exemple avec un schéma de couleurs blanc pour le conteneur du corps.
Texte
C'est la couleur qui sera utilisée pour tous les textes de l'e-mail de notification. Le schéma de couleurs par défaut est une couleur de texte sombre, comme on le voit dans l'image ci-dessous.
Liens
C'est le schéma de couleurs pour tous les liens de l'e-mail de notification. Dans l'image ci-dessous, l'adresse e-mail est un lien qui utilise la couleur orange par défaut pour les liens.
Pour mettre à jour l'une des couleurs, vous pouvez soit entrer la valeur HEX dans le champ de couleur, soit cliquer dessus pour ouvrir le sélecteur de couleurs.
Avec le sélecteur de couleurs, vous pouvez ajuster la couleur à votre goût.
Mise à jour de la typographie des e-mails
La typographie contrôle la famille de polices qui sera utilisée pour les e-mails de notification de votre site. WPForms prend actuellement en charge les polices Sans Serif et Serif.
Pour mettre à jour la famille de polices de votre modèle d'e-mail, cliquez sur le menu déroulant Typographie et sélectionnez la police que vous souhaitez utiliser.
Une fois que vous avez terminé la personnalisation de votre modèle d'e-mail, faites défiler vers le bas et cliquez sur le bouton Enregistrer les paramètres pour sauvegarder vos modifications.
Aperçu de votre modèle d'e-mail
Après avoir enregistré vos modifications, vous pouvez en avoir un aperçu pour voir à quoi il ressemblerait dans la boîte de réception de votre utilisateur. Pour ce faire, cliquez sur le lien Aperçu du modèle d'e-mail sous le menu déroulant Typographie.
Cela ouvrira un aperçu de votre modèle d'e-mail de notification dans un nouvel onglet de navigateur. L'aperçu appliquera toutes les personnalisations que vous venez de configurer.
Si l'appareil de l'utilisateur est configuré pour utiliser le mode sombre, l'e-mail de notification s'ajustera automatiquement pour correspondre à l'apparence de l'appareil de l'utilisateur.
Personnalisation des notifications pour les formulaires individuels
Si vous le souhaitez, vous pouvez personnaliser le modèle d'e-mail pour un formulaire spécifique dans le générateur de formulaires. Pour ce faire, ouvrez le formulaire souhaité et accédez à Paramètres » Notifications.
Ensuite, faites défiler vers le bas et cliquez sur Avancé pour accéder aux paramètres avancés. Vous devriez voir un menu déroulant Modèle d'e-mail.
Par défaut, cette option est définie sur Modèle par défaut pour tous les formulaires de votre site. Cela signifie que vos formulaires utiliseront les paramètres globaux que vous avez configurés sur la page des paramètres.
Pour remplacer le modèle par défaut, cliquez sur le menu déroulant Modèle d'e-mail et sélectionnez le modèle que vous souhaitez utiliser.
Alternativement, vous pouvez cliquer sur le lien voir les modèles pour voir tous les modèles disponibles.
Dans la fenêtre qui apparaît, sélectionnez celui que vous souhaitez utiliser pour le formulaire spécifique.
Une fois terminé, assurez-vous de sauvegarder votre formulaire pour mettre à jour le modèle.
Remarque : Choisir un modèle à partir du générateur de formulaires appliquera les styles par défaut du modèle. Vous ne pourrez pas personnaliser les couleurs et la typographie du modèle à partir du générateur de formulaires.
Questions fréquemment posées
Voici les réponses à quelques questions fréquentes sur la personnalisation des modèles d'e-mails de notification.
Je ne vois pas le modèle HTML. Comment puis-je l'inclure dans la bibliothèque de modèles d'e-mails ?
Si vous utilisiez le modèle HTML avant la mise à jour vers la version 1.8.5 ou supérieure de WPForms, vous aurez probablement toujours le modèle HTML disponible sur votre page de paramètres d'e-mail. Ce modèle est nommé Legacy dans la section Modèle.
Si vous ne voyez pas le modèle Legacy, vous pouvez l'afficher en ajoutant un filtre personnalisé au fichier functions.php de votre thème. Vous trouverez ci-dessous l'extrait de code à ajouter à votre site.
/** * This code snippet forces using the Legacy email template that was called the "HTML" in v1.8.4 and below. */ $settings = (array) get_option( 'wpforms_settings', [] ); $settings['email-template'] = 'default'; update_option( 'wpforms_settings', $settings );
Remarque : Consultez notre guide sur l'ajout de code PHP personnalisé pour WPForms si vous avez besoin d'aide supplémentaire.
Si vous utilisez le plugin WPCode, vous pouvez facilement importer le code ci-dessus sur votre site. Pour plus de détails, consultez notre tutoriel sur l'intégration de snippets de code.
Étant donné que le modèle HTML n'est pas pris en charge par défaut dans WPForms version 1.8.5 ou supérieure, vous ne pourrez pas lui appliquer certaines des nouvelles options de style.
Vous pouvez toujours mettre à jour la couleur d'arrière-plan de votre modèle. Cependant, l'utilisation de la palette de couleurs et des paramètres de typographie n'est pas prise en charge sur le modèle Legacy.
C'est tout ! Vous savez maintenant comment personnaliser vos e-mails de notification de formulaire.
Explorez nos autres tutoriels sur les notifications de formulaire pour apprendre comment en tirer le meilleur parti.