PHPを学ぶ PR

【超初心者向け】PHPのお問い合わせフォームの作り方【コピペOK】

  /
記事内に商品プロモーションを含む場合があります

PHPを使ったお問い合わせフォームの作り方です。

ちなみにWordPressを使っている方は「Contact Form7」というプラグインを使えば一瞬で実装できます。

今回はWordPressやフレームワークなどを使わず、素のPHPを使った方法の紹介をします。

PHPは実行環境が必要なので、環境がないという方は、【画像で解説！】PHPの開発環境構築｜XAMPP編を参考に環境構築から始めましょう！

Macの方は、【画像で解説！】MAMPのインストール手順｜Mac編をどうぞ。

目次
  1. はじめに
  2. お問い合わせフォームの作成手順
  3. フォームのセキュリティ対策
  4. まとめ

はじめに

今回のコードの注意点です。

実務での利用は注意

今回紹介するコードは、

  1. フォーム情報入力
  2. メール送信

というシンプルな機能です。

実務で利用する際は要件によってカスタマイズ、セキュリティの強化が必要です。

また、わかりやすさを重視して、複雑な処理は使用していません。

練習用としてコピペする分には大丈夫ですが、実務で利用する際は注意してください。

フォームの作り方は複数ある

お問い合わせフォームといっても様々な形があります。

ページ数

一般的には、

入力→確認→完了

の３ページの流れかと思いますが、

  • 入力ページのみ（完了はJavaScriptの通知のみ）
  • 入力→完了の２ページ

というパターンのフォームもありますね。

今回はよく使われるであろう

入力→確認→完了の３ページのフォームの紹介です。

プログラムの処理

どのページでどんな処理をするかもパターンがあります。

  • 確認画面でメール送信などの処理をして完了画面は表示だけ
  • 完了画面でメール送信などの処理をする

など、表面上は見えない部分ですが、プログラムの組み方にも違いがあります。

今回は理解しやすくするために、

  1. 入力画面：情報入力
  2. 確認画面：情報の受け取り・表示
  3. 完了画面：メール送信処理

それぞれのページで処理をわけたパターンを紹介します。

お問い合わせフォームの作成手順

今回作成するフォームの流れは次のとおり。

  1. 入力画面(index.php)
  2. 確認画面(confirm.php)
  3. 完了画面(complete.php)

入力画面の作成

入力画面(index.php)の完成イメージ

入力画面(index.php)のコード

※見やすくするためにCSSも書いていますが、コードが長くなるので不要であれば削除でOKです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お問い合わせフォーム</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	input[type="text"],input[type="email"],select {
		width: 300px;
		height: 30px;
	}
	textarea {
		width: 300px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<form action="confirm.php" method="post">
 		<h2>お問い合わせフォーム</h2>
	 	<div class="input-area">
		 	<p>名前</p>
		 	<input type="text" name="name" placeholder="例）田中　太郎" required>
		</div>

		<div class="input-area">
		 	<p>メール</p>
		 	<input type="email" name="email" placeholder="例）abc@abc.com" required>
	 	</div>

	 	<div class="input-area">
		 	<p>性別</p>
		 	<label><input type="radio" name="sex" value="男性" checked>男性</label>
		 	<label><input type="radio" name="sex" value="女性">女性</label>
	 	</div>

	 	<div class="input-area">
		 	<p>お住まいの地域</p>
		 	<select name="pref" required>
		 		<option value="">-選択-</option>
		 		<option value="東京都">東京都</option>
		 		<option value="愛知県">愛知県</option>
		 		<option value="大阪府">大阪府</option>
		 	</select>
	 	</div>

	 	<div class="input-area">
		 	<p>お問い合わせ理由</p>
		 	<label><input type="checkbox" name="reason[]" value="質問">質問</label>
		 	<label><input type="checkbox" name="reason[]" value="ご意見ご要望">ご意見ご要望</label>
		 	<label><input type="checkbox" name="reason[]" value="資料請求">資料請求</label>
		 	<label><input type="checkbox" name="reason[]" value="掲載依頼">掲載依頼</label>
		 	<label><input type="checkbox" name="reason[]" value="その他">その他</label>
	 	</div>

		<div class="input-area">
	 		<p>お問い合わせ内容</p>
	 		<textarea name="contact_body" rows="5" placeholder="例）具体的な内容を記載" required></textarea>
		</div>
	 	<div class="input-area">
	 		<input type="submit" name="submit" value="確認画面へ" class="btn-border">
	 	</div>
	</form>
</body>
</html>

 

HTMLでフォーム作っています。

  • テキスト
  • セレクトボックス
  • ラジオボタン
  • チェックボックス
  • テキストエリア

の入力項目をそれぞれ使っています。

<input type="text" name="name" placeholder="例）田中　太郎" required>

inputタグの最後にrequiredとついているのは、HTML5の必須入力チェックです。

これをつけるだけで簡易的な入力チェックが実装できます。

※複数チェックボックスに関してはこれでは対応できず、JavaScriptを書く必要があります。

GETとPOST

PHPにデータを受け渡す方法としては「GET」と「POST」の２種類があります。

GET＝はがき、POST＝封筒をイメージするとわかりやすいかもしれません。

GET：情報が外部に見える状態で、URLから値を渡す
POST：情報が外部に見えない状態で、フォームから値を渡す

お問い合わせフォームは個人情報の漏洩に繋がるのでPOSTにしておきましょう。

<form action="confirm.php" method="post">
formタグのmethod部分にpostと書けばOKです。

actionはボタンを押したときのフォームの飛び先ページの指定です。

確認画面の作成

確認画面(confirm.php)の完成イメージ

確認画面(confirm.php)のコード

<?php
//直リンクされた場合index.phpにリダイレクト
if($_SERVER["REQUEST_METHOD"] != "POST"){
	header("Location: index.php");
	exit();
}

//各項目を内容を取得
$name = $_POST['name'];
$email = $_POST['email'];
$sex = $_POST['sex'];
$pref = $_POST['pref'];
$contact_body = $_POST['contact_body'];

//チェックボックスの内容をスラッシュ区切りで取り出す
$reason = implode('/', $_POST['reason']);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>確認画面</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
	.input-area {
		margin-bottom: 20px;
	}
	p {
		font-weight: bold;
		font-size: 20px;
	}
	.btn-border {
		display: inline-block;
		max-width: 180px;
		text-align: left;
		border: 2px solid #9ec34b;
		font-size: 15px;
		color: #9ec34b;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 16px;
		border-radius: 4px;
		transition: .4s;
	}
	.btn-border:hover {
		background-color: #9ec34b;
		border-color: #cbe585;
		color: #FFF;
	}
</style>
</head>
<body>
 	<form action="complete.php" method="post">
 		<h2>お問い合わせ内容確認</h2>
	 	<div class="input-area">
		 	<p>名前</p>
		 	<?php echo htmlspecialchars($name,ENT_QUOTES,'UTF-8');?>
		</div>

		<div class="input-area">
		 	<p>メール</p>
		 	<?php echo htmlspecialchars($email,ENT_QUOTES,'UTF-8');?>
	 	</div>

	 	<div class="input-area">
		 	<p>性別</p>
		 	<?php echo $sex;?>
	 	</div>

	 	<div class="input-area">
		 	<p>お住まいの地域</p>
		 	<?php echo $pref;?>
	 	</div>

	 	<div class="input-area">
		 	<p>お問い合わせ理由</p>
		 	<?php echo $reason;?>
	 	</div>

		<div class="input-area">
	 		<p>お問い合わせ内容</p>
	 		<?php echo nl2br(htmlspecialchars($contact_body,ENT_QUOTES,'UTF-8'));?>
		</div>
	 	<div class="input-area">
	 		<input type='button' onclick='history.back()' value='戻る' class="btn-border">
	 		<input type="submit" name="submit" value="送信" class="btn-border">
	 		<input type="hidden" name="name" value="<?php echo $name;?>">
	 		<input type="hidden" name="email" value="<?php echo $email;?>">
	 		<input type="hidden" name="sex" value="<?php echo $sex;?>">
	 		<input type="hidden" name="pref" value="<?php echo $pref;?>">
	 		<input type="hidden" name="reason" value="<?php echo $reason;?>">
	 		<input type="hidden" name="contact_body" value="<?php echo $contact_body;?>">
	 	</div>
	</form>
</body>
</html>
  • POSTされた情報の受け取り
  • 完了ページに渡すための情報埋め込み

を行っています。

チェックボックスに関しては配列としてデータが飛んでくるので、ひとつのデータにまとめる処理を書いています。

$_POSTとは

$_POSTは予め用意されている変数で、フォームからPOSTで送られてきたデータが入っています。

$_POST[‘inputで指定したname’]という形式でデータを受け取ることができます。

$name = $_POST['name'];

hiddenとは

目に見えない形で、HTMLの中にデータを埋め込むことができます。

入力画面でPOSTされた情報を完了画面まで引き継ぐことはできないため、
確認ページで一度値をセットし直しています。

完了画面の作成

完了画面(complete.php)の完成イメージ

完了画面(complete.php)のコード

<?php
//直リンクされた場合index.phpにリダイレクト
if($_SERVER["REQUEST_METHOD"] != "POST"){
	header("Location: index.php");
	exit();
}

//メールの日本語設定
mb_language("Japanese");
mb_internal_encoding("UTF-8");

//送信先アドレス
$to = $_POST['email'];
//メール件名
$subject = "お問い合わせありがとうございます。";
//メッセージ本文を視覚的に見やすく格納（ヒアドキュメント）
$message = <<< EOM
お問い合わせありがとうございます。

以下の内容で承りました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【 お名前 】
{$_POST["name"]}

【 メール 】
{$_POST["email"]}

【 性別 】
{$_POST["sex"]}

【 お住いの地域 】
{$_POST["pref"]}

【 お問い合わせ理由 】
{$_POST["reason"]}

【 お問い合わせ内容 】
{$_POST["contact_body"]}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
EOM;
//送信元
$headers = "From: support@example.com";
//メール送信
mb_send_mail($to, $subject, $message, $headers); 
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>完了画面</title>
<style type="text/css">
	body {
		background-color: #f9fff2;
	}
</style>
</head>
<body>
	<h2>お問い合わせ完了</h2>
 	<p>お問い合わせありがとうございました。</p>
 	<p>今後とも当サイトをよろしくお願いいたします。</p>
 	<p><a href="index.php">お問い合わせトップへ</p>
</body>
</html>

POSTで受け取ったデータをもとにメールを送信しています。

メールの送信自体は受け取った情報をもとにmb_send_mail関数を使うだけなので問題ないかと思います。

$message = <<< EOM〜EOM;

 

となっている部分はヒアドキュメントといって、EOM(任意の文字列でいい)で囲んだ中身がそのまま変数として格納されるというものです。

改行や空白がそのまま適用されるので、長い文章を書く際などに利用されます。

ちなみにメール送信はローカルの開発環境では動かない設定になっていることが多いので、設定を変えるか、実際のサーバーにアップロードして確認してください。

フォームのセキュリティ対策

htmlspecialchars

confirm.phpのテキスト入力エリアにhtmlspecialcharsという表記がありますが、これはセキュリティ対策のために使用しています。

<?php echo htmlspecialchars($name,ENT_QUOTES,'UTF-8');?>

これがないと、テキストにHTMLやJavaScriptのタグを入力された場合そのまま実行されて、情報漏洩やなりすましなどのリスクが高まります。

ためしに、下記のようにコードを変更し、

<?php echo $name;?>

index.phpの名前欄で下記のコードを入力してみます。

<script>alert("test")</script>

 

実行結果

JavaScriptが実行されてアラートが表示されましたね。

こういった入力フォームがデータベースにつながっていたりすると、データベースを不正に操作されて情報を抜かれるということもあるので注意が必要です。

フレームワークやプラグインが安全

セキュリティ対策をあげればキリがないので、一番のおすすめフレームワークなどの出来合いのものを使うことです。

色んな人の手が入っているのでセキュリティにも強く、実装も簡単です。

自分で実装する際にはどういったリスクがあるかを理解して慎重に作りましょう！

まとめ

今回は初心者向きに最低限の解説をしました。

需要があればもっと効率的な書き方、セキュリティに踏み込んだものも紹介できればいいかなと思います。

ということで以上です。ぜひ参考にしてください！

あわせて読みたい
RELATED POST