Bootstrap3とPHPでメールフォームを作る方法

Pocket

CSSの記述量を減らし、簡単にレスポンシブサイトを実装できるBootstrap。BootstrapのコンポーネントでFormパーツも簡単に作ることができますが、PHPなどは用意されていないので実際に機能するメールフォーム(お問い合わせフォーム)にはなりません。

そこで、この記事ではBootstrap3と無料のPHPプラグインを使って実際に動作するメールフォームを作ってみます。

Botstrap3とPHPで動作するメールフォームを作る

Bootstrap3でお問い合わせフォームを作る

まずはBootstrapを使ってフォームを作ります。Bootstrapの使い方やフォームに関しては以下のページを参考にしてみて下さい。

Bootstrapを使えば通常のHTMLフォームにクラス名を付け加えるだけで綺麗な見た目のフォームになります。ここではお問い合わせフォームを想定して作ってみます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
  <div id="page">
    <div class="container">
      <h1>Bootstrap & PHP Mail Form</h1>
      
      <div class="row">
        <div class="col-sm-9">
          <form action="#" class="form-horizontal">
            <div class="form-group">
              <label for="input-name" class="col-sm-2 control-label">お名前</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="input-name" placeholder="お名前" required="required">
              </div>
            </div>
            <div class="form-group">
              <label for="input-mail" class="col-sm-2 control-label">メールアドレス</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="input-mail" placeholder="メールアドレス" required="required">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">ご用件</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option value="">選択してください</option>
                  <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
                  <option value="ご意見・ご感想">ご意見・ご感想</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">お問い合わせ内容</label>
              <div class="col-sm-10">
                <textarea class="form-control" rows="5" required="required"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">送信</button>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div><!-- /container -->
  </div><!-- /page -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

名前、メールアドレス、ご用件のセレクト、内容のシンプルなフォームです。また、自動的に必須項目をチェックしてくれるrequiredを入れてみました。ブラウザで表示すると以下のようになります。
BootstrapとPHPでメールフォームを作る

作ったフォームにPHPプラグインをセットする

次に先ほど作ったHTMLフォームにPHPをセットして、実際に機能するようにします。今回はメールフォームを簡単に実装するため、以下のプラグインを使用しました。

MailForm01
phpform

設定はとっても簡単。PHPに関する知識は一切必要ありません。以下の設定を行えばとりあえず動きます。

  1. formタグにmethod="post"action="mail.php"を追加
  2. 各フォームパーツにname="パーツ名"を追加
  3. mail.phpで送信先(管理者用)メールアドレスを設定
  4. [トップへ戻る]のURLを設定

先ほどのフォーム部分を以下のように書き換えます。
HTML

<form method="post" action="mail.php" class="form-horizontal">
  <div class="form-group">
    <label for="input-name" class="col-sm-2 control-label">お名前</label>
    <div class="col-sm-10">
      <input name="お名前" type="text" class="form-control" id="input-name" placeholder="お名前" required="required">
    </div>
  </div>
  <div class="form-group">
    <label for="input-mail" class="col-sm-2 control-label">メールアドレス</label>
    <div class="col-sm-10">
      <input name="Email" type="email" class="form-control" id="input-mail" placeholder="メールアドレス" required="required">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">ご用件</label>
    <div class="col-sm-10">
      <select name="ご用件" class="form-control">
        <option value="">選択してください</option>
        <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
        <option value="ご意見・ご感想">ご意見・ご感想</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">お問い合わせ内容</label>
    <div class="col-sm-10">
      <textarea name="お問い合わせ内容" class="form-control" rows="5" required="required"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">送信</button>
    </div>
  </div>
</form>

さらにmail.phpを以下のように設定します。設定するのは、管理者用メールアドレスとトップページのURLだけ。
mail_php_—_test

BootstrapとPHPで作ったメールフォームを使ってみる

では実際に使ってみましょう。ここまでで作ったファイルをサーバーにアップロードして。ページを開きます。適当に文字を入力して送信。
bootstrap-form2

すると内容確認ページが表示されるので、送信するを押します。
bootstrap-form3

mail.phpが正しく設定されていれば以下のようなメールが届きます。
bootstrap-form4

以上でBootstrapを使ったメールフォームの作成は完了。今回使用したPHPプラグインではさらに細かい設定もできます。機能や特徴については、プラグインのページを確認して下さい。

Bootstrapやここで紹介したような便利なプラグインを使えば数分できちんと動かせるお問い合わせフォームを作ることができます。どんなサイトにも簡単に設置することができるので、さくっと作ってしまいましょう。