WordPressでお問い合わせフォームを自作する

wordpress
404 Not Found - Qiita - Qiita
qiita.com

WordPressでお問い合わせフォームを自作する

PHPWordPressHTML5CSS3

はじめに

初めまして。
Webサイトの制作をするにつれてPHPであったりJavaScriptであったりと自分の作成したプログラムがゴチャゴチャしてきたのでQiitaにて、まとめていこうと始めました。

初めての投稿なので見づらい点等あるかと思いますが「備忘録」程度のスタンスで書いていくつもりなのでご了承を・・・

お問い合わせフォームを自作する必要性

普通にフォームを配置したいだけであれば Contact Form 7 であったり、MW WP Form 、はたまた Googleフォーム へリンクを飛ばす
なんてやり方があると思うんですが、

  • デザインがページのイメージに合わない
  • 確認画面を挟みたい
  • プラグインを無駄に増やしたくない

等の観点からプラグインでの導入をしたくない時ってありますよね？

今回作ったコードでは

  • Gmailへメール送信を行う
  • SMTPでSSLを使用して送信する

といった観点から WP Mail SMTP というプラグインを使っているので3つ目のニーズには応えられていませんが、条件を変えることでプラグインなしでも実装可能です。

実装手順

  1. PHPファイルの作成（必要に応じて確認ページ、送信完了後ページも作成）
  2. 固定ページにテンプレートとして読み込ませる
  3. ※SSLでの送信を行う際はプラグイン WP Mail SMTP をインストール

実装

PHPファイルの作成

内容入力画面

フォームに限った話ではないんですが、先にどういった入力項目を用意するのかを定義しておくと作業がスムーズにいきやすいです。
今回はサクッと作れそうな感じで

  • 名前 *
  • メールアドレス *
  • 件名
  • 内容 *

で作っていこうと思います。 *印は入力必須で作成していきます。

サクッとformをマークアップしました。

contact.php
<?php
session_start();
/* Template Name: Contact */
?>

<form action="【次のページへのリンク*1】" method="post">
    <input type="text" name="your_name" required>
    <input type="email" name="your_mail" required>
    <input type="text" name="your_subject">
    <textarea name="your_message cols="100" lows="15" required><textarea>

    <input type="submit" name="your_submit" value="確認画面へ">
</form>

*1
WordPressにてformのaction属性に次ページへのリンクを挿入する際の注意点なんですが、サーバー上でPHPファイルを実行するときと違い、WordPress上のページはすべて自動的にURLが補完されてしまうようです。

なので自分で固定ページを作るときなどは次のような記述をすると楽だったりします。
<?php echo get_permalink( get_page_by_title("固定ページの名前") ); ?>
簡単に説明すると固定ページの名前からページを取得し、そのリンクをechoしようっていう作戦です。

あとは必要に応じて(確認ページを設けてる際は特に)sessionを用いて1度入力された情報は自動で入力されるような処理をしておけばいいんじゃないでしょうか。

余談ですが、WordPressでformを設置する際の注意点としてinputのname属性の名前のつけ方があります。というか結構ハマりやすいポイントです。
例えば名前を入力するinputを作った際にはname属性にそのまま”name”を与えることが多いと思うんですが、WordPressだとこれ、動きません。
エラーを何も吐かずに404NotFound落ちします。。

というのもWordPressはいくつかの予約語があり、その中に”name”が含まれているからみたいです。
予約語の一覧は WordPressCodex にて記載されていますので参照してみてください。

脱線しました。

確認画面

先ほどのフォームでPOSTメソッドにて送信された内容をPHPで受け取って画面上に表示します。
修正を押せば前の画面へ戻り、送信を推せば次のページへ行く、よくあるやつですね。
書くまでもないと思いますが念のため貼っておきます。

confirm.php
<?php 
session_start();
/* Template Name: Confirm */

if(isset($_POST['your_submit'])) {
    $_SESSION['your_name'] = $_POST['your_name'];
    $_SESSION['your_mail'] = $_POST['your_mail'];
    if($_POST['your_subject'] != ""){
        $_SESSION['your_subject'] = $_POST['your_subject'];
    }else{
        $_SESSION['your_subject'] = "件名なし";
    }
    $_SESSION['your_message'] = $_POST['your_message'];
    $_SESSION['your_submit'] = $_POST['your_submit'];
}
?>

<table rules="all" border="border">
    <tr>
        <th>お名前</th><td><p><?php echo htmlspecialchars($_SESSION['your_name']); ?></p></td>
    </tr>
    <tr>
        <th>メールアドレス</th><td><p><?php echo htmlspecialchars($_SESSION['your_mail']); ?></p></td>
    </tr>
    <tr>
        <th>件名</th><td><p><?php echo htmlspecialchars($_SESSION['your_subject']); ?></p></td>
    </tr>
    <tr>
        <th>お問い合わせ内容</th><td><p><?php
            $message = htmlspecialchars($_SESSION['your_message']);
            $message = str_replace(" ", "&ensp;", $message);
            $message = str_replace("　", "&emsp;", $message); 
            echo nl2br($message);
        ?></p></td>
    </tr>
</table>

<center><span>
    <button class="submit" type="button" onclick="location.href='【お問い合わせへのリンク*1】'">修正</button>
    <button class="submit" type="button" onclick="location.href='【確認画面へのリンク*1】'">送信</button>
</span></center>

*1 リンクへの注意点は先ほどと同じなので割愛します。
このページでは受け取った値を表示するので適宜 htmlspecialchars() メソッドで文字の置き換えをしておくといいと思います。

あとは入力された内容を崩さずに出力するために空白文字を &ensp; や &emsp; へ文字置換をして最後に改行表示のために nl2br() を使いechoをかけます。

送信完了画面

やっと本題に近い部分です。
といってもWordPressにはもとよりメールを送るためのメソッドとして wp_mail() が用意されていますので、特段難しいことはしていません。

complete.php
<?php 
session_start();
/* Template Name: Complete */

if(isset($_SESSION['your_submit'])) {
    $to = ''; //【メールアドレス】

    //ここでは 名前, 件名
    $subject = $_SESSION['your_name'].', '.$_SESSION['your_subject']; //【タイトル】
    $message = $_SESSION['your_message']; //【本文】

    wp_mail($to, $subject, $message);
    session_destroy();
?>

といった形で実装が可能です。
ただ、このままだとおそらく通常のSMTP(25)での送信で暗号化はされないと思います。
SSL(465)での送信をしたい場合はこの次のプラグイン導入も合わせて行ってください。

$message の変数に入れている内容はヒアドキュメントなどを用いてソースコード側で送る内容に近い状態で編集も可能です。
その際は $_SESSION に格納した値をうまい感じに使うのがいいと思います。
返信しやすいように入力されたメールアドレスを出力したり、、

あとは wp_mail() を if で囲むことで送信成功 / 失敗 で表示画面を振り分けることも可能です。

if(wp_mail($to, $subject, $message)) {
    //成功時の記述
} else {
    //失敗時の記述
}

WP Mail SMTP のインストール

  1. ダッシュボードよりプラグインに移動して WP Mail SMTP をインストール
  2. ダッシュボードの設定メニューの中に WP Mail SMTP が追加される
  3. SMTP設定に SMTPホスト: smtp.gmail.com, SMTPポート: 465 を設定
  4. ※Gmailにてメールのやり取りをする場合はこのへんのサイトを参考に設定

あとは固定ページを作成、アップロードした各テンプレートを設定してPHP側ではリンク先として固定ページの名前を入力すれば設定は完了です。

さいごに

今回各ページに分けてSESSIONにてデータの受け渡しをしているのでページごとにCSSを記述すれば
contact-example
こういったアローデザインで現在の状況を可視化できます。

備忘録程度とは言いましたが、結構脱線したりと書きまくってしまいました。
分かりにくい点が多々あるとは思いますが、これからもいろんなジャンルでメモっていくと思うのでよろしくお願いします。。

また、簡易的に入力しているので実際の運用では向いていない書き方があるかもしれません。（SESSIONあたりのクッキー寿命とか、、）

なにか変な部分あるぞって場合はどんどん突っ込んでください！
最後まで閲覧ありがとうございました。

No tags for this post.
タイトルとURLをコピーしました