HTMLでのお問い合わせフォームの作成

まず初めに、contact_form.htmlとcontact.phpという2つのファイルを作成します。最初のファイルはHTMLのコードが含まれ、2つ目のファイルにはフォームからデータを送る処理が記述されています。

HTML

下記がコンタクトフォームのHTMLです。

<form action="contact.php" method="post">
    名前
    <input type="text" name="cf_name" />
    メールアドレス
    <input type="text" name="cf_email" />
    メッセージ
    <textarea name="cf_message"></textarea>
    <input type="submit" value="送信" />
    <input type="reset" value="クリア" />
</form>

ブラウザではこのように見えます。
html-contact-form-layout
早速、次の2点について見ていきましょう。

<form>タグには、これら2つの属性が含まれています:

action=”contact.php” – action属性では、フォームデータの送信先URLを指定します。
method=”post” – method属性では、フォームデータの送信方法しています。getまたはpostのいずれかで指定します。

<input>や<textarea>タグには、それを特定することができるようにname属性を追加する必要があります。この属性は、サーバーにデータが送信された後、何についてのデータなのかを特定するために使用されます。
そして、送信やクリアボタンとして使用される2つのinput要素ですが、1つはtype=”submit”、2つ目は、type=”reset”を割り当てます。

以上がフォームを作成する上での基本となります。

PHP

では次に、フォームからデータを実際に取得し、メッセージに構成し、メールアドレスに送信するcontact.phpファイルについて取り上げます。このリンクからcontact.phpファイルをダウンロードできます。下記に主要なセクションにコメントがついたコードファイルがあります。

こちらのフィールド(cf_name、cf_email、cf_message)からPHP変数($cf_message、$field_email、$field_message)まで送信されたデータを割り当てます。

$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

$mail_toは、サイトオーナーのメールアドレスを記述します。複数のメールアドレスを明記する場合には、コンマを用いて、それぞれ分けて記述します。 (例:mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.com';

これはコンタクトフォームから受信するメールのタイトルです。

$subject = 'Message from a site visitor ' . $field_name;

メッセージの本文を構成します。

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

メッセージのヘッダーを構成します。

$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

mail() 関数を定義し、変数$mail_statusに割り当てます。これはメールが送られたか送られなかったかどうかを確認するために、下記のようにして使用されます。

$mail_status = mail($mail_to, $subject, $body_message, $headers);

mail()関数が正しく実行されれば、次に下記のコードを実行します。

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		// メッセージを書きます。
		alert('送信を頂きありがとうございます。確認次第、ご連絡いたします。');
		// サイトのページの一部にリダイレクトします。絶対パスでURLを入れることもできます。
        // 例:http://www.freetemplatesonline.jp/
		window.location = 'contact_page.html';
	</script>
<?php
}

mail()関数が失敗した場合は、次のコードが実行されます。

else { ?>
	<script language="javascript" type="text/javascript">
		// メッセージを書きます。
		alert('Message failed. Please, send an email to gordon@template-help.com');
		// サイトのページの一部にリダイレクトします。絶対パスでURLを入れることもできます。
        // 例:http://www.freetemplatesonline.jp/
		window.location = 'contact_page.html';
	</script>
<?php
}?>

こちらのパッケージから編集済みのcontact_form.htmlファイルとcontact.phpファイルをダウンロードすることができます。


Comments are closed.