2019年7月14日プログラミング

[初心者向け]お問い合わせフォームの作り方[意外と簡単]

みなさんこんにちは！ワトスンです。
今回は、、

HTML/PHP言語を使ってお問い合わせファームを作るにはどうしたらいい？難しそうだけど大丈夫かな？

といった疑問に答えます。

■読んでほしい人
お問い合わせフォームをつくって、サイトを充実させたい方

WordPressを利用している方は、「Contact Form 7」というプラグインを使えばすぐにお問い合わせフォームを実装できます。
今回はPHPファイルでお問い合わせフォームを作成する方法をご紹介します。

1 お問い合わせフォームの作り方手順
2 お問い合わせフォームの作り方まとめ

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

お問い合わせフォームを作るには、３つのファイルが必要となります！

入力フォーム(input.php)
↓
確認画面(confirm.php)
↓
送信完了画面(mailto.php)

の３つです。

この３つのファイルの流れとしては、
入力フォームでユーザーに入力をしてもらい(input.php)
↓
その入力内容を確認画面で処理し問合せ内容の最終確認を行い(confirm.php)
↓
問題なければお問い合せ内容をメールで送信し(confirm.php)
↓
送信が完了したことを送信完了画面で確認する(mailto.php)
といった流れになります。

それではさっそくそれぞれのファイルの作成方法をご紹介していきます！

入力フォーム(input.php)の作成

入力フォームの完成図とファイル内容をご紹介します。

入力フォーム完成図

input.phpファイル

input.phpファイルでは、お問い合わせの入力フォームを作成しています。
お問い合せ内容の入力と確認画面(confirm.php)への送信を行います。
こちらのファイルはHTMLで作成したフォームなので複雑なコードなどはありません。

<form action="confilm.php" method="post" name="form">
    <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>

<p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p>

<div>

</div>

<div>

</div>

<div>

<label>メールアドレス<span class="span">必須</span></label>

</div>

<div>

</div>

<div>

<input type="radio" name="sex" value="男性" checked> 男性

<input type="radio" name="sex" value="女性"> 女性

</div>

<div>

<label>お問い合わせ項目<span class="span">必須</span></label>

<option value="">お問い合わせ項目を選択してください</option>

<option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>

</select>

</div>

<div>

<label>お問い合わせ内容<span class="span">必須</span></label>

</div>

<button class="btn" type="submit">確認画面へ</button>

</form>

このファイルできちんと理解しておくべき点は、
１行目のaction属性とmethod属性そしてname属性です。

<form action="confilm.php" method="post" name="form">
</from>

1 2	<form action="confilm.php" method="post" name="form"> </from>

action属性では、入力フォームのデータの送信先を指定します。
今回はconfirm.phpへ送信します。

method属性では、送信方法の種類（HTTPメソッド）を指定します。
（HTTPメソッド・・・ブラウザからサーバーに対して出される送信の際のお願いの種類。「GET」や「POST」など）
今回は「POST」メソッドを指定します。

method属性に関して詳しく知りたい方は、「HTTPリクエストメソッドとは」を参考にして下さい！

お問い合わせ内容としては、
・お名前
・ふりがな
・メールアドレス
・電話番号
・性別
・お問い合わせ項目
・お問い合わせ内容
の７つの項目を記入できるようにしました。

各項目にname属性が指定されているのに気づきましたでしょうか？
これは簡単に説明すると、フォームで入力された内容をconfirm.phpへデータとして送信するために必要な属性です。

そして、入力フォームで入力された内容を確認画面(confirm.php)に送信し処理していきます。
次はconfirm.phpファイルの作成に移ります。

確認画面(confirm.php)の作成

確認画面の完成図とファイル内容をご紹介します。

確認画面完成図

confirm.phpファイル

confirm.phpでは、
・入力された内容を取得し確認画面を表示
・メール内容を作成し入力されたメールアドレス宛に送信
・送信が完了したら送信完了画面(mailto.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"];
}
?>

<form action="" 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>

<?php
if (isset($_POST["submit"])) {
    mb_language("ja");
    mb_internal_encoding("UTF-8");
    $subject = "［自動送信］お問い合わせ内容の確認";
    $body = <<< EOM
{$name} 様お問い合わせありがとうございます。
以下のお問い合わせ内容を、メールにて確認させていただきました。
===================================================
【 お名前 】
{$name}
【 ふりがな 】
{$furigana}
【 メール 】
{$mail}
【 電話番号 】
{$tel}
【 性別 】
{$sex}
【 項目 】
{$item}
【 内容 】
{$content}
===================================================
内容を確認のうえ、回答させて頂きます。
しばらくお待ちください。
EOM;

    $fromEmail = "送信元のメールアドレス";
    $fromName = "送信元の名前";
    $header = "From: " . mb_encode_mimeheader($fromName) . "<{$fromEmail}>";
    mb_send_mail($mail, $subject, $body, $header);
    mb_send_mail($fromEmail, $subject, $body, $header);
    header("Location: 送信完了画面のURL");
    exit;
}
?>

<?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"];

}

<h2 class="contact-title">お問い合わせ内容確認</h2>

<p>お問い合わせ内容はこちらで宜しいでしょうか？<br>よろしければ「送信する」ボタンを押して下さい。</p>

<div>

</div>

<div>

</div>

<div>

<label>メールアドレス</label>

</div>

<div>

</div>

<div>

</div>

<div>

<label>お問い合わせ項目</label>

</div>

<div>

<label>お問い合わせ内容</label>

</div>

</form>

<?php

if (isset($_POST["submit"])) {

mb_language("ja");

mb_internal_encoding("UTF-8");

$subject = "［自動送信］お問い合わせ内容の確認";

$body = <<< EOM

{$name} 様お問い合わせありがとうございます。

以下のお問い合わせ内容を、メールにて確認させていただきました。

===================================================

【お名前】

{$name}

【ふりがな】

{$furigana}

【メール】

{$mail}

【電話番号】

{$tel}

【性別】

{$sex}

【項目】

{$item}

【内容】

{$content}

===================================================

内容を確認のうえ、回答させて頂きます。

しばらくお待ちください。

EOM;

$fromEmail = "送信元のメールアドレス";

$fromName = "送信元の名前";

$header = "From: " . mb_encode_mimeheader($fromName) . "<{$fromEmail}>";

mb_send_mail($mail, $subject, $body, $header);

mb_send_mail($fromEmail, $subject, $body, $header);

header("Location: 送信完了画面のURL");

exit;

}

１行目〜１１行目は、入力画面(input.php)で入力されたデータを取得しています。

if ($_SERVER["REQUEST_METHOD"] == "POST") {

1	if ($_SERVER["REQUEST_METHOD"] == "POST") {

この２行目では、$_SERVER[“キー名”]を利用し、「POSTリクエスト」を取得した場合のif文を作成しています。

１３行目〜５３行目で、入力されたデータをもとに確認画面を表示しています。

<form action="" method="post">

1	<form action="" method="post">

この１３行目のaction属性を空白にしているのは、送信ボタンを押した際にこのconfilm.phpファイルで送信処理を行うため自分自身にactionを指定しています。

５５行目〜９１行目で、送信するメール内容の作成と送信を行っています。
お問い合わせフォーム作成で一番めんどうなのが、文字化け回避です。

mb_language("ja");
mb_internal_encoding("UTF-8");

1 2	mb_language("ja"); mb_internal_encoding("UTF-8");

この５７行目〜５８行目の「mb_language()」「mb_internal_encoding()」では、文字言語と文字コードを指定しています。

$header = "From: " . mb_encode_mimeheader($fromName) . "<{$fromEmail}>";

1	$header = "From: " . mb_encode_mimeheader($fromName) . "<{$fromEmail}>";

この８５行目では、ヘッダ内にある送信元の名前の文字化け回避のため、「mb_encode_mimeheader()」を使用してMIMEヘッダの文字列をエンコードしています（エンコードとはデータを他の形式に変換すること）。

mb_send_mail($mail, $subject, $body, $header);
mb_send_mail($fromEmail, $subject, $body, $header);

1 2	mb_send_mail($mail, $subject, $body, $header); mb_send_mail($fromEmail, $subject, $body, $header);

この８６行目〜８７行目では、「mb_send_mail()」を使用してメールの送信を行います。
ユーザーへの送信とお問い合わせを管理している管理者向けへの送信を行います。
使い方は、mb_send_mail(宛先,件名,メッセージ,ヘッダ)の形で使用します。

header("Location: 送信完了画面のURL");
exit;

1 2	header("Location: 送信完了画面のURL"); exit;

この８８行目〜８９行目では、「header()」を使用し、送信処理が完了したら送信完了画面へ移動するように指定しています。「exit;」は処理の終了を行います。

送信完了画面(mailto.php)の作成

送信完了画面の完成図とファイル内容をご紹介します。

送信完了画面出来上がり図

mailto.phpファイル

mailto.phpは送信完了画面を表示しているだけなので、内容は正直お好みで作成してもらえれば大丈夫なのですが、
サンプルとして下記コードを載せています。

<h2>送信完了</h2>
<p class="message">
    お問い合わせありがとうございます。1営業日以内にご返信させていただきます。<br>
    自動返信メールをお送りしておりますのでご確認ください。<br>
    1時間たっても届かない場合はお手数ですがこちらからご連絡ください。
</p>
<a href="URL">ホームに戻る</a>

お問い合わせありがとうございます。1営業日以内にご返信させていただきます。<br>

自動返信メールをお送りしておりますのでご確認ください。<br>

1時間たっても届かない場合はお手数ですがこちらからご連絡ください。

</p>

<a href="URL">ホームに戻る</a>

こちらのmailto.phpは送信が完了したことを表示するだけなので、自由にカスタマイズして頂いて大丈夫です。
お問い合わせ完了後にトップページなどへ戻るリンクを設置しておくといいかなと思います。

以上でお問い合わせフォームの完成です！

お問い合わせフォームの作り方まとめ

・入力フォーム(input.php)
・確認画面(confirm.php)
・送信完了画面(mailto.php)
上記３つのファイルの作成方法をご紹介してきました。
この3つのファイルでお問い合わせフォームを作成できます。

いかがだったでしょうか？
そこまで複雑な内容ではないのですが、もしわからないことなどがありましたらコメントまたはTwitterのDMからご相談ください！
コピペでそれぞれカスタマイズして使用していただけたら簡単です！是非お試しください！

タグ：
お問い合わせフォーム

コメントを残すコメントをキャンセル

2 件の投稿

匿名より:

2021年5月7日 11:19

質問ですconfirm.phpのコードをコピペしたら$body = <<< EOM // メール本文を変数bodyに格納の部分がsyntax error, unexpected<<(T_SL)と出て、
エラーになるのですがどうしたらいいでしょうか？

返信
- ワトスン より:
  
  2021年5月8日 21:52
  
  「syntax error, unexpected」というエラーは、閉じカッコや行末のセミコロンなどが抜けているときに発生する構文エラーです。ですのでコピペの際にそのような箇所が抜けていないか一度確認していただけたらなと思います！
  たまにコピペの際にセミコロンなどが微妙に違うものになってしまう場合もあるので、そちらも一度ご確認いただけると幸いです。
  
  返信

[初心者向け]お問い合わせフォームの作り方[意外と簡単]

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

入力フォーム(input.php)の作成

入力フォーム完成図

input.phpファイル

確認画面(confirm.php)の作成

確認画面完成図

confirm.phpファイル

送信完了画面(mailto.php)の作成

送信完了画面出来上がり図

mailto.phpファイル

お問い合わせフォームの作り方まとめ

コメントを残す コメントをキャンセル

2 件の投稿

コメントを残すコメントをキャンセル