Attention !

Cet article contient du code PHP et CSS et s'adresse aux développeurs. Nous proposons ce code à titre gracieux, mais nous n'offrons pas de support pour les personnalisations de code ou le développement tiers.

Pour obtenir des conseils supplémentaires, veuillez consulter le tutoriel de WPBeginner sur l'ajout de code personnalisé et de CSS personnalisé.

Ignorer

Comment personnaliser les styles du modèle d'e-mail

Souhaitez-vous personnaliser les styles du modèle d'e-mail pour vos notifications par e-mail ? Depuis la version 1.8.5, WPForms propose de nombreux styles de modèles différents parmi lesquels choisir pour les notifications par e-mail. Vous pouvez en savoir plus sur ces modèles en consultant cet article d'annonce.

Cependant, si vous souhaitez étendre la personnalisation de ces modèles, ce tutoriel vous guidera dans la meilleure façon d'y parvenir.

Par défaut, WPForms permet déjà de modifier le schéma de couleurs de chaque modèle ainsi que d'ajouter une image d'en-tête. Pour plus de détails sur la façon de procéder, veuillez consulter cette documentation.

Chaque modèle, à l'exception de Texte brut, vous donnera la possibilité de définir votre schéma de couleurs et de télécharger un logo d'en-tête. Accédez simplement au tableau de bord WordPress » WPForms » Paramètres » E-mail pour définir vos préférences concernant le modèle ainsi que pour personnaliser sa conception.

Nous avons maintenant ajouté notre image d'en-tête et défini notre palette de couleurs via les paramètres du modèle d'e-mail WPForms

Création de votre formulaire

Pour commencer, vous devrez créer votre formulaire et ajouter vos champs. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

commencez par créer votre formulaire et ajouter vos champs

Vous recherchez le modèle Hérité ? Ce modèle a été retiré avec la version 1.8.5, mais vous pouvez toujours l'activer si vous le souhaitez. Si vous recherchez ce modèle d'e-mail, veuillez consulter ce tutoriel.

Modification des messages d'e-mail à l'aide de HTML

Si vous souhaitez ajouter une personnalisation supplémentaire à vos notifications par e-mail en mettant simplement en gras les étiquettes dans le texte de l'e-mail, vous pouvez également le faire facilement en modifiant votre formulaire et, dans l'onglet Paramètres » Notifications de l'éditeur de formulaire, modifiez votre champ Message. Vous pouvez remplacer {all_fields} dans votre champ Message par :

<b>Nom :</b> {field_id="0"}<br> <b>E-mail :</b> {field_id="1"}<br> <b>Message :</b> {field_id="2"}

ajout de HTML standard au modèle de notification par e-mail

Nous utilisons des balises intelligentes dans notre champ Message pour construire cette réponse. Pour plus d'aide sur l'utilisation des champs de formulaire complétés comme balises intelligentes, veuillez consulter ce tutoriel.

après le changement de mise en gras du texte dans le champ du message de notification par e-mail

Personnalisation du modèle d'e-mail

Si vous souhaitez modifier l'apparence de vos modèles d'e-mail WPForms mais que le codage vous intimide un peu, ne vous inquiétez pas ! Il existe un moyen simple de le faire sans entrer dans des détails techniques trop poussés.

Imaginez vos modèles d'e-mail comme les tenues que portent vos formulaires lorsqu'ils envoient des messages. Nous pouvons modifier ces tenues en ajustant les fichiers de modèle dans votre thème enfant. Pour plus d'informations sur la création d'un thème enfant, veuillez consulter ce guide utile !

Disons que vous souhaitez donner une couleur de fond différente au modèle Classique. Voici ce que vous faites :

Accéder à la garde-robe : Recherchez le fichier classic-style.php dans wp-content/plugins/wpforms/templates/emails/.

Copier-coller : Prenez ce fichier et placez-le dans le dossier wpforms/emails/ de votre thème enfant. C'est comme créer un placard personnalisé pour vos formulaires. Vous devrez créer ce dossier dans votre thème enfant.

Mettez-le en valeur : Ouvrez le fichier que vous venez de coller, et vous pourrez y ajouter les styles que vous souhaitez. Pensez-y comme choisir des accessoires pour l'e-mail de votre formulaire.

Maintenant, pourquoi est-ce génial ? Tous les styles que vous ajouterez seront magiquement transformés en CSS en ligne pour chaque élément de l'e-mail. Cela garantit que vos styles auront fière allure sur différentes plateformes et appareils de messagerie.

Mais voici une astuce de pro : évitez d'utiliser des balises de style dans l'élément head ; elles pourraient ne pas bien fonctionner partout. Pour plus d'informations, vous pouvez consulter cette ressource.

N'oubliez pas que cette méthode peut ne pas fonctionner parfaitement pour certains clients de messagerie comme Outlook et Windows Mail. Ils peuvent être un peu pointilleux quant à la reconnaissance de certains styles.

Si vous vous sentez d'humeur sophistiquée et que vous souhaitez modifier d'autres modèles, chacun a son propre fichier unique dans le répertoire wpforms/emails/. Copiez, collez et stylisez à volonté ! Pour les modèles de la version pro, trouvez-les dans wp-content/plugins/wpforms/pro/templates/emails/ et apportez-les au dossier d'e-mails de votre thème enfant.

Et voilà ! Maintenant, vos formulaires sont habillés de styles qui correspondent à vos goûts, sans avoir besoin d'un diplôme en codage. 🌟

Souhaitez-vous également modifier ou supprimer complètement le texte du pied de page ? Il existe un moyen simple de le faire avec un petit extrait de code PHP. Consultez l'extrait sur Comment supprimer ou modifier le texte du pied de page des notifications par e-mail.