如何使此表单工作 - How To Make This Form Work

我已经为我的网站创建了这个表单，并链接了php，但当我发送表单时，我收到了电子邮件，但输入到表单中的信息都没有显示在电子邮件中，只有字段。我是新手，所以我为代码不是最好的而道歉。

任何帮助都会很棒。

<?PHP
	
	/* Subject & Email Variables */
	
	$emailSubject = 'Photography Quote';
	$webMaster = 'ryanandelissa@seawardphotography.com';
	
	/* Gathering Data Variables*/
	
	$firstname = $_POST['firstname'];
	$lastname = $_POST['lastname'];
	$email = $_POST['email'];
	$hdyhau = $_POST['hdyhau'];
	$message = $_POST['message'];
	
	$body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name:  $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;
	$headers = "From: $email'r'n";
	$headers .= "Content-type: text/html'r'n";
	$headers = mail($webMaster, $emailSubject, $body, $headers);
	
	/* Results Rendered As HTML */
	
	$theResults = <<<EOD
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
	
	/*logo*/
img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}
/*navbar*/
#wrap{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 13px;
	font-weight: normal;
	padding-right: 48px;
	padding-bottom: 40px;
	
}
.navbar li a{
	display: block;
}
.navbar li{
	display: inline-block;
	list-style: none;
	text-align: left;
	
}
.navbar a{
	text-decoration: none;
	color: #9c9c9c;
	display: block;
	padding: 8px;
	background-color: white;
}
.navbar li ul{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	height: auto;
	
}
.navbar li:hover, a:hover{
	color: black;
}
.navbar li:hover ul{
	display: block;
}	
.navbar li ul li {
	display: block;
}
h1{
	text-align: center;
	font-family: 'Lora' serif;
	font-size: 25px;
	padding-bottom: 30px;
}
input[type=button]{
	border: 2px solid #9c9c9c;
	background-color: white;
	color: #9c9c9c;	
	display: block;
	padding: 10px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}
input[type=button]:hover{
	background-color: #9c9c9c;
	color: white;
	border: 2px #9c9c9c;
	padding: 10px;
	height: 41px;
}
/*footer*/
footer{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 10px;
	font-weight: normal;
	padding-top: 30px;
}
	
    </style>
</head>
<body>
	    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
	            
	            <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
	        
	        </div>
	         <div class="clearfix visible-sm-block"></div>
      <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>
	        
	        
            <div class="col-sm-12 col-md-12">
			<div id="wrap">
			<ul class="navbar">
	
		  <li><a href="index.html">HOME</a></li> 
		 <li><a href="">PORTFOLIO</a>
			<ul>
			   <li><a href="wedding.html">WEDDING</a></li>
			   <li><a href="Love.html">LOVE</a></li>
			   
			</ul>         
		 </li>
		 <li><a href="#">ABOUT</a>
			<ul>
			   <li><a href="AboutUs.html">US</a></li>
			</ul>         
		 </li>
		 <li><a href="#">BLOG</a>
		 	<ul>
			 	<li><a href="NewBlogPage3.html">STORIES</a></li>
			 	<li><a href="Archive.html">ARCHIVE</a></li>
		 	</ul>
		 </li>		  		
		 <li><a href="Contact.html">CONTACT</a></li>
	  </ul>			
  	</div>			
	            
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
       
       
       
<div class="col-sm-12 col-md-12">
	       
<h1>Thank you for your inquiry. We'll be in contact shortly.</h1>
	       
</div>   
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
       
<form action="Instagram.html">
<input type="button" value="HOME">
</form>	
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
         
	
	       
       
       
<div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-lg-block"></div>
            

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>
EOD;
echo($theResults);
          		
?>

/*logo*/
img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}
/*navbar*/
#wrap{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 13px;
	font-weight: normal;
	padding-right: 48px;
	padding-bottom: 40px;
	
}
.navbar li a{
	display: block;
}
.navbar li{
	display: inline-block;
	list-style: none;
	text-align: left;
	
}
.navbar a{
	text-decoration: none;
	color: #9c9c9c;
	display: block;
	padding: 8px;
	background-color: white;
}
.navbar li ul{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	height: auto;
	
}
.navbar li:hover, a:hover{
	color: black;
}
.navbar li:hover ul{
	display: block;
}	
.navbar li ul li {
	display: block;
}
/*image*/
.contact img{
	width: 70%;
}
/* form */
.form label{
	padding-top: 30px;
	padding-left: 400px;
	display: block;
	float: right;
	padding-right: 189px;
	font-family: "Lora" serif;
	font-size: 12px;
	
}
input, textarea{
	font: 1em "Lora" sans-serif;
	width:300px;
	
	
}
textarea{
	vertical-align: top;
	height: 5em;
	resize: vertical;
	
}
input[type=submit]{
	border: 2px solid #9c9c9c;
	background-color: white;
	color: #9c9c9c;	
	display: block;
	padding: 10px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}
input[type=submit]:hover{
	background-color: #9c9c9c;
	color: white;
	border: 2px #9c9c9c;
	padding: 10px;
	height: 44px;
}
/*footer*/
footer{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 10px;
	font-weight: normal;
	padding-top: 10px;
	
}

<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Contact.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
	
	img{
		padding-bottom: 30px;
	}
	
	.contact-form{
		padding: 20px;
	}
	
	label{
		font-family: "Lora" serif;
		font-weight: 300;
	}
	
    </style>
</head>
<body>
	    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
	            
	            <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
	        
	        </div>
	         <div class="clearfix visible-sm-block"></div>
      <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>
	        
	        
            <div class="col-sm-12 col-md-12">
			<div id="wrap">
			<ul class="navbar">
	
		  <li><a href="index.html">HOME</a></li> 
		 <li><a href="">PORTFOLIO</a>
			<ul>
			   <li><a href="wedding.html">WEDDING</a></li>
			   <li><a href="Love.html">LOVE</a></li>
			   
			</ul>         
		 </li>
		 <li><a href="#">ABOUT</a>
			<ul>
			   <li><a href="AboutUs.html">US</a></li>
			</ul>         
		 </li>
		 <li><a href="#">BLOG</a>
		 	<ul>
			 	<li><a href="NewBlogPage3.html">STORIES</a></li>
			 	<li><a href="Archive.html">ARCHIVE</a></li>
		 	</ul>
		 </li>		  		
		 <li><a href="Contact.html">CONTACT</a></li>
	  </ul>			
  	</div>			
	            
            </div>
             <div class="clearfix visible-sm-block"></div>
      <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>
	
	<div class="col-sm-12 col-md-12">
	        <div class="img-list">    
	            
	         
    
      <img src="Images/ContactImage.jpg" class="img-responsive" width="750px" height="auto" />
          
      
	        </div>    
            </div>
             <div class="clearfix visible-sm-block"></div>
             <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>	
       
       
       	       
	       <form method="post" action="Contact%20Form.php" enctype="text/plain">
   <div class="contact-form">
    
         
	    <div class="row"> 
		<div class="col-md-6 ">     
        <div class="form-group">
            <label for="firstname">First Name</label>
            <input type="text" class="form-control" id="firstname">
        </div>
        </div>
        <div class="col-md-6">
        <div class="form-group">
            <label for="lastname">Last Name</label>
            <input type="text" class="form-control" id="lastname">
        </div>
        </div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-md-12">
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email">
        </div>
        <div class="clearfix visible-md-block"></div>
        <div class="form-group">
            <label for="hdyhau">How Did You Hear About Us?</label>
            <input type="text" class="form-control" id="hdyhau">
        </div>
        <div class="form-group">
	        <label for="message">Message</label>
            <textarea class="form-control" rows="4" id="message"></textarea>
            </div>		
        <div class="form-group">
        <div class="col-sm-8 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="SEND!" class="btn btn-primary">
        </div>
    </div> 
	    </div>   
    </form>
	
	
            <div class="col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
            <div class="clearfix visible-sm-block"></div>
             <div class="clearfix visible-md-block"></div>
       <div class="clearfix visible-lg-block"></div>
            

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>

把它放在一个答案中，这样它就可以看起来有分辨率。；）

您的代码适用于我（大写的<?PHP和所有（似乎对我的系统没有影响））。你的代码有些奇怪（为什么要把你的邮件调用分配给$headers？），但总的来说，这似乎很好（我甚至收到了电子邮件）。我认为您有服务器配置问题。

是的，你在评论中提到的问题其实很简单。在表单中，输入元素上的name属性是"firstname"、"hdyhau"等，但在PHP中，您可以这样做：

$firstnameField = !empty($_POST['firstname']) ? $_POST['firstname'] : 'n/a';
$lastnameField = $_POST['lastname'];
$emailField = $_POST['email'];
$hdyhauField = $_POST['hdyhau'];
$messageField = $_POST['messagename'];

但随后通过它们的name值引用它们，而不是您刚刚将它们复制到的变量：

    $body = <<<EOD
<br><hr><br>
First Name: $firstname <br>
Last Name:  $lastname <br>
Email: $email <br>
How Did You Hear About Us?: $hdyhau <br>
Message: $message <br>
EOD;

只需更改将它们分配给$firstname而不是$firstnameField或将$body分配中的变量更改为$firstnameField，等等。

你可以通过在你的电子邮件之前做这样的事情来验证表格中是否包含了某些内容：

$firstname = !empty($_POST['firstname']) ? $_POST['firstname'] : 'n/a';
...
$message = !empty($_POST['message']) ? $_POST['message'] : 'n/a';

只需确保您在$_POST中访问的值与您在表单的name=""属性中使用的值匹配即可。