Things not working properly when html code is sent as email
2
I have made an html page which, when opening in normal browser is opening fine. But when I am sending it as a email(better to say designer email) it is not working properly.
Problem 1: The button shadow is not showing.
Problem 2 : The text is not getting copied when I am pressing the button.
Html Code email_final.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alike">
</head>
<body class="height:1308px;width:995px;" style="height:1308px;width:995px;">
<header style="background-color:#F39325;height:359px;width:999px;"><img src="https://firstwbst.000webhostapp.com/android/assets/img/company_logo.png" style="display:block;margin-left:auto;margin-right:auto;width:183px;height:208px;">
<h1 class="text-center" style="color:rgb(255,255,255);font-family:Alike, serif;margin-top:18px;text-align:center;display:block;margin-left:auto;margin-right:auto;">Welcome ##% name %##,</h1>
<h2 class="text-center" style="font-family:Alike, serif;color:rgb(254,255,255);display:block;margin-left:auto;margin-right:auto;text-align:center;margin-top:18px;">Welcome! Thank you for signing up with Home Cooked.</h2>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;margin-top:42px;margin-left:58px;color:rgb(0,0,0);">Please take a moment to verify your email address.</p>
<p style="font-size:30px;font-family:Alike, serif;margin-left:58px;font-weight:700;margin-top:32px;color:#000000;">Username: ##% email %##</p>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;text-align:center;margin-top:82px;text-decoration:underline;color:#000000;">Your verification code is:</p>
<p id="p1" style="font-size:90px;font-family:Alike, serif;font-weight:700;border:4px solid #000000;border-style:solid;border-radius:57px;display:inline;text-align:center;padding-left:100px;padding-right:100px;padding-bottom:20px;padding-top:20px;margin-left:227px;margin-top:21px;color:#000000;">##% otp %##</p>
<button onclick="copyToClipboard('#p1')" class="btn btn-primary" type="button" style="background-color:#f39325;border-radius:40px;height:85px;width:233px;margin-right:0;margin-left:369px;margin-top:41px;font-family:Alike, serif;font-size:25px;">Copy Code</button>
<p style="font-size:25px;font-family:Alike, serif;margin-left:58px;font-weight:600;margin-top:38px;margin-right:58px;color:#000000;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail. </p>
<p style="font-size:20px;font-family:Alike, serif;font-weight:500;color:rgba(2,2,2,0.55);text-align:center;margin-top:34px;">If you didn't make this request, please ignore.</p>
<script>
function copyToClipboard(element)
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
</script>
</body>
</html>
I am using a php script to send the mail sendMail.php:
$subject = "User Verification";
$from = "promodbaghla@gmail.com";
$headers = "MIME-Version: 1.0" . "n";
$headers .= "Content-type:text/html;charset=UTF-8" . "n";
$template = file_get_contents("email_final.html");
$variable['email'] = "emailid@gmail.com";
$variable['name'] = "Sayok";
$variable['otp'] = "036543";
$template = str_replace('##% name %##',$variable['name'],$template);
$template = str_replace('##% otp %##',$variable['otp'],$template);
$template = str_replace('##% email %##',$variable['email'],$template);
mail($variable['email'],$subject,$template,$headers)
php html email
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
add a comment |
2
I have made an html page which, when opening in normal browser is opening fine. But when I am sending it as a email(better to say designer email) it is not working properly.
Problem 1: The button shadow is not showing.
Problem 2 : The text is not getting copied when I am pressing the button.
Html Code email_final.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alike">
</head>
<body class="height:1308px;width:995px;" style="height:1308px;width:995px;">
<header style="background-color:#F39325;height:359px;width:999px;"><img src="https://firstwbst.000webhostapp.com/android/assets/img/company_logo.png" style="display:block;margin-left:auto;margin-right:auto;width:183px;height:208px;">
<h1 class="text-center" style="color:rgb(255,255,255);font-family:Alike, serif;margin-top:18px;text-align:center;display:block;margin-left:auto;margin-right:auto;">Welcome ##% name %##,</h1>
<h2 class="text-center" style="font-family:Alike, serif;color:rgb(254,255,255);display:block;margin-left:auto;margin-right:auto;text-align:center;margin-top:18px;">Welcome! Thank you for signing up with Home Cooked.</h2>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;margin-top:42px;margin-left:58px;color:rgb(0,0,0);">Please take a moment to verify your email address.</p>
<p style="font-size:30px;font-family:Alike, serif;margin-left:58px;font-weight:700;margin-top:32px;color:#000000;">Username: ##% email %##</p>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;text-align:center;margin-top:82px;text-decoration:underline;color:#000000;">Your verification code is:</p>
<p id="p1" style="font-size:90px;font-family:Alike, serif;font-weight:700;border:4px solid #000000;border-style:solid;border-radius:57px;display:inline;text-align:center;padding-left:100px;padding-right:100px;padding-bottom:20px;padding-top:20px;margin-left:227px;margin-top:21px;color:#000000;">##% otp %##</p>
<button onclick="copyToClipboard('#p1')" class="btn btn-primary" type="button" style="background-color:#f39325;border-radius:40px;height:85px;width:233px;margin-right:0;margin-left:369px;margin-top:41px;font-family:Alike, serif;font-size:25px;">Copy Code</button>
<p style="font-size:25px;font-family:Alike, serif;margin-left:58px;font-weight:600;margin-top:38px;margin-right:58px;color:#000000;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail. </p>
<p style="font-size:20px;font-family:Alike, serif;font-weight:500;color:rgba(2,2,2,0.55);text-align:center;margin-top:34px;">If you didn't make this request, please ignore.</p>
<script>
function copyToClipboard(element)
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
</script>
</body>
</html>
I am using a php script to send the mail sendMail.php:
$subject = "User Verification";
$from = "promodbaghla@gmail.com";
$headers = "MIME-Version: 1.0" . "n";
$headers .= "Content-type:text/html;charset=UTF-8" . "n";
$template = file_get_contents("email_final.html");
$variable['email'] = "emailid@gmail.com";
$variable['name'] = "Sayok";
$variable['otp'] = "036543";
$template = str_replace('##% name %##',$variable['name'],$template);
$template = str_replace('##% otp %##',$variable['otp'],$template);
$template = str_replace('##% email %##',$variable['email'],$template);
mail($variable['email'],$subject,$template,$headers)
php html email
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45
add a comment |
2
2
2
I have made an html page which, when opening in normal browser is opening fine. But when I am sending it as a email(better to say designer email) it is not working properly.
Problem 1: The button shadow is not showing.
Problem 2 : The text is not getting copied when I am pressing the button.
Html Code email_final.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alike">
</head>
<body class="height:1308px;width:995px;" style="height:1308px;width:995px;">
<header style="background-color:#F39325;height:359px;width:999px;"><img src="https://firstwbst.000webhostapp.com/android/assets/img/company_logo.png" style="display:block;margin-left:auto;margin-right:auto;width:183px;height:208px;">
<h1 class="text-center" style="color:rgb(255,255,255);font-family:Alike, serif;margin-top:18px;text-align:center;display:block;margin-left:auto;margin-right:auto;">Welcome ##% name %##,</h1>
<h2 class="text-center" style="font-family:Alike, serif;color:rgb(254,255,255);display:block;margin-left:auto;margin-right:auto;text-align:center;margin-top:18px;">Welcome! Thank you for signing up with Home Cooked.</h2>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;margin-top:42px;margin-left:58px;color:rgb(0,0,0);">Please take a moment to verify your email address.</p>
<p style="font-size:30px;font-family:Alike, serif;margin-left:58px;font-weight:700;margin-top:32px;color:#000000;">Username: ##% email %##</p>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;text-align:center;margin-top:82px;text-decoration:underline;color:#000000;">Your verification code is:</p>
<p id="p1" style="font-size:90px;font-family:Alike, serif;font-weight:700;border:4px solid #000000;border-style:solid;border-radius:57px;display:inline;text-align:center;padding-left:100px;padding-right:100px;padding-bottom:20px;padding-top:20px;margin-left:227px;margin-top:21px;color:#000000;">##% otp %##</p>
<button onclick="copyToClipboard('#p1')" class="btn btn-primary" type="button" style="background-color:#f39325;border-radius:40px;height:85px;width:233px;margin-right:0;margin-left:369px;margin-top:41px;font-family:Alike, serif;font-size:25px;">Copy Code</button>
<p style="font-size:25px;font-family:Alike, serif;margin-left:58px;font-weight:600;margin-top:38px;margin-right:58px;color:#000000;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail. </p>
<p style="font-size:20px;font-family:Alike, serif;font-weight:500;color:rgba(2,2,2,0.55);text-align:center;margin-top:34px;">If you didn't make this request, please ignore.</p>
<script>
function copyToClipboard(element)
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
</script>
</body>
</html>
I am using a php script to send the mail sendMail.php:
$subject = "User Verification";
$from = "promodbaghla@gmail.com";
$headers = "MIME-Version: 1.0" . "n";
$headers .= "Content-type:text/html;charset=UTF-8" . "n";
$template = file_get_contents("email_final.html");
$variable['email'] = "emailid@gmail.com";
$variable['name'] = "Sayok";
$variable['otp'] = "036543";
$template = str_replace('##% name %##',$variable['name'],$template);
$template = str_replace('##% otp %##',$variable['otp'],$template);
$template = str_replace('##% email %##',$variable['email'],$template);
mail($variable['email'],$subject,$template,$headers)
php html email
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
I have made an html page which, when opening in normal browser is opening fine. But when I am sending it as a email(better to say designer email) it is not working properly.
Problem 1: The button shadow is not showing.
Problem 2 : The text is not getting copied when I am pressing the button.
Html Code email_final.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>email</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alike">
</head>
<body class="height:1308px;width:995px;" style="height:1308px;width:995px;">
<header style="background-color:#F39325;height:359px;width:999px;"><img src="https://firstwbst.000webhostapp.com/android/assets/img/company_logo.png" style="display:block;margin-left:auto;margin-right:auto;width:183px;height:208px;">
<h1 class="text-center" style="color:rgb(255,255,255);font-family:Alike, serif;margin-top:18px;text-align:center;display:block;margin-left:auto;margin-right:auto;">Welcome ##% name %##,</h1>
<h2 class="text-center" style="font-family:Alike, serif;color:rgb(254,255,255);display:block;margin-left:auto;margin-right:auto;text-align:center;margin-top:18px;">Welcome! Thank you for signing up with Home Cooked.</h2>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;margin-top:42px;margin-left:58px;color:rgb(0,0,0);">Please take a moment to verify your email address.</p>
<p style="font-size:30px;font-family:Alike, serif;margin-left:58px;font-weight:700;margin-top:32px;color:#000000;">Username: ##% email %##</p>
<p style="font-size:35px;font-family:Alike, serif;font-weight:700;text-align:center;margin-top:82px;text-decoration:underline;color:#000000;">Your verification code is:</p>
<p id="p1" style="font-size:90px;font-family:Alike, serif;font-weight:700;border:4px solid #000000;border-style:solid;border-radius:57px;display:inline;text-align:center;padding-left:100px;padding-right:100px;padding-bottom:20px;padding-top:20px;margin-left:227px;margin-top:21px;color:#000000;">##% otp %##</p>
<button onclick="copyToClipboard('#p1')" class="btn btn-primary" type="button" style="background-color:#f39325;border-radius:40px;height:85px;width:233px;margin-right:0;margin-left:369px;margin-top:41px;font-family:Alike, serif;font-size:25px;">Copy Code</button>
<p style="font-size:25px;font-family:Alike, serif;margin-left:58px;font-weight:600;margin-top:38px;margin-right:58px;color:#000000;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail. </p>
<p style="font-size:20px;font-family:Alike, serif;font-weight:500;color:rgba(2,2,2,0.55);text-align:center;margin-top:34px;">If you didn't make this request, please ignore.</p>
<script>
function copyToClipboard(element)
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
</script>
</body>
</html>
I am using a php script to send the mail sendMail.php:
$subject = "User Verification";
$from = "promodbaghla@gmail.com";
$headers = "MIME-Version: 1.0" . "n";
$headers .= "Content-type:text/html;charset=UTF-8" . "n";
$template = file_get_contents("email_final.html");
$variable['email'] = "emailid@gmail.com";
$variable['name'] = "Sayok";
$variable['otp'] = "036543";
$template = str_replace('##% name %##',$variable['name'],$template);
$template = str_replace('##% otp %##',$variable['otp'],$template);
$template = str_replace('##% email %##',$variable['email'],$template);
mail($variable['email'],$subject,$template,$headers)
php html email
php html email
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
asked Jul 4 '18 at 10:04
Sayok MajumderSayok Majumder
332114
332114
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45
add a comment |
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45
add a comment |
1 Answer
1
active
oldest
votes
3
- Put the button CSS ie the shadow inside the inline css of the button.
- Emails cannot handle javascript so you canno do so.
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51171023%2fthings-not-working-properly-when-html-code-is-sent-as-email%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
- Put the button CSS ie the shadow inside the inline css of the button.
- Emails cannot handle javascript so you canno do so.
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
add a comment |
3
- Put the button CSS ie the shadow inside the inline css of the button.
- Emails cannot handle javascript so you canno do so.
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
add a comment |
3
3
3
- Put the button CSS ie the shadow inside the inline css of the button.
- Emails cannot handle javascript so you canno do so.
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
- Put the button CSS ie the shadow inside the inline css of the button.
- Emails cannot handle javascript so you canno do so.
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
answered Nov 15 '18 at 14:59
Priyom sahaPriyom saha
14412
14412
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51171023%2fthings-not-working-properly-when-html-code-is-sent-as-email%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You need to copy the css properties for the button into: email_final.html if you haven't already done so?
– Abdush Samad Miah
Jul 4 '18 at 10:12
The css properties of each element is inline so that will be of no problem. AbdushSamadMiah
– Sayok Majumder
Jul 4 '18 at 11:41
firstwbst.000webhostapp.com/android Click on this link to see the html code working properly.) So I can say that the code is ok but when attached to a mail then something is happening to make the code not work properly.
– Sayok Majumder
Jul 4 '18 at 11:45