-5
私は最初のContactフォームを作成しようとしています。私は既にHTML &のCSS部分を行っています。たぶん、HTMLタグにいくつかのエラーがあります。HTMLフォームを作成する
HTML/CSSがうまく見えるようになったので、投稿が自分のメールに送信され、ページに感謝のメッセージが表示されたり、感謝のページにリダイレクトされたりします。
フォームを安全に機能させるためのコードを手助けできますか？
また、私は迷惑メールの送信を避けるためにフォームにcaptchaを追加したいと思います。
形式のライブリンク - フォームの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 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 = "[email protected]";
$subject = "Contact Form";
$mailheader = "From: $your-email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!";
?>
ため
<form id="contact-form">
を変えたが、私はこのURLに次のエラーを取得する - http://wishamemory.com/makeawish/mail.php
このページ動作していません
wishamemory.comは現在このリクエストを処理できません。 HTTPエラー500
どこが間違っていますか？あなたは<form>タグにaction atributeが欠落している
をmail.phpを追加する必要が
<form id="something" action="link-to-php file">次のようにあなたにPHPの一部が必要になりますフォーム、これまでに何を試しましたか？ – MCMXCIIこれを自分で解決するために試したことが何であったかを知ることは素晴らしいことです。質問を投稿する前にこれを研究したことがわかっているでしょう。 試してみると、あなたも学びます。誰かがあなたに答え/解決策を与えたら、それは何のためでもないでしょう。私は/あなたの未来のためにこれを言います。 投稿が失敗した可能性のあるものを含むように編集できます。それでもあなたの努力を示しています。覚えておいて、私たちは常に喜んで助けます。 –
あなたにはこのような答えがたくさんあることを知っていますか？また、このトピックについてのチュートリアルもありますか？これまでに何か試しましたか？ –