即时通讯提交表单存在问题,我已经标记了表单,注释以更好地阅读,也发布了php文件,看看你们是否可以帮我找出我做错了什么。当我提交表格时,我只得到: 名称: 电子邮件: 信息: 并且它不会显示输入的内容,感谢您的帮助。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<!--
Zoom Template
http://www.templatemo.com/preview/templatemo_414_zoom
-->
<title>Universal Magazine</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo_main.css">
</head>
<body>
<div id="main-wrapper">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center templatemo-logo margin-top-20">
<h1 class="templatemo-site-title">
<a href="#">Zoom Template</a>
</h1>
<h3 class="templatemo-site-title">
by <a href="#"><span class="blue">template</span><span class="green">mo</span></a>
</h3>
</div>
<div class="image-section">
<div class="image-container">
<img src="images/zoom-bg-1.jpg" id="menu-img" class="main-img inactive" alt="Zoom HTML5 Template by templatemo.com">
<img src="images/zoom-bg-2.jpg" id="products-img" class="inactive" alt="Product">
<img src="images/zoom-bg-3.jpg" id="services-img" class="inactive" alt="Services">
<img src="images/zoom-bg-4.jpg" id="about-img" class="inactive" alt="About">
<img src="images/zoom-bg-5.jpg" id="contact-img" class="inactive" alt="Contact">
<img src="images/zoom-bg-6.jpg" id="company-intro-img" class="main-img inactive" alt="Company Intro">
<img src="images/zoom-bg-7.jpg" id="testimonials-img" class="main-img inactive" alt="Testimonials">
</div>
</div>
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2 col-lg-offset-2 templatemo-content-wrapper">
<div class="templatemo-content">
<section id="menu-section" class="active">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#products" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-cubes"></i>
<h2>Productos</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#services" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-laptop"></i>
<h2>Servicios</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#about" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-users"></i>
<h2>About</h2>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 margin-bottom-20">
<a href="#contact" class="change-section">
<div class="black-bg btn-menu">
<i class="fa fa-envelope"></i>
<h2>Contacto</h2>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 margin-bottom-20">
<a href="#company-intro" class="change-section">
<div class="black-bg btn-menu">
<h2>Acerca de la Compania</h2>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 margin-bottom-20">
<a href="#testimonials" class="change-section">
<div class="black-bg btn-menu">
<h2>Ejemplos</h2>
</div>
</a>
</div>
</div>
</section><!-- /.menu-section -->
<section id="products-section" class="inactive">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 margin-bottom-20">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2>WEB DESIGN</h2>
<p><a rel="nofollow" href="http://universalmagazine.net/contacto.html">Universal Magazine</a><br>
Bienvenidos a la pagina portafolio de Universal Magazine. Si les gusta esta presentacion y quiere tener una pagina web parecida a esta, <a class="btn btn-link change-section" href="#contact" role="button">Contactenos!</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2>RESPONSIVE</h2>
<p><span class="green">Zoom template is a mobile-ready layout supporting all kinds of mobile devices or different screen sizes.</span> Integer posuere quam a orci tempor, ut eleifend est vulputate. Nullam vitae lectus dui. Donec vulputate ac tortor id convallis. Sed nisi mauris, laoreet vitae lacus at, viverra viverra neque. Curabitur nec aliquam lacus, nec molestie erat.</p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.product-section -->
<section id="services-section" class="inactive">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-12 col-lg-12 black-bg">
<h2>OUR SERVICES</h2>
<p>Aenean quis semper metus. <a href="#">Maecenas</a> adipiscing, leo a facilisis tempor, mi quam feugiat eros, ullamcorper porttitor elit turpis ac risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non sem a leo mattis dapibus. Duis vel ornare arcu. Quisque at malesuada tortor.</p>
<p>Quisque non tempus lacus, non placerat arcu. Donec nibh ipsum, pharetra nec pellentesque at, mattis ut lorem. Fusce dapibus tristique neque, eget ultricies lorem tincidunt vitae. Aliquam erat volutpat. Integer vulputate ultricies nisl, sed vehicula justo accumsan non.</p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.services-section -->
<section id="about-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">About Us</h2>
<div class="col-sm-6 col-md-6">
<p>Cras sed venenatis nunc. Nunc porta blandit arcu ac fringilla. Quisque feugiat fringilla vulputate. Vestibulum tempus ligula ac leo scelerisque, nec bibendum neque molestie. Suspendisse potenti. Donec aliquet ligula quis convallis placerat. Sed mollis rhoncus varius. Donec non adipiscing mi, nec venenatis lorem. <a href="#">Vivamus</a> nec convallis ante, in aliquam massa.</p>
</div>
<div class="col-sm-6 col-md-6">
<p>Sed ac risus sit amet nisl tempus egestas. Sed a fermentum mauris, nec ultricies lorem. Maecenas auctor a augue sodales aliquam. Vestibulum imperdiet quam vel felis dignissim, sed iaculis nulla malesuada. Vivamus non rhoncus neque, sed elementum lorem. Aenean non leo mauris. Donec at suscipit lectus. Donec justo ipsum, scelerisque eu nisl in, sollicitudin posuere justo.</p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.about-section -->
<section id="contact-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">Contact Us</h2>
<div class="col-sm-12 col-md-12">
<p>Donec at felis nec orci dapibus consectetur. <a href="#">Integer</a> hendrerit aliquet velit, bibendum accumsan mi. Integer volutpat in velit at tincidunt. Proin varius magna nec risus accumsan blandit. Morbi eget vestibulum nisi, vitae luctus elit. In in nulla a elit rutrum pellentesque.</p>
</div>
<div class="col-sm-6 col-md-6">
<div id="map-canvas"></div>
<p>456 Thamine Street, Digital Estate, Yangon 10630, Myanmar</p>
</div>
<!--this is where the form is-->
<div class="col-sm-6 col-md-6 margin-bottom-20">
<form action="mailer.php" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" placeholder="Name" />
</div>
<div class="form-group">
<label for="contact_email">Email</label>
<input type="text" id="email" class="form-control" placeholder="Email Address" />
</div>
<div class="form-group">
<label for="contact_message">Message</label>
<textarea id="message" class="form-control" rows="7" placeholder="Write a message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.contact-section -->
<section id="company-intro-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">Company Intro</h2>
<div class="col-sm-12 col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus quam, eleifend eget mattis vel, mollis eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque pulvinar ut lorem sit amet feugiat. Nullam cursus ante lectus, sed vehicula nisi consectetur ut. Fusce venenatis porta lectus at luctus. Nullam et sapien purus. Fusce congue non neque eu malesuada. Quisque dictum cursus pretium.</p>
<p><a href="#">Donec cursus</a> justo vel metus suscipit, sit amet gravida justo pulvinar. Sed non luctus est, vel viverra nisi. Suspendisse neque ipsum, porta vitae dui eget, feugiat pretium tortor. Praesent at dolor semper, egestas elit sit amet, consectetur eros. Praesent rutrum tempor mi, quis aliquet tellus bibendum eget. Etiam et suscipit nunc. Nulla faucibus hendrerit augue. Proin faucibus sem ligula, at egestas elit ultricies non.</p>
<p>Maecenas ac massa erat. Quisque ac volutpat odio, quis viverra tortor. Ut interdum ornare odio, ac iaculis est lacinia nec. Cras in pulvinar urna. Sed molestie, arcu ac auctor rhoncus, nisl justo dictum leo, eu interdum est nibh eget neque. Donec sed est nec velit fringilla lobortis. Aliquam eu elit ut arcu auctor dictum. Nulla vel lobortis enim. In hac habitasse platea dictumst. Maecenas ultricies egestas dui, eu dignissim justo semper non. </p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.company-intor-section -->
<section id="testimonials-section" class="inactive">
<div class="row">
<div class="black-bg col-sm-12 col-md-12 col-lg-12">
<h2 class="text-center">Testimonials and Awards</h2>
<div class="col-sm-12 col-md-12">
<p>Maecenas euismod viverra enim, sed sodales nunc sagittis vel. Nullam placerat dignissim turpis, nec auctor leo malesuada vitae. Nunc a arcu fringilla, rutrum erat blandit, sollicitudin ipsum. Vivamus vitae cursus nibh. Etiam libero sapien, dictum sed dignissim a, lobortis quis sem. Morbi placerat, est eu vehicula dignissim, magna lacus tristique turpis, ut sollicitudin ante nulla at sem. Fusce neque nulla, fermentum at turpis elementum, venenatis viverra felis. Donec eget ipsum non dolor pulvinar ultricies vel id risus. Etiam tincidunt aliquet massa, sodales gravida magna posuere sit amet. Nullam tempus nec urna iaculis lacinia.</p>
<p>Sed adipiscing ultricies diam ut blandit. <a href="#">Nullam lobortis</a> egestas velit, quis vulputate leo feugiat a. Etiam venenatis odio quis pharetra pulvinar. Maecenas nec tempus lectus. Ut quam nisl, tempus eu rutrum at, volutpat at tortor. Donec dapibus gravida elit. Sed venenatis malesuada elementum. Donec vestibulum odio metus, vel tempor magna luctus et. Suspendisse porttitor, justo eget interdum faucibus, turpis nibh lacinia urna, vitae porta erat odio eu est. Duis laoreet dui id mi ultricies, ut dictum elit aliquet. Vivamus et libero enim. Curabitur adipiscing quis turpis sed consequat. Morbi ut arcu at sapien tempus lobortis. Etiam congue, enim eget condimentum consequat, mauris dolor tincidunt eros, vitae suscipit justo turpis sed turpis. Etiam adipiscing et orci ac condimentum.</p>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
<a href="#menu" class="change-section">
<div class="black-bg btn-menu">
<h2>Back to menu</h2>
</div>
</a>
</div>
</div>
</section><!-- /.company-intor-section -->
</div><!-- /.templatemo-content -->
</div><!-- /.templatemo-content-wrapper -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer">
<p class="footer-text">Copyright © 2084 Your Company Name</p>
</div><!-- /.footer -->
</div>
</div><!-- /#main-wrapper -->
<div id="preloader">
<div id="status"> </div>
</div><!-- /#preloader -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/templatemo_script.js"></script>
</body>
</html>
这是php文件:
<?php
/* Subject and Email */
$emailSubject = 'New Message Email';
$webMaster = 'luisconstante@yahoo.com';
/* Gathering Data Variables*/
$emailField = $_POST['email'];
$nameField = $_POST['name'];
$messageField = $_POST['message'];
$body = <<<EOD
<br><hr><br>
Name: $nameField <br>
Email: $emailField <br>
Message: $messageField <br>
EOD;
$headers = "From: $emailField\r\n";
$headers .= "Content-type: text/html\r\n";
$success = mail($webMaster,$emailSubject,$body,$headers);
/* Results rendered as HTML */
$theResults = <<<EOD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Mailer</title>
</head>
<body>
<p>hello</p>
</body>
</html>
EOD;
echo "$theResults";
?>
答案 0 :(得分:4)
表单中的所有输入都缺少name
属性。您有id = xxx
但没有name = xxx
。 POST发送name
而非id
。因此,您需要name="name"
和name="email"
等
答案 1 :(得分:0)
在表单中,您没有使用name
属性表单元素尝试将此代码替换为您的表单代码
<form action="mailer.php" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Name" />
</div>
<div class="form-group">
<label for="contact_email">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Email Address" />
</div>
<div class="form-group">
<label for="contact_message">Message</label>
<textarea name="message" id="message" class="form-control" rows="7" placeholder="Write a message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
进一步阅读http://www.w3schools.com/tags/att_input_name.asp&amp; Difference between id and name attributes in HTML