如何使这个表格工作

时间:2016-03-23 19:13:39

标签: php html css

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

任何帮助都会很棒。

/*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>          
 6 articles, plus 2 pieces of content labeled “expert answers”

1 个答案:

答案 0 :(得分:1)

将其放入答案中,使其看起来具有分辨率。 ;)

  

您的代码适用于我(大写<?PHP和所有代码(似乎对我的系统没有任何影响))。你的代码有些奇怪(为什么要把你的邮件调用分配到$ he​​ader?),但一般来说看起来很好(我甚至收到了电子邮件)。我认为你有服务器配置问题。

是的,实际上,您在评论中提到的问题非常简单。在您的表单中,输入元素上的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=""属性中使用的值相匹配。