我的联系表格不起作用html css

时间:2016-05-01 12:54:23

标签: html css forms contact

有人可以解释为什么我的联系表格不起作用吗?我遵循了一个教程,在教程中它实际上最终工作,我无法理解这一点。谢谢你提前订好了。

HTML

<!doctype html>
<html>
<link href="contactcss.css" rel="stylesheet" type="text/css">
<body>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Contact</title>

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

</head>

<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>




<nav>
            <ul>
                <li><a href="projects.html" class="transition">PROJECTS</a>       </li>
                <li><a href="About.html" class="transition">ABOUT</a></li>
                <li><a href="Contact.html" class="transition">CONTACT</a></li>
            </ul>
        </nav>

<div id="wrap">
<div class="box1">
<form class="form">
<p class="name">
  <input type="text" name="name" id="name" />
  <label for="name">Name</label>
</p>
<p class="email">
  <input type="text" name="email" id="email" />
  <label for="email">E-mail</label>
</p>

<p class="text">
  <textarea name="text" placeholder="Your message here"></textarea>
</p>
<p class="submit">
  <input type="submit" value="send" />
</p>
</form>
</div> 
</div>
<footer>copyright 2016 matic toni</footer> <!--wrap-->
</body>
</html>

CSS

@charset "utf-8";
.logo {
padding-top: 3px;
padding-bottom: 5px;
text-align: center;
}
ul {
padding: 0;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;

}



li {
display: inline;
color: #000000;


}
a {
text-decoration: none;
color: black;
}

a:hover {
color: lightgray;
}
a:active {
color: black;
}

body {
margin: 0;
background-color: #F9F9F9;
font-family: Proxima;
}
#wrap {
width: 600px;
margin: 0 auto;
padding-top: 2%;
}

.box1 {
padding: 25px;
background-color: #F9F9F9;
border-radius: 2%;
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
border: 3px solid black;
}

.form {
margin: auto; 
}

input, textarea {  
width: 200px;
padding: 9px;
outline: 0;        
background-color: #FFFFFF;
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
border: 1px solid black;         
}

textarea {   
width: 530px; max-width: 530px; 
height: 150px; 
line-height: 150%;
font-size: 14px;
color: #D7D7D7;
} 

input:hover, textarea:hover,  
input:focus, textarea:focus {   
border-color: #C9C9C9;    
}

.text textarea:focus {
color: #000;
}

.form label {   
margin-left: 10px;   
color: #999999;   
}  

.submit input {  
width: 100px;  
padding: 9px 15px;    
font-size: 18px;  
color: #FFFFFF;
background-color: black;
border: 0;  
border-radius: 2px;
}

.submit input:hover {
cursor: pointer;
background-color: lightgray;
}

input {
font-family: Proxima;
}

@font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);

} 
body {
background-color: #F6F6F6; 
}

footer {
font-family:"Proxima";
clear: both;
 color: black;
 font-size: 100%;
 margin-top: 0%;
 margin-right: 5%;
 margin-left: 5%;
 text-align: center;
 padding-top: 2%;

}

2 个答案:

答案 0 :(得分:1)

如果您想在有人输入信息时收到电子邮件,您可以这样做:

PHP:

<?php
$to = "youremail@youremail.com"; 
$name = $_POST['name'];
$email = $_POST['email'];
$text = $_POST['text'];

$headers = "From: " .  $email;
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";


if(isset($_POST['submit'])){
    $subject  = "New email from your website";

    $message   = "Name: " . $name;
    $message  .= "Email: " . $email;
    $message  .= "Message: " . $text;

    mail($to,$subject,$message,$headers);   
    echo "Your mail has been sent.";
}


?>

HTML:

<form class="form" method="POST" action="">
<p class="name">
  <input type="text" name="name" id="name" />
  <label for="name">Name</label>
</p>
<p class="email">
  <input type="text" name="email" id="email" />
  <label for="email">E-mail</label>
</p>

<p class="text">
  <textarea name="text" placeholder="Your message here"></textarea>
</p>
<p class="submit">
  <input type="submit" value="send" />
</p>
</form>

答案 1 :(得分:0)

<form class="form" action="form.php" method="post" >

<p class="name">
  <input type="text" name="name" id="name" />
  <label for="name">Name</label>
</p>
<p class="email">
  <input type="text" name="email" id="email" />
  <label for="email">E-mail</label>
</p>

<p class="text">
  <textarea name="text" placeholder="Your message here"></textarea>
</p>
<p class="submit">
  <input type="submit" value="send" />
</p>
</form>

PHP

<?php
$to = "info@matictoni.com"; 
$name = $_POST['name'];
$email = $_POST['email'];
$text = $_POST['text'];

$headers = "From: " .  $email;
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";


if(isset($_POST['submit'])){
$subject  = "New email from your website";

$message   = "Name: " . $name;
$message  .= "Email: " . $email;
$message  .= "Message: " . $text;

mail($to,$subject,$message,$headers);   
echo "Your mail has been sent.";
}


?>