我正在努力制作我的第一张联系表格。我已经完成了HTML＆amp; CSS部分。也许HTML标记中存在一些错误。
既然我的HTML / CSS看起来很好，我需要让它工作，以便将提交的内容发送到我的电子邮件，页面会显示一条感谢信息或重定向到感谢页面。
有人可以帮助我使用代码为表单创建安全功能以使其正常工作吗？
此外，我想在表单中添加验证码以避免垃圾邮件提交。
表格的实时链接 - http://wishamemory.com/makeawish/index.html
表单的HTML代码是：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Quick Minimal Contact Form</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<form id="contact-form">
<p>WISH A MEMORY!</p>
<p>I
<label for="your-wish">wish</label> for
<input type="text" name="your-wish" id="wish" minlength="3" placeholder="(describe your wish here)" required></p>
<p>
<label for="your-location">in</label>
<input type="text" name="your-location" id="location" minlength="3" placeholder="(location in Goa only)" required>
<label for="your-date">on</label>
<input type="text" name="your-date" id="date" minlength="3" placeholder="(dates)" required></p>
<p>***********</p>
<p>
<label for="your-credits">Is this wish for yourself or dedicated to someone else?</label>
<input type="text" name="your-credits" id="credits" minlength="3" placeholder="Who is the lucky one?" required></p>
<p>
<label for="your-budget">Preferred budget to make this wish a reality:</label>
<input type="text" name="your-budget" id="budget" minlength="3" placeholder="(amount in INR)" required></p>
<p>
<label for="your-maxbudget">Maximum you can spend to make the experience even more memorable:</label>
<input type="text" name="your-maxbudget" id="maxbudget" minlength="3" placeholder="(let's make it special)" required></p>
<p>
<label for="your-reason">Why do you think this wish deserves becoming a memory?</label>
<textarea name="your-reason" id="your-reason" placeholder="(Not all wishes come true. Share some background and the importance of this wish)" class="expanding" required></textarea>
</p>
<p>Personal details</p>
<p>
<label for="your-name">Name</label>
<input type="text" name="your-name" id="name" minlength="3" placeholder="(full name)" required></p>
<p>
<label for="email">Email address</label>
<input type="email" name="your-email" id="email" placeholder="(your email address)" required>
</p>
<p>
<label for="phone">Mobile number</label>
<input type="text" name="your-phone" id="phone" placeholder="(mobile number)" required>
</p>
<p>
<button type="submit">
<svg version="1.1" class="send-icn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="36px" viewBox="0 0 100 36" enable-background="new 0 0 100 36" xml:space="preserve">
<path d="M100,0L100,0 M23.8,7.1L100,0L40.9,36l-4.7-7.5L22,34.8l-4-11L0,30.5L16.4,8.7l5.4,15L23,7L23.8,7.1z M16.8,20.4l-1.5-4.3
l-5.1,6.7L16.8,20.4z M34.4,25.4l-8.1-13.1L25,29.6L34.4,25.4z M35.2,13.2l8.1,13.1L70,9.9L35.2,13.2z" />
</svg>
<small>send</small>
</button>
</p>
</form>
<small class='website'>Powered by <a href='http://wishamemory.com/' target='_blank'>wishamemory.com</a></small>
</body>
</html>
我尝试按照以下方式制作mail.php进行测试。并在我的HTML文件中更改
<form id="contact-form">
这个
<form action="mail.php" method="POST">
mail.php文件
<?php
$your-wish = $_POST['your-wish'];
$your-location = $_POST['your-location'];
$your-date = $_POST['your-date'];
$formcontent="From: $your-name \n Message: $wish";
$recipient = "arminbaig@gmail.com";
$subject = "Contact Form";
$mailheader = "From: $your-email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
但是我在这个网址上遇到以下错误 - http://wishamemory.com/makeawish/mail.php
此页面无效
wishamemory.com目前无法处理此请求。 HTTP ERROR 500
我哪里错了？
答案 0 :(得分：0)
您在drive_write()代码中缺少action个属性
像这样<form>
你必须在这个动作属性中添加mail.php，
<form id="something" action="link-to-php file">答案 1 :(得分：-1)
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin:0px;
padding:0px;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f1f1f1;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>