Template mail

Anthony D. · lun. 27 avr. 2026 17:54

Bonjour,

J'ai conçu un modèle de notification pour les mails avec des blocs de couleur, je vous mets un aperçu du modèle ci-joint.
Modifié le code avec l'url de votre logo avant de vous en servir.

Code : Tout sélectionner

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Notification ticket</title>
</head>

<body style="margin:0; padding:0; background-color:#f4f6f9; font-family:Arial, sans-serif;">

<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9; padding:20px 0;">
<tr>
<td align="center">

<!-- CONTAINER -->
<table width="680" cellpadding="0" cellspacing="0" style="background:#ffffff; border:1px solid #e5e7eb;">
    
	<!-- LOGO -->
		<tr>
    		   <td align="center" style="padding:20px 0 20px 0; background:#ffffff;">
		     <a href="https://doco-services.fr" target="_blank" style="text-decoration:none;">
        	      <img src="https://i.postimg.cc/Twym8tbz/DOCO-SERVICES.jpg" alt="Logo Société" style="max-width:200px; height:auto;">
   	 	     </a>
		   </td>
		</tr>

    <!-- HEADER -->
    <tr>
        <td style="background-color:##mail_color_title#; color:#ffffff; padding:20px; font-size:20px; font-weight:bold;">
            #mail_object#
        </td>
    </tr>

    <!-- INTRO -->
    <tr>
        <td style="padding:20px; color:##mail_color_text#;">
            #mail_txt#
        </td>
    </tr>

    <!-- BLOC DEMANDEUR + TITRE -->
    <tr>
        <td style="padding:0 20px 20px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="background:#f9fafb; border:1px solid #e5e7eb;">
                <tr>
                    <td style="padding:15px;">
                        <p style="margin:0 0 8px 0;"><strong>#user# :</strong> #ticket_user#</p>
                        <p style="margin:0;"><strong>#title# :</strong> #ticket_title#</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- RESOLUTION (SANS LIGNE EN DESSOUS) -->
    <tr>
        <td style="padding:0 20px 20px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="border-left:5px solid #10b981; background:#ecfdf5;">
                <tr>
                    <td style="padding:15px;">
                        <p style="margin:0 0 8px 0; font-weight:bold;">#resolution#</p>
                        <p style="margin:0;">#ticket_resolution#</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

	<!-- DESCRIPTION -->
    <tr>
        <td style="padding:0 20px 20px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="background:#f9fafb; border:1px solid #e5e7eb;">
		<tr>
			<td style="padding:15px;">
            			<p style="margin:0 0 10px 0; font-weight:bold;">#description#</p>
            			<p style="margin:0;">#ticket_description#</p>
			</td>
		</tr>
	    </table>
        </td>
    </tr>

    <!-- DETAILS (⚠️ PAS DE BORDER-TOP ICI) -->
    <tr>
        <td style="padding:0 20px 20px 20px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="background:#f7fcff; border:1px solid #e5e7eb;">
		<tr>
                    <td style="padding:15px;">
           		<p style="margin:5px 0;"><strong>#technician# :</strong> #ticket_technician#</p>
            		<p style="margin:5px 0;"><strong>#state# :</strong> #ticket_state#</p>
           		<p style="margin:5px 0;"><strong>#date_create# :</strong> #ticket_date_create#</p>
           		<p style="margin:5px 0;"><strong>#date_res# :</strong> #ticket_date_res#</p>
            		<p style="margin:5px 0;"><strong>Temps passé :</strong> #ticket_time#</p>
   		   </td>
               </tr>
	   </table>
        </td>
    </tr>

    <!-- FOOTER -->
    <tr>
        <td style="padding:20px; background:#f9fafb; border-top:1px solid #e5e7eb; font-size:13px; color:#6b7280;">
            #mail_txt_end#
        </td>
    </tr>

</table>

</td>
</tr>
</table>

</body>
</html>