我终于弄清楚了如何创建向下滑动的web表单,但是我在哪里以及如何设置我的电子邮件地址。所以,当有人给我发信息时,我也会把同样的信息发送到我的电子邮件中。我想这是一个基本问题,但我就是找不到答案。
这里是JSFiddle的链接:http://jsfiddle.net/8S82T/101/
<!doctype html>
<html>
<head>
<title>Jquery test</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="button" class="title">
<h6>Contact</h6>
</div>
<div id="dropbox">
<header class="title">
<h6>Whats up?</h6>
</header>
<div class="contact-form">
<form action="lulzy.php" action="post">
<h6><img src="img/person.png" alt="" /> Name</h6>
<input type="text" placeholder="Please enter your full name here" required />
<h6><img src="img/email.png" alt="" /> E-mail</h6>
<input type="email" placeholder="Please enter your e-mail address" required/>
<h6><img src="img/message.png" alt="" /> Message</h6>
<textarea placeholder="Type your message..." required/></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<script src="dropbox.js"></script>
</body>
</html>
您已经将动作lulzy.php
添加到表单
您需要将以下代码添加到该文件lulzy.php
<?php
$name= $_REQUEST['name'] ;
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;
mail( "yourname@example.com", "Feedback Form Results",
$message, "From: $email" );
header( "Location: http://www.example.com/thankyou.html" );
?>
这是一个很好的教程
它涉及到服务器端语言PHP的使用。
这个脚本还特别使用了一些验证来确保发送给你的人没有向你发送垃圾信息
您还需要将name
属性添加到输入中。它们应该是name
, email
和comments
。
<?php
if(isset($_POST['email'])) {
// CHANGE THE TWO LINES BELOW
$email_to = "you@yourdomain.com"; // put your email here
$email_subject = "Website HTML form submissions"; // put the subject here
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$name = $_POST['name']; // required
$email_from = $_POST['email']; // required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+'.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$name)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.'n'n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($name)."'n";
$email_message .= "Email: ".clean_string($email_from)."'n
$email_message .= "Comments: ".clean_string($comments)."'n";
// create email headers
$headers = 'From: '.$email_from."'r'n".
'Reply-To: '.$email_from."'r'n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- place your own success html here -->
<?php
}
die();
?>
OK,我已经添加了名称和id到您的表单,并创建了一个javascript函数validate()(我有在我的头)-通过给元素id,它然后启用id的geelement如果没有输入所有字段,onsubmit返回false。html中的"email"元素校正了正确的电子邮件格式。php是对垃圾邮件的双重检查。希望对你有帮助。
<div class="contact-form">
<form onsubmit="return Validate();" action="lulzy.php" action="post" name="contact">
<h6><img src="img/person.png" alt="" /> Name</h6>
<input type="text" placeholder="Please enter your full name here" name="fname" id="fname" />
<h6><img src="img/email.png" alt="" /> E-mail</h6>
<input type="email" placeholder="Please enter your e-mail address" name="email" id="email"/>
<h6><img src="img/message.png" alt="" /> Message</h6>
<textarea placeholder="Type your message..." name="message" id="message"/></textarea>
<input type="submit" value="Submit">
</form>
</div>
<script type="text/javascript">
function Validate()
{
// create array containing textbox elements
var inputs = [document.getElementById('fname'), document.getElementById('email'), document.getElementById('message')];
var error;
for(var i = 0; i<inputs.length; i++)
// loop through each element to see if value is empty
{
if(inputs[i].value == '')
{
error = 'Please complete all fields.';
alert(error);
return false;
}
}
}
include ("contact.html");
function spamcheck($field)
{
//filter_var() sanitizes the e-mail
//address using FILTER_SANITIZE_EMAIL
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
//filter_var() validates the e-mail
//address using FILTER_VALIDATE_EMAIL
if(filter_var($field, FILTER_VALIDATE_EMAIL))
{
return TRUE;
}
else
{
return FALSE;
}
}
if (isset($_POST['submit'])) {
//process form data
//check if the email address is invalid
$mailcheck = spamcheck($_POST['email']);
if ($mailcheck==TRUE){
//send email
$email=$_POST['email'];
$fname=$_POST['fname'];
$message = $_POST['message'] ;
$subject="website contact";
mail("your email address", $subject ,$message , "From: $email");
echo '<script type="text/javascript"> alert("Your form has been submitted.")
http://jsfiddle.net/yvytty/zLfgL/1/(不含php)
非常简单的解决方案,但也非常业余将改变您的表单的action
。你可以这样做:
action="mailto:yourmail@domain;com"
示例:http://jsfiddle.net/ywah9/
一个更好的解决方案是创建一个提交页面,使用PHP
处理表单。迷你的例子:
$body = 'New email submitted:' . $_POST['email'];
mail( 'yourmail@domain.ext' , 'Contact form website' , $body )
上面的例子是非常基本的,只是给你一个良好的开端!