Breaking

Wednesday, September 9, 2020

Home / email / email template / PHP / send email / How to send email in html format using php ?

How to send email in html format using php ?

by on in , , ,

 First let's create html form in mail.php file using bootstrap 4.5. before strats let's how it will looks like










 Now let's create mail.php file 

<!DOCTYPE html>

<html>


<head>


    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>HTML Mail</title>

<!-- CSS only -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<!-- JS, Popper.js, and jQuery -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- ckeditor -->

<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

</head>


<body>

<div class="jumbotron container-fluid py-3 bg-info text-white">

<div class="container ">

<h1>HTML Email sending using php</h1>

</div>

</div>

<?php if(isset($_REQUEST['msg'])){ ?>

        <div class="alert alert-success" role="alert">

         <?php echo $_REQUEST['msg']; ?>

        </div>

    <?php } ?>

<div class="container">

<form method="post" action="send_mail.inc.php">

<div class="form-group row">

<label class="col-sm-2 col-form-label">To:</label>

<div class="col-sm-10"><input type="email" name="emailid" class="form-control" value=""></div>

</div>

<div class="form-group row">

<label class="col-sm-2 col-form-label">Subject:</label>

<div class="col-sm-10"><input type="text" name="subject" class="form-control" value=""></div>

</div>

<div class="mail-text h-200">

   <textarea rows="10" name="message" class="form-control" cols="100"></textarea>

<script>

CKEDITOR.replace( 'message' );

</script>


<div class="clearfix"></div>

</div>

<div class="mail-body text-right tooltip-demo mt-2">

   <input type="submit" class="btn btn-success" name="send" value="send">

</div>

</form>

</div>


</body>


</html>

Now create send_mail.inc.php which is action of form above it will trigger when send button click 
<?php
$to = $_POST['emailid'];
$subject = $_POST['subject'];
$text = $_POST['message'];
$message ='
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Actionable emails e.g. reset password</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
}

img {
max-width: 100%;
}

body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6;
}

table td {
vertical-align: top;
}


body {
background-color: #f6f6f6;
}

.body-wrap {
background-color: #f6f6f6;
width: 100%;
}

.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
/* makes it centered */
clear: both !important;
}

.content {
max-width: 600px;
margin: 0 auto;
display: block;
padding: 20px;
}

.main {
background: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;
}

.content-wrap {
padding: 20px;
}

.content-block {
padding: 0 0 20px;
}

.header {
width: 100%;
margin-bottom: 20px;
}

.footer {
width: 100%;
clear: both;
color: #999;
padding: 20px;
}
.footer a {
color: #999;
}
.footer p, .footer a, .footer unsubscribe, .footer td {
font-size: 12px;
}


h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin: 40px 0 0;
line-height: 1.2;
font-weight: 400;
}

h1 {
font-size: 32px;
font-weight: 500;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 14px;
font-weight: 600;
}

p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
}
p li, ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}


a {
color: #1ab394;
text-decoration: underline;
}

.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #1ab394;
border: solid #1ab394;
border-width: 5px 10px;
line-height: 2;
font-weight: bold;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 5px;
text-transform: capitalize;
}


.last {
margin-bottom: 0;
}

.first {
margin-top: 0;
}

.aligncenter {
text-align: center;
}

.alignright {
text-align: right;
}

.alignleft {
text-align: left;
}

.clear {
clear: both;
}


.alert {
font-size: 16px;
color: #fff;
font-weight: 500;
padding: 20px;
text-align: center;
border-radius: 3px 3px 0 0;
}
.alert a {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
}
.alert.alert-warning {
background: #f8ac59;
}
.alert.alert-bad {
background: #ed5565;
}
.alert.alert-good {
background: #1ab394;
}

.invoice {
margin: 40px auto;
text-align: left;
width: 80%;
}
.invoice td {
padding: 5px 0;
}
.invoice .invoice-items {
width: 100%;
}
.invoice .invoice-items td {
border-top: #eee 1px solid;
}
.invoice .invoice-items .total td {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
font-weight: 700;
}


@media only screen and (max-width: 640px) {
h1, h2, h3, h4 {
font-weight: 600 !important;
margin: 20px 0 5px !important;
}

h1 {
font-size: 22px !important;
}

h2 {
font-size: 18px !important;
}

h3 {
font-size: 16px !important;
}

.container {
width: 100% !important;
}

.content, .content-wrap {
padding: 10px !important;
}

.invoice {
width: 100% !important;
}
}

</style>
</head>

<body>

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" width="600">
            <div class="content">
                <table class="main" width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="content-wrap">
                            <table  cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <img class="img-fluid" src="http://mysite48.000webhostapp.com/emailheader.jpg">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        <h3>Welcom in basic email template</h3>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        ' . $text . '
                                    </td>
                                </tr>
                              </table>
                        </td>
                    </tr>
                </table>
                <div class="footer">
                    <table width="100%">
                        <tr>
                            <td class="aligncenter content-block">Follow <a href="https://phptutorials99.blogspot.com/">https://phptutorials99.blogspot.com/</a> .</td>
                        </tr>
                    </table>
                </div></div>
        </td>
        <td></td>
    </tr>
</table>

</body>
</html>
';

// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= "From: <boricha.nilesh768@gmail.com>" . "\r\n";

mail($to,$subject,$message,$headers);
header("location:mail.php?msg=mail sent successfully");
?>

thank you for visiting my blog 






Author Image

About Nilesh TYPO3 Developer | PHP Developer
Sora Blogging Tips is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of sora blogging tips is to provide the best quality blogger templates.

Related Posts:
By at
Labels:TYPO3 , , ,

No comments:

Post a Comment

your suggestion are welcome by me

Subscribe to: Post Comments (Atom)