美好的一天，我的网站出现问题，在联系页面上填写详细信息并提交表格进行处理并将捕获的数据发送到指定的电子邮件，但是当页面加载时显示页面HTML标签。
This is what shows when the form has submitted
在电子邮件方面，我不会将电子邮件视为HTML样式，而是正常
This is what is received as email
下面是我的PHP脚本，它处理表单数据并发送电子邮件
<?php
include 'inc/config.php';
$msg = "";
if(isset($_POST['submit']))
{
$name = addslashes($_POST['name']);
$email = addslashes($_POST['email']);
$subject = addslashes($_POST['subject']);
$message = addslashes($_POST['message']);
if($name != "" && $email != "" && $subject != "" && $message != "")
{
require 'inc/mailer/PHPMailerAutoload.php';
header('Content-Type: application/json');
$mail = new PHPMailer;
$mail->setFrom('no-reply@kazforextraders.com', 'Kaz Forex Traders');
$mail->addAddress($email);
$mail->addReplyTo('no-reply@kazforextraders.com', 'No Reply');
$mail->isHTML(true);
$mail->Subject = $subject;
$mail->Body = file_get_contents('inc/contact.php');
$mail->Body = str_replace('$name', $name, $mail->Body);
$mail->Body = str_replace('$email', $email, $mail->Body);
$mail->Body = str_replace('$subject', $subject, $mail->Body);
$mail->Body = str_replace('$message', $message, $mail->Body);
if(!$mail->send()) {
$msg = 'Something Went Wrong. Plese Try Again! <br>Mailer Error: '.$mail->ErrorInfo.'';
} else {
$msg = 'Message Sent Successfully!';
}
}
else
{
$msg = 'Please Fill out all fields!';
}
}
?>
下面是“inc / contact.php”文件。它是应该发送的文件（样式HTML），但我将其作为简单文本接收。
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Kaz Forex Traders</title>
<meta name="author" content="Eminential Designs">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="https://www.kazforextraders.com/css/base.css">
<link rel="stylesheet" href="https://www.kazforextraders.com/css/vendor.css">
<link rel="stylesheet" href="https://www.kazforextraders.com/css/main.css">
<!-- script
================================================== -->
<script src="https://www.kazforextraders.com/js/modernizr.js"></script>
<script src="https://www.kazforextraders.com/js/pace.min.js"></script>
<style>
.section-intro .with-bottom-line::after {
display: block;
background-color: white;
width: 120px;
height: 3px;
content: '\0020';
position: absolute;
left: 50%;
bottom: 0;
margin-left: -60px;
}
.section-intro .with-bottom-line:hover::after {
display: block;
background-color: white;
width: 150px;
height: 3px;
content: '\0020';
position: absolute;
left: 50%;
bottom: 0;
margin-left: -70px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
</style>
<!-- favicons
================================================== -->
<link rel="icon" type="image/png" href="https://www.kazforextraders.com/favicon.png">
</head>
<body id="top">
<!-- main content wrap
================================================== -->
<div id="main-content-wrap">
<!-- main content wrap
================================================== -->
<section id="intro">
<!-- <div class="shadow-overlay"></div> -->
<div class="row intro-content">
<div class="col-twelve">
<h3 class="animate-intro" id="message"></h3>
<div class="col-1-4 tab-full mob-full">
<p></p>
</div>
<div class="col-1-2 tab-full mob-full" style="padding-bottom: 13.5rem">
<img src="https://www.kazforextraders.com/images/logo.png" alt="" class="animate-intro" style="max-width: 250px;">
</div>
</div> <!-- /twelve -->
</div> <!-- /row -->
</section> <!-- /intro -->
<section id="about">
<div class="row section-intro group animate-this">
<div class="col-twelve with-bottom-line">
<h2 class="">New Message</h2>
</div>
<p class="lead" style="text-align: left;">From: $name<br></p>
<p class="lead" style="text-align: left">Email: $email</p>
<p class="lead" style="text-align: left">Subject: $subject</p>
<p class="lead" style="text-align: left">Message: $message</p>
<p class="lead" style="text-align: left">This is an automated message, do not reply to it.</p>
<p class="lead" style="text-align: left">Regards,<br>Kaz Forex Traders</p>
</div>
</section>
</div> <!-- /main-content-wrap -->
<!-- footer
================================================== -->
<footer id="main-footer">
<div class="footer-bottom" style="padding-top: 3rem ">
<div class="copyright">
<span>© Copyright Kaz Forex Traders 2018.</span>
<span>Developed by <a href="#">Eminential Designs</a></span>
</div>
</div>
</footer>
<!-- Java Script
================================================== -->
<script src="https://www.kazforextraders.com/js/jquery-2.1.3.min.js"></script>
<script src="https://www.kazforextraders.com/js/plugins.js"></script>
<script src="https://www.kazforextraders.com/js/main.js"></script>
</body>
</html>
请让我知道我能做些什么来解决这个问题，是否有任何感谢帮助。
答案 0 :(得分：1)
对于与收到的电子邮件的样式相关的问题，大多数电子邮件客户端（包括Gmail），我相信不会在<head>部分中关注css的链接，他们更喜欢的是电子邮件的内联样式。同样，JavaScript将被剥离，因此您不能依赖JS来设置或格式化您的HTML。一般来说，当用HTML发送电子邮件时，支持它作为现代网络浏览器的技术就不存在了。
尝试查看this Q＆amp; A中的一些提示和技巧，以获取有助于完成所需设计的一些建议。
至于为什么在表单提交时您会在HTML中看到您的页面，这通常是因为Content-Type标题设置了浏览器应该如何解释此响应。尝试检查chrome中调试工具中的网络选项卡，并在提交表单后查看请求，以查看服务器返回的响应标头。另外，我在你的php脚本中看到你将标题Content-Type设置为json，如果这个php脚本设置了那个标题，然后在同一个请求中包含你的HTML，那么它可能就是罪魁祸首。
Here是一个链接，它详细解释了网络标签以及如何使用它。另外，请查看设置以保留日志，以便在页面刷新或表单提交之间保持不变。