HTMLのお問い合わせフォームにフィールドを追加

お問い合わせフォーム作成方法を紹介します。
こちらからファイルをダウンロードして下さい。

Part1.HTML

index.htmlファイルをメモ帳(Windows)やテキストエディター(Mac)、もしくはAdobe Dreamweaverなどで開いて下さい。そうすると、テキストボックス(<input>タグ)が2つと、テキストエリア(<textarea>タグ)が1つ、そしてボタン(<input>タグ)が2つあります。では、チェックボタン、ラジオボタン、ドロップダウンリストというものを追加してみましょう。これらのコードを書くのは、とても簡単ですので、以下をご覧下さい。送信ボタンやリセットボタンの下に、以下のコードを書き加えて下さい。

追加オプション:

<input type="checkbox" name="check[]" value="USA" />アメリカ
<input type="checkbox" name="check[]" value="Canada" />カナダ
<input type="checkbox" name="check[]" value="Mexico" />メキシコ

同意しますか?

<input type="radio" name="cf_radio_button" value="yes" />はい
<input type="radio" name="cf_radio_button" value="no" />いいえ

ドロップダウンから項目を選択します。

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

上記のコードに関して、もう少し詳しく説明します。アメリカ、カナダ、メキシコのチェックボックスを構成しているコードを見ると、他と違って『name』に割り当てられている名称が全て『check』となっており、最後に『[]』(角括弧)に気付くと思います。この角括弧は、それらのチェックボックスが変数である、という事を意味しています。
そのため、次のように機能します。チェックボックスにチェックを付けた後、check[]配列が、チェックボックスがチェック済みであるという値を受け取ります。例えば、アメリカとカナダのチェックボックスの両方をチェックした場合は、ckeck[]配列は、ckecked_usaとchecked_canadaという値を受け取ります。

次はラジオボタン、ドロップダウンに関してですが、ご存じの通り、これらは同時に選択することができません。上記のラジオボタンには、”cf_radio_button”という同じ名前が『name』に割り当てられています。このように、『name』に関しては、特に別々の名前に設定する必要はありません。

ドロップダウンリストを書く方法も、とても簡単です。タグで始めて、その次に、リストの選択肢を…というタグで選択肢を挟み、最後はタグで閉じます。 タグには、2つの属性があります。一つ目は、name属性で、二つ目は、size属性です。size属性は、ドロップダウンリストの選択肢をいくつ表示させるかを決定します。

それでは、下記の画像が、コードを書いた上で得られた結果となります。
contact_form_add_lements

Part.2 PHP

それでは、ページ上にうまく表示されれば、次はデータを送信できるように処理し、メールなどを使って送信できるようにする事が必要です。下記にあるcontact.phpというファイルが、これらのコードを最終的に記載したものになります。

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = 'gordon@template-help.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."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

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

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to gordon@template-help.com');
		history.back(1);
	</script>
<?php
}
?>

どのようなコードが書かれていて、どのような動作を行うのかを実際に見ていきます。

check配列を順に処理して、各配列の要素を$valueという変数に置き換えるために、PHP関数のforeach()を使用します。 次に、変数$check_boxesを作成し、配列内の各要素の値で、その変数をインクリメントします。

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

以下の通り、ラジオボタンとドロップダウンリストがテキストボックスと同じように定義されています。 PHP変数を作成し、それをラジオボタンやドロップダウンリストから送られてきたデータに割り当てます。

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

次のコードは、先程のものと似ています。最後に、新しい値をメールに追加するだけです。

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

TIP:役に立つミニ知識です。このスクリプトの以前のバージョンでは、Javascriptがアラートを出した後、 window.location = ‘contact_page.html’;というコードで指定したページへ、手動でリダイレクトされます。 そのため、contact_page.htmlをその他の名前にした場合、contact.php内のファイル名を書き換えておく必要があります。

history.back(1);

基本的にコードに記述されているものが、実際にコードが行う動作という事になります。これはブラウザ上で戻るというボタンをクリックする場合と同じです。


Comments are closed.