【初心者向け】PHPを使って1時間でお問い合わせフォームを作る方法

今までのレッスンの集大成としてPHPでお問い合わせフォームを作っていきます。わからない部分があれば、いままでに学習したことを復習してください。

レッスン一覧

目次

お問い合わせフォームの完成

今回作るお問い合わせフォームでは、入力画面→確認画面→送信完了という流れになります。

そのためPHPのファイルを3つ作っていきます。

  • form.php(入力画面)
  • check.php(確認画面)
  • completion.php(送信完了)

ファイル名はこのようにしていきます。

今回作成するお問い合わせフォームはローカル環境で作成しているため、実際に送信されることはありません。

お問い合わせフォームの項目一覧

お問い合わせフォームを作っていく上で、どのような項目が必要になるか考えていきます。

今回は当サイトのお問い合わせページを参考にして項目を決めていきます

PHPすたでぃのお問い合わせ

  • 名前
  • メールアドレス
  • お問い合わせ内容

上記の3つの項目でお問い合わせフォームを作成していきます。

これらの項目以外にもサイトによってはタイトルや住所、電話番号などを入れる場合もあります。必要な項目を適宜追加してください。

お問い合わせの入力フォームの作成

お問い合わせの項目を入力するフォームを作成していきます。

フォームを作成するには、HTML/CSSを使って作成しています。しかし、デザインの調整やレスポンシブに対応させるのに時間がかかるので、今回はBootStrapを使って入力フォームを作成していきます。

BootStrapの導入方法

BootStrapを導入するにはファイルをダウンロードする方法とCDNの2種類があります。今回はCDNという方法を使っていきます。タグを貼り付けるだけなので、とても簡単です。

下記のコードを<head>と</head>の間に貼り付けてください。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

出来上がると下記のコードになります。

<!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">
	<!--BootStrap CSSを読み込み-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<!--BootStrap JavaScriptを読み込み-->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <title>お問い合わせフォーム</title>
</head>
<body>
</body>
</html>

BootStrapが使える状態にあるか、下記のコードを<body>と<body>の間に貼り付けてGoogle Chromeなどのブラウザで確認してみてください。

<button type="button" class="btn btn-primary">BootStrap</button>

ブラウザで青いボタンが表示されていれば、BootStrapの導入が完了しています。もし何も表示されない場合は、CDNのコードがうまく読み込めていません。もう一度確認してください。

入力画面の作成

BootStrapの導入が終わったら、入力フォームを作成していきます。

今回はこちらで入力フォームの雛形を作成しておきました。BootStrapに慣れていない方はご利用ください。以下のコードは<body>と</body>の間に貼り付けてください。

<div class="container">
<h2>お問い合わせフォーム</h2>
<form>
		<div class="form-group">
    		<label>名前</label>
    		<input type="name" name="name" class="form-control" id="exampleFormControlInput1">
  		</div>

		<div class="form-group">
    		<label>メールアドレス</label>
    		<input type="email" name="email" class="form-control" id="exampleFormControlInput1">
  		</div>
                   
		<div class="form-group">
    		<label>お問い合わせ内容</label>
			<textarea name="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

		<button type="submit" class="btn btn-outline-primary">送信</button>
</form>
</div>

入力データの送信

form.phpで入力したデータをcheck.phpに送信していきます。

データを送信するには、formタグにaction属性とmethod属性をつけます。

action属性には送信先のページファイルを入力します。今回はcheck.phpにデータを送信したいので、action属性にはcheck.phpと書いていきます。

action="check.php"

action属性にcheck.phpを付けることによって、form.phpで入力されたデータをcheck.phpに送信することができます。

method属性にはデータの送信方法を入力していきます。データの送信方法には2種類あり、GETかPOSTです。

2つの違いは、URLにデータ情報が表示されるか、されないかの違いになります。GETで送信した場合、データ情報がURLに表示されてしまいます。POSTで送信した場合、データ情報は表示されません。

GETやPOSTの違いや使い方に関してはこちらの記事で解説しています。

あわせて読みたい
【PHP初心者】GETとPOSTの違いとは?使い方も紹介 PHPでサーバーとやり取りする場合、GETメソッド・POSTメソッドが必須となります。参考書でもGET・POSTは必ず出てきます。検索機能やお問い合わせフォームでもGETメソッ...

ログイン情報やお問い合わせ内容などは表示されるとセキュリティ的に危険なので、POSTで送信していきます。

method="POST"

完成コードは下記のようになります。

<div class="container">
<h2>お問い合わせフォーム</h2>
<form action="check.php" method="POST">
		<div class="form-group">
    		<label>名前</label>
    		<input type="name" name="name" class="form-control" id="exampleFormControlInput1">
  		</div>

		<div class="form-group">
    		<label>メールアドレス</label>
    		<input type="email" name="email" class="form-control" id="exampleFormControlInput1">
  		</div>
                   
		<div class="form-group">
    		<label>お問い合わせ内容</label>
			<textarea name="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

		<button type="submit" class="btn btn-outline-primary">送信</button>
</form>
</div>

※現時点では、送信先のcheck.phpを作成していないので、エラーが発生します。

確認画面の作成

form.phpから送られてきたデータを受け取るためのページを作成していきます。

check.phpというファイルを作成してください。check.phpの保存先はform.phpと同じ場所に保存してください。

form.phpで送信したデータを受け取るには$_POSTを使って受け取ります。

echo $_POST['name属性で指定した値'];

name属性で指定した値を代入することによって、action属性で指定したURL先でデータを受け取ることができます。

$_POSTは連想配列になっています。

array(
    "name" => "PHP太郎",
    "email" => "php@mail.com",
    "content" => "お問い合わせ内容"
)
<?php echo $_POST['name']; ?>
<br>
<?php echo $_POST['email']; ?>
<br>
<?php echo $_POST['content']; ?>

//実行結果
PHP太郎
php@mail.com
お問い合わせ内容

確認画面の完成コード

<!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">
   <!--BootStrap CSSを読み込み-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<!--BootStrap JavaScriptを読み込み-->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <title>お問い合わせ確認画面</title>
</head>
<body>
<div class="container">
    <h2>お問い合わせ</h2>
<form action="completion.php" method="POST">
    <p>下記の内容で送信しますか?</p>
<div class="card">
  <div class="card-header">
    お問い合わせ確認
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">名前→<?php echo $_POST['name']; ?></li>
    <li class="list-group-item">メールアドレス→<?php echo $_POST['email']; ?></li>
    <li class="list-group-item">お問い合わせ内容→<?php echo $_POST['content']; ?></li>
  </ul>
</div>
<button type="submit" class="btn btn-outline-primary">送信</button>
</form>
</div>
</body>
</html>

送信完了画面ページの作成

completion.phpファイルを作成します。保存場所はform.phpやcheck.phpと同じ場所に保存してください。

<!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">
    	<!--BootStrap CSSを読み込み-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<!--BootStrap JavaScriptを読み込み-->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <title>お問い合わせ完了</title>
</head>
<body>
<div class="container">
    <h2>お問い合わせ</h2>
    <div class="card">
  <div class="card-body">
    お問い合わせありがとうございました。
  </div>
</div>
</div>
</body>
</html>
よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる