PHPを使ったお問い合わせフォームの作り方です。
ちなみにWordPressを使っている方は「Contact Form7」というプラグインを使えば一瞬で実装できます。
今回はWordPressやフレームワークなどを使わず、素のPHPを使った方法の紹介をします。
PHPは実行環境が必要なので、環境がないという方は、【画像で解説！】PHPの開発環境構築｜XAMPP編を参考に環境構築から始めましょう！
Macの方は、【画像で解説！】MAMPのインストール手順｜Mac編をどうぞ。
はじめに
今回のコードの注意点です。
実務での利用は注意
今回紹介するコードは、
- フォーム情報入力
- メール送信
というシンプルな機能です。
実務で利用する際は要件によってカスタマイズ、セキュリティの強化が必要です。
また、わかりやすさを重視して、複雑な処理は使用していません。
練習用としてコピペする分には大丈夫ですが、実務で利用する際は注意してください。
フォームの作り方は複数ある
お問い合わせフォームといっても様々な形があります。
ページ数
一般的には、
入力→確認→完了
の３ページの流れかと思いますが、
- 入力ページのみ（完了はJavaScriptの通知のみ）
- 入力→完了の２ページ
というパターンのフォームもありますね。
今回はよく使われるであろう
入力→確認→完了の３ページのフォームの紹介です。
プログラムの処理
どのページでどんな処理をするかもパターンがあります。
- 確認画面でメール送信などの処理をして完了画面は表示だけ
- 完了画面でメール送信などの処理をする
など、表面上は見えない部分ですが、プログラムの組み方にも違いがあります。
今回は理解しやすくするために、
- 入力画面：情報入力
- 確認画面：情報の受け取り・表示
- 完了画面：メール送信処理
それぞれのページで処理をわけたパターンを紹介します。
お問い合わせフォームの作成手順
今回作成するフォームの流れは次のとおり。
- 入力画面(index.php)
- 確認画面(confirm.php)
- 完了画面(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">
