【自作】PHPでお問い合わせフォームを作ろう!コードと仕組みを徹底解説!

この記事からわかること

  • お問い合わせフォーム仕組み作り方
  • 実際に使用できる完全自作のお問い合わせフォームの制作方法
  • 使用する知識はHTMLphpのみ
  • セキュリティ面やコツ、メールの送り方などを解説

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Webサイトを運営するにあたって「お問い合わせフォーム」はユーザーとのコミニュケーションが取れる欠かせない機能の1つです。WordPressを使用している場合では最初からテーマに組み込まれていたり、プラグインなどで簡単に導入することができます。ですが今回はHTMLとphpのみを使って1から自作する方法をまとめていきます。

phpの知識を網羅的に使用するので効率の良い学習がてら、ぜひチャレンジしてみてください。またボリュームが増えてしまったので全3回に渡って解説していきます。

実装の前に

今回はサーバーサイド言語であるphpを使用して実際に使用できるお問い合わせフォームを作成していきます。サーバーにアップロードすれば正常に動作しますがローカル環境(MAMPなど)を使用してテスト送信したい場合は別途設定が必要になるので注意してください。

またphpもローカル環境を構築しないと動作しないので注意してください。

お問い合わせフォームの仕組み

まずは「お問い合わせフォーム」を作成するにあたっての流れを確認しておきます。

流れ

  1. 入力フォームの作成(HTML)
  2. 入力値のエスケープ処理と入力チェック(HTML+php)
  3. 入力値の確認画面
  4. メール本文(相手に自動送信用)を作成(php)
  5. メール本文(自分にお問い合わせ内容送信用)を作成(php)
  6. 実際にメールを送信する(php)

作成するファイル←(該当の作業番号)

今回作成するお問い合わせフォームは上記の3つのファイルのみで実装できます。デスクトップに新規フォルダを作成し、その中に3つのphpファイルを作成しておいてください。中身はまだ空なのでこれから一緒に記述していきます。

questionformの構成

作成するお問い合わせフォーム

入力ファイル(form.php)

【自作】PHPでお問い合わせフォームを作ろう!コードと仕組みを徹底解説!

確認画面ファイル(confirm.php)

【自作】PHPでお問い合わせフォームを作ろう!コードと仕組みを徹底解説!

送信ファイル(send.php)

【自作】PHPでお問い合わせフォームを作ろう!コードと仕組みを徹底解説!

上記のようなお問い合わせフォームを作成していきます。この一連の記事ではCSS部分を省略しているのでデザインも適応させたい場合は以下リンク(GitHub)にコードを全て公開しているのでそこから流用してください。

GitHub:ContactForm

また以下リンクは実際にこの記事で作成したお問い合わせフォームを実際の私のサイトに組み込んだものです。

HTMLで入力フォームの作成

まずはHTMLで入力フォームを作成します。記述していくのは「form.php」です。input要素やtextarea要素を使用しながらフォームの骨格を作り上げていきます。

今回は以下の項目を持つフォームを作成していきます。

入力フォームのコード(HTML)を解説

エディタで「form.php」を開きます。私はVS Codeを使っているのでhtml:5と入力後、補完機能を使ってHTML文書が一発で記述できます。

VS Codeのエメット機能の使い方 VS Codeのエメット機能の使い方

おすすめ記事:【完全版】VS Codeのインストール方法!セットアップとオススメ拡張機能

補完入力されたらフォーム部分を記述していきます。以下はフォーム部分のみの抜粋です。


<div>
  <p>お問い合わせ種別</p>
  <input type="radio" name="kinds" value="質問" checked ><label>質問</label>
  <input type="radio" name="kinds" value="依頼"><label>依頼</label>
  <input type="radio" name="kinds" value="その他"><label>その他</label>
</div>
<p>お名前</p>
<input type="text" name="name" value="" placeholder="お名前" required>
<p>メールアドレス</p>
<input type="email" name="email" value="" placeholder="メールアドレス" required>
<p>件名</p>
<input type="text" name="title" value="" placeholder="件名" required>
<p>内容</p>
<textarea type="text" name="body" placeholder="お問い合わせ内容" rows="7" required></textarea>
<button  type="submit" name="submit" value="確認">確認</button>

input要素には属性を色々と付与しておきます。

name属性

name属性を付与することでinput要素の値をphpからアクセスできるようになります。「name」や「email」など項目に沿った分かりやすいものにしておきます。

type属性

type属性を指定することでtypeに合わない入力値にエラーを吐かせることができます。type="email"とするだけでEメール形式(@マークを含むなど)のみの入力を受け付けてくれるようになります。

required

requiredを指定することで入力必須項目にすることができます。しかしHTMLでの必須項目は空白でも入力されたとみなされてしまうので注意が必要です。

送信ボタン(type="submit")

フォームには必ずtype="submit"を指定したinputまたはbutton要素の送信ボタンが必要です。

送信ボタンを押すことでphpに入力値を渡すことができるようになります。

ポイント

フォームの入力値をphpに渡す

骨格ができたら次は実際にphpに値を受け渡す方法です。HTML→phpへの値渡しはphpの仕組みである「POST」を使用します。

POSTを使用して値を受け取るには先ほどのフォームをform要素で囲う必要があります。またform要素のmethod属性にはpostaction属性には情報を渡したいファイル名を記述しておきます。

これでphp側で$_POSTに情報が格納されるようになります。

先ほどのフォームを囲うように以下のように追加します。


<form method="post" action="form.php">
  //〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
  // 先ほど書いたフォームの骨格
  //〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
</form>

method属性をgetにすると$_GETの方に情報が格納されますが$_GETの場合はURLに情報を含めて渡すため情報が誰でも簡単に見たり書き換えることができてしまいます。(URLがhttps//:ドメイン名.com?name="デザイン太郎"のようになってしまう)セキュリティ的に良くないのでPOSTを使いましょう。

今の段階では項目を入力後、送信ボタンを押すことで$_POSTに情報が格納され値をデータとして扱うことができるようになりました。

phpでデータを受け取ろう

ここまででHTMLでの記述は一旦終了です。同じファイル(form.php)にphpで新しく記述していきます。

phpを記述する場所は<!DOCTYPE html>の上部です。まずはphpを書くために<?php〜?>を忘れずに書いておきます。


<?php
  //ここに記述していく
?>
<!DOCTYPE html>

今回データを送信したのは$_POSTでした。しかし受け取ったデータをそのままメールに使用するのはセキュリティ的に好ましくありません。なのでまずは受け取ったデータが適切な値かどうか、そして悪意ある文字やコードが組み込まれていないかをチェックするエスケープ処理を実装していきます。

$_POSTで受け取ったデータは必ずエスケープ処理

エスケープ処理をするにはhtmlspecialchars関数を使用します。この関数はHTMLファイルにおいて特殊な意味をもつ>""などを自動でただの文字列に変換してくれます。

まずは送信ボタンが押されたかどうか( $_POST['submit']に値があるかどうか)で分岐させ、各項目にエスケープ処理を施し、変数に格納していきます。


<?php
// 送信ボタンが押されたかどうか
if(isset($_POST['submit'])){ // #1

    // POSTされたデータをエスケープ処理して変数に格納
    $kinds = htmlspecialchars($_POST['kinds'],ENT_QUOTES | ENT_HTML5);
    $name  = htmlspecialchars($_POST['name'],ENT_QUOTES | ENT_HTML5);
    $email = htmlspecialchars($_POST['email'],ENT_QUOTES | ENT_HTML5);
    $title = htmlspecialchars($_POST['title'],ENT_QUOTES | ENT_HTML5);
    $body = htmlspecialchars($_POST['body'],ENT_QUOTES | ENT_HTML5);
} // #1
?>
<!DOCTYPE html>

関連記事:【絶対必須】phpのセキュリティ対策!XSSとメールヘッダーインジェクションを防ごう

データが正しく入力されているかチェック

エスケープ処理を施した後はデータが正しいかチェックします。メールアドレスはHTMLでtype="email"を付与したので空白や"@"がないとエラーを起こしてくれます。

しかし他の項目は空白を入力されるとデータを送信できてしまうため、空白だった場合にエラーを起こす必要があります。そこで次は入力値が空白でないかを確かめる処理を記述します。

先ほど記述したエスケープ処理の下に追記していきます。


// 先ほどのエスケープ処理の下に記述
$errors = []; //エラー格納用配列
//trim(文字列)→文字列内の空白を除去 →値がなくなればエラーにする
if(trim($name) === '' || trim($name) === " "){
  $errors['name'] = "名前を入力してください";
}
if(trim($title) === '' || trim($title) === " "){
  $errors['title'] = "タイトルを入力してください";
}
if(trim($body) === '' || trim($body) === " "){
  $errors['body'] = "内容を入力してください";
}

ポイント

これで入力値が空白の場合のエスケープ処理が完了しました。変数$errorsには不備がある場合のみエラーメッセージが格納されるのである場合のみ表示されるようにしておきます。以下のコードをif文の内側に記述します。


if(isset($_POST['submit'])){  // #1

    // 〜〜〜〜〜〜〜〜〜〜〜
    // 先ほどのエスケープ処理

    // エラー配列がなければ異常なし
    if(count($errors) === 0){ // #2
      echo "入力値に異常はありませんでした";
    }else{
      // エラー配列があればエラーを表示
      echo $errors['name'];
      echo $errors['title'];
      echo $errors['body'];
    } // #2
}  // #1
?>
<!DOCTYPE html>

ここまででプログラム全体の半分ほど完成しました。

  1. ✔️ 入力フォームの作成(HTML)
  2. ✔️ 入力値のエスケープ処理と入力チェック(HTML+php)
  3. 入力値の確認画面
  4. メール本文(相手に自動送信用)を作成(php)
  5. メール本文(自分にお問い合わせ内容送信用)を作成(php)
  6. 実際にメールを送信する(php)

今回はここまでにして次回は「入力値の確認と値の保持の仕方」を実装していきましょう!

今回のまとめ

記述したファイル

  1. form.php

記述した内容

  1. お問い合わせフォームの骨格(HTML)
  2. 入力値の送信&受け取り(HTML/php)
  3. 入力値のエスケープ処理(php)

おまけ

途中で出てきたエスケープ処理は何度も使うので関数にして簡単に呼び出せるようにしておくと便利です。

function e(string $str,string $charset = 'UTF-8'):string{
  return htmlspecialchars($str,ENT_QUOTES | ENT_HTML5,$charset);
}
$kinds = e($_POST['kinds']);

ご覧いただきありがとうございました!

第1回:【自作】PHPでお問い合わせフォームを作ろう!コードと仕組みを徹底解説!

第2回:【第2回】PHPでお問い合わせフォームを作ろう!入力値の確認と値の保持の仕方

第3回:【第3回】PHPでお問い合わせフォームを作ろう!メールの本文の作成方法と送信の仕方

第1回の全体のコード


<?php
// 送信ボタンが押されたかどうか
if(isset($_POST['submit'])){ // #1

    // POSTされたデータをエスケープ処理して変数に格納
    $kinds = htmlspecialchars($_POST['kinds'],ENT_QUOTES | ENT_HTML5);
    $name  = htmlspecialchars($_POST['name'],ENT_QUOTES | ENT_HTML5);
    $email = htmlspecialchars($_POST['email'],ENT_QUOTES | ENT_HTML5);
    $title = htmlspecialchars($_POST['title'],ENT_QUOTES | ENT_HTML5);
    $body = htmlspecialchars($_POST['body'],ENT_QUOTES | ENT_HTML5);

    // エラー配列がなければ異常なし
    if(count($errors) === 0){ // #2
      echo "入力値に異常はありませんでした";
    }else{
      // エラー配列があればエラーを表示
      echo $errors['name'];
      echo $errors['title'];
      echo $errors['body'];
    } // #2
} // #1
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form method="post" action="form.php">
    <div>
      <p>お問い合わせ種別</p>
      <input type="radio" name="kinds" value="質問" checked ><label>質問</label>
      <input type="radio" name="kinds" value="依頼"><label>依頼</label>
      <input type="radio" name="kinds" value="その他"><label>その他</label>
    </div>
    <p>お名前</p>
    <input type="text" name="name" value="" placeholder="お名前" required>
    <p>メールアドレス</p>
    <input type="email" name="email" value="" placeholder="メールアドレス" required>
    <p>件名</p>
    <input type="text" name="title" value="" placeholder="件名" required>
    <p>内容</p>
    <textarea type="text" name="body" placeholder="お問い合わせ内容" rows="7" required></textarea>
    <button  type="submit" name="submit" value="確認">確認</button>
  </form>
</body>
</html>

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index