'i would like to send html content with css to email using php. this i got so far. all work but the content that was sen in email is not interpreted

this is the code where i send email. the file_get_contents(); i retrieve the content but in plain format text. the css style didnt read.

<?php


use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

include 'connection.php';
$conn = new Connection();

if(!$conn->connect()) die('Configuration error');
echo (extension_loaded('openssl')?'SSL loaded':'SSL not loaded')."<br />";
$to_decode = json_decode(file_get_contents("php://input"));
$email = $to_decode->email;
$mail = new PHPMailer(true);
$template = "template.php";
$dom_details = array(
    "{my-website}" => "Sample Website",
    "{my-number}" => "Country-State-Local Code-Number",
    "{my-message}" => 'MIKOMIKO'
);
if(file_exists($template))
    $temp_message = file_get_contents($template);
else
    die("Template file not found!");
    
    foreach(array_keys($dom_details) as $key){
        $temp_message = str_replace($key, $dom_details[$key], $temp_message);
    }
try{
    $mail->isSMTP();                                        // Send using SMTP
    $mail->Host       = 'smtp.gmail.com';                   // Set the SMTP server to send through
    $mail->SMTPAuth   = true;                               // Enable SMTP authentication
    //use your own account details
    //if you are using a gmail account, turn on less secured app under security
    $mail->Username   = '[email protected]';            // SMTP username
    $mail->Password   = 'ssss';                    // SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;     // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
    $mail->Port       = 587;                                // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above

    //Recipients
    $mail->setFrom('[email protected]');
    $mail->addAddress($email);     // Add a recipient
    //$mail->addCC('[email protected]');
    $mail->Subject = 'welcmoe blog to my guys';
    $mail->Body    = $temp_message;
    
    //$mail->IsHTML(true);
    $mail->send();
    echo 'Message Sent';
} catch (Exception $e){
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

?>

this is the content of the template i need to be in the email

<html>
    <head>
    </head>
    <body style="background-color:ddd;">
        <div style="margin: auto; width: 40%; text-align: center; font-size: 20px; padding: 1% 2% 3% 3%; background-color: eee; border-radius: 12px; margin-top: 3%;">
            <h1>Hi {client-name}!</h1><hr /><br />
            <span>Welcome to {my-website}. Your new account comes with access to all features and services.
            To get started, click the button below to active your account.</span>
            <br />
            <br />
            <a href="http://localhost/activities/SystemInteg/include-mailer-email-html-2">
                <button style="padding: 1%; background-color:#045791; border-radius:8px;">
                    <span style="font-size: 20px; color: white;">Activate</span>
                </button>
            </a><br />
            <br />
            <p>For any concerns, kindly call or text us at {my-number}.</p>
            <p>Additional message goes here: Visit {website}</p>
        </div>
    </body>
</html>

this is the email i receieve. as you can see all the element of the html and css style is in plain text format. exactly the same as the template. please help how can i make it work with this codes provided. thank you !

<html>
    <head>
    </head>
    <body style="background-color:ddd;">
            <div style="margin: auto; width: 40%; text-align: center; font-size: 20px; padding: 1% 2% 3% 3%; background-color: eee; border-radius: 12px; margin-top: 3%;">
                    <h1>Hi {client-name}!</h1><hr /><br />
                    <span>Welcome to Sample Website. Your new account comes with access to all features and services.
                    To get started, click the button below to active your account.</span>
                    <br />
                    <br />
                    <a href="http://localhost/activities/SystemInteg/include-mailer-email-html-2">
                            <button style="padding: 1%; background-color:#045791; border-radius:8px;">
                                    <span style="font-size: 20px; color: white;">Activate</span>
                            </button>
                    </a><br />
                    <br />
                    <p>For any concerns, kindly call or text us at Country-State-Local Code-Number.</p>
                    <p>Additional message goes here: Visit {website}</p>
            </div>
    </body>


Solution 1:[1]

 //$mail->IsHTML(true);

uncomment the above, so phpmailer sends html mails

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mels_D