[初心者向け]お問い合わせフォームの作り方[意外と簡単]
みなさんこんにちは！ワトスンです。
今回は、、
HTML/PHP言語を使ってお問い合わせファームを作るにはどうしたらいい？難しそうだけど大丈夫かな？
といった疑問に答えます。
■読んでほしい人
問い合わせフォームをつくって、サイトを充実させたい方
WordPressを利用している方は、「Contact Form 7」というプラグインを使えばすぐにお問い合わせフォームを実装できます。
今回はPHPファイルで作成する方法をご紹介します。
お問い合わせフォームの制作手順
お問い合わせフォームを作るには、３つのファイルが必要となります。
「お問い合わせフォーム(input.php)→確認画面(confirm.php)→送信完了画面(mailto.php)」の３つです。
ここからそれぞれのファイルの作成方法をご紹介していきます。
input.php(お問い合わせフォーム)の作成
input.phpの完成図とファイル内容をご紹介します。
input.php出来上がり図
input.php出来上がり図
input.phpコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<form action="confirm.php" method="post" name="form" onsubmit="return validate()"> <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> <div> <label>お名前<span class="span">必須</span></label> <input type="text" name="name" placeholder="例）山田太郎" value=""> </div> <div> <label>ふりがな<span class="span">必須</span></label> <input type="text" name="furigana" placeholder="例）やまだたろう" value=""> </div> <div> <label>メールアドレス<span class="span">必須</span></label> <input type="text" name="email" placeholder="例）guest@example.com" value=""> </div> <div> <label>電話番号<span class="nin">任意</span></label> <input type="text" name="tel" placeholder="例）0000000000" value=""> </div> <div> <label>性別<span class="span">必須</span></label> <input type="radio" name="sex" value="男性" checked> 男性 <input type="radio" name="sex" value="女性"> 女性 </div> <div> <label>お問い合わせ項目<span class="span">必須</span></label> <select name="item"> <option value="">お問い合わせ項目を選択してください</option> <option value="ご予約">ご予約</option> <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option> <option value="ご意見・ご感想">ご意見・ご感想</option> </select> </div> <div> <label>お問い合わせ内容<span class="span">必須</span></label> <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea> </div> <button class="btn" type="submit">確認画面へ</button> </form> |
今回は
お名前/ふりがな/メールアドレス/電話番号/性別/お問い合わせ項目/お問い合わせ内容
の７つの項目を記入できるようにしましたが、お好みで減らしたり新たな項目を増やして見て下さい。
その際はしっかりとnameを指定することを忘れずにして下さい。
input.phpができたので、次はconfirm.phpを作成していきます。
confirm.php(確認画面)の作成
confirm.phpの完成図とファイル内容をご紹介します。
confirm.php出来上がり図
confirm.php出来上がり図
confirm.phpコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<form action="confirm.php" method="post">//送信ボタンが押されたら「」 <input type="hidden" name="name" value="<?php echo $name; ?>"> <input type="hidden" name="furigana" value="<?php echo $furigana; ?>"> <input type="hidden" name="email" value="<?php echo $mail; ?>"> <input type="hidden" name="tel" value="<?php echo $tel; ?>"> <input type="hidden" name="sex" value="<?php echo $sex; ?>"> <input type="hidden" name="item" value="<?php echo $item; ?>"> <input type="hidden" name="content" value="<?php echo $content; ?>"> <h2 class="contact-title">お問い合わせ 内容確認</h2> <p>お問い合わせ内容はこちらで宜しいでしょうか？<br>よろしければ「送信する」ボタンを押して下さい。</p> <div> <label>お名前</label> <p><?php echo $name; ?></p> </div> <div> <label>ふりがな</label> <p><?php echo $furigana; ?></p> </div> <div> <label>メールアドレス</label> <p><?php echo $mail; ?></p> </div> <div> <label>電話番号</label> <p><?php echo $tel; ?></p> </div> <div> <label>性別</label> <p><?php echo $sex ?></p> </div> <div> <label>お問い合わせ項目</label> <p><?php echo $item; ?></p> </div> <div> <label>お問い合わせ内容</label> <p><?php echo nl2br($content); ?></p> </div> <input class="btn" type="button" value="内容を修正する" onclick="history.back(-1)"> <button class="btn" type="submit" name="submit">送信する</button> </form> //confirm.php（確認画面）の送信ボタンが押されたら以下を実行する <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { // フォームから送信されたデータを各変数に格納 $name = $_POST["name"]; $furigana = $_POST["furigana"]; $mail = $_POST["email"]; $tel = $_POST["tel"]; $sex = $_POST["sex"]; $item = $_POST["item"]; $content = $_POST["content"]; $email = "送信先メールアドレスを入れる"; } if (isset($_POST["submit"])) { // 送信ボタンが押された時に動作する処理 mb_language("ja");// 日本語をメールで送る場合 mb_internal_encoding("UTF-8"); $subject = "［自動送信］お問い合わせ内容の確認"; $body = <<< EOM // メール本文を変数bodyに格納 {$name} 様お問い合わせありがとうございます。 以下のお問い合わせ内容を、メールにて確認させていただきました。=================================================== 【 お名前 】 {$name} 【 ふりがな 】 {$furigana} 【 メール 】 {$mail} 【 電話番号 】 {$tel} 【 性別 】 {$sex} 【 項目 】 {$item} 【 内容 】 {$content} =================================================== 内容を確認のうえ、回答させて頂きます。 しばらくお待ちください。 EOM; $fromEmail = "contact@dream-php-seminar.com"; // 送信元のメールアドレスを変数fromEmailに格納 $fromName = "お問い合わせテスト";// 送信元の名前を変数fromNameに格納 $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";// ヘッダ情報を変数headerに格納する mb_send_mail($email, $subject, $body, $header);// メール送信を行う//mb_send_mail("送信先メールアドレス", "件名", "メール本文","メール送信後の画面遷移"); header("Location: http://sample.com/mailto.php");//送信完了画面（mailto.php）へのURLを入る exit; } ?> |
mailto.php(送信完了画面)の編集
mailto.phpの完成図とファイル内容をご紹介します。
mailto.php出来上がり図
mailto.php出来上がり図
mailto.phpコード
|
1 2 3 4 5 6 7 8 |
<h2>送信完了</h2> <p class="message">お問い合わせありがとうございます。1営業日以内にご返信させていただきます。 自動返信メールをお送りしておりますのでご確認ください。 1時間たっても届かない場合はお手数ですがこちらからご連絡ください。 </p> <form action="https://sample.com/">//ホームのURL <input id="title" name="submit" type="submit" value="ホームに戻る" /> </form> |
以上で３つのファイルの作成ファイルをご紹介してきました。
そこまで複雑な内容ではないので、大丈夫かなと思いますが、もしわからないことなどがありましたら、コメントまたはTwitterのDMからご相談ください！
コピペでURLなどを変更して使用していただけたら簡単です！是非お試しください。
- タグ：
- お問い合わせフォーム
2 件の投稿
質問ですconfirm.phpのコードをコピペしたら$body = <<< EOM // メール本文を変数bodyに格納の部分がsyntax error, unexpected<<(T_SL)と出て、
エラーになるのですがどうしたらいいでしょうか？
「syntax error, unexpected」というエラーは、閉じカッコや行末のセミコロンなどが抜けているときに発生する構文エラーです。ですのでコピペの際にそのような箇所が抜けていないか一度確認していただけたらなと思います！
たまにコピペの際にセミコロンなどが微妙に違うものになってしまう場合もあるので、そちらも一度ご確認いただけると幸いです。