HTMLでメールにフォームを送信する方法

メール送信の基本的な設定: メール送信には、<form>要素と<input>要素を使用します。まず、以下のようなHTMLコードを作成します。

<form action="mailto:受信者のメールアドレス" method="post" enctype="text/plain">
  <input type="text" name="subject" placeholder="件名"><br>
  <textarea name="body" placeholder="メッセージ"></textarea><br>
  <input type="submit" value="送信">
</form>

上記のコードでは、action属性に受信者のメールアドレスを指定し、method属性に"post"を指定しています。enctype属性は、データのエンコーディング形式を指定します。

PHPを使用してメール送信する: 上記の方法では、ユーザーのメールクライアントが正しく設定されている必要があります。代わりに、PHPを使用してメールを送信する方法もあります。以下に例を示します。

まず、以下のようなHTMLコードを作成します。

<form action="send_email.php" method="post">
  <input type="text" name="subject" placeholder="件名"><br>
  <textarea name="body" placeholder="メッセージ"></textarea><br>
  <input type="submit" value="送信">
</form>

次に、send_email.phpという名前のPHPスクリプトを作成します。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $to = "受信者のメールアドレス";
  $subject = $_POST["subject"];
  $message = $_POST["body"];
  $headers = "From: 送信者のメールアドレス";
  mail($to, $subject, $message, $headers);
}
?>

JavaScriptを使用してメール送信する: JavaScriptを使用してメールを送信する方法もあります。ただし、これにはサーバーサイドの処理が必要です。以下に例を示します。

まず、以下のようなHTMLコードを作成します。

<form>
  <input type="text" id="subject" placeholder="件名"><br>
  <textarea id="body" placeholder="メッセージ"></textarea><br>
  <input type="button" value="送信" onclick="sendEmail()">
</form>

次に、JavaScriptのsendEmail()関数を作成します。

function sendEmail() {
  var subject = document.getElementById("subject").value;
  var body = document.getElementById("body").value;
  // ここでサーバーサイドの処理を実行する
}

JavaScriptのsendEmail()関数内で、サーバーサイドの処理を実行する必要があります。これにはAjaxリクエストやFetch APIを使用することができます。

これらはいくつかの基本的な方法ですが、実際の実装は環境や要件に応じて異なる場合があります。セキュリティに留意しながら、適切な方法を選択してください。