ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

MW WP Formを使ってメールフォームを作る@WordPress

MW WP Formはショートコードを記述してフォームを作成します。

フォーム画面にはHTMLを記述することができるので、フォームのデザインの自由度が高いです。

また、入力画面、確認画面、完了画面をひとつのテンプレートで完結も出来ますし、個別にページを用意することも出来ます。(バリデーションエラー時の画面も別に設定出来ます)

さらに、バリデーションのルールが豊富に用意されているのも大変便利です。

公式マニュアル plugins.2inc.org

インストール

WordPressの管理画面から「プラグイン>新規追加」へ。

f:id:showjinx:20160625143515p:plain

プラグインを追加」へ遷移し、右上部にある検索フォームに「MW WP Form」と入力して検索します。

f:id:showjinx:20160625143542p:plain

するとこのようにヒットするので、「今すぐインストール」をクリックします。

f:id:showjinx:20160625143605p:plain

このとき、右下に「お使いのバージョンのWordPressではテストされていません」と出る場合がありますが、これはMW WP Formに限らず注意してください。今回はこのままインストールしちゃいます。(他の環境で使っていて、一部軽微な表示上の不具合は確認してますが、動作には問題ないことも確認しているので)

インストールが済むとこのページに遷移しますので、ここで 「プラグインを有効化」をクリックします。

これでMW WP Formが使える状態になりました。インストール済プラグインのリストに加わっていることが確認出来ます。

f:id:showjinx:20160625143627p:plain

このインストール方法は管理画面からですが、公式サイトの配布元URLからデータをダウンロードしてご自分でFTPからアップロードして有効化することも出来ます。

フォームを作ってみる

f:id:showjinx:20160625143727p:plain

管理画面の左のメニューから「MW WP Form>新規追加」を選んで進みます。新規にフォームを作る際にはここから始めます。既存のフォームは「MW WP Form」をクリックすると、一覧画面に遷移します。

フォームの作成画面です。

f:id:showjinx:20160625143746p:plain

フォームタイトル

これはユーザー側には表示されないので、管理者がわかりやすいものをつけておけばいいです。

フォーム(項目)

フォームに項目を追加します。

ここではお問合せフォームでよくある

  • お名前
  • よみがな
  • 住所
  • 電話番号
  • メールアドレス
  • メールアドレス(再入力)
  • お問合せ内容

で作ってみます。

フォーム画面の上のほう、「メディアを追加」ボタンの下にある「選択してください」から選びます。

f:id:showjinx:20160625143841p:plain

選択部分をクリックするとこのように挿入するフォームタグのための項目が出ますので、フォームの項目に適切なものを選んでから「フォームタグを追加」で編集画面に挿入していきます。

f:id:showjinx:20160625143902p:plain

まずは名前から。名前はテキストフィールドを使います。(複数行あったほうがいいものはテキストエリア、それ以外のフリーテキストはテキストフィールドが妥当だと思います)

f:id:showjinx:20160625143926p:plain

必須なのは「name」部分だけです。これがフォーム要素のname属性になります。日本語でも、英語でも構いません。

idやclass名等、その他の項目は必要に応じて設定します。

この例ではnameとplaceholderだけ入力してみます。そして、右下の「Insert」ボタンをクリックします。

f:id:showjinx:20160625143950p:plain

すると編集画面にフォームタグ(ショートコード)が挿入されます。

f:id:showjinx:20160625144013p:plain

この要領で他の項目も追加していきます。

f:id:showjinx:20160625144032p:plain

これだけだとフォームの部品だけが表示されるので、HTMLでレイアウトします。 必要に応じてCSSによるデザイン制御も行います。(その際には項目にidやclassを割り当てます)

table要素を使ってこのようにしてみました。

<table class="inquiry">
    <tr>
        <th>お名前</th>
        <td>[mwform_text name="名前" placeholder="お名前を入力してください"]</td>
    </tr>
    <tr>
        <th>よみがな</th>
        <td>[mwform_text name="よみがな" placeholder="よみがなを入力してください"]</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>[mwform_text name="住所" placeholder="お住まいの住所を入力してください"]</td>
    </tr>
    <tr>
        <th>電話番号</th>
        <td>[mwform_tel name="電話"]</td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td>[mwform_email name="メールアドレス" placeholder="メールアドレスを入力してください"]</td>
    </tr>
    <tr>
        <th>メールアドレス(確認)</th>
        <td>[mwform_email name="メールアドレス確認" placeholder="確認のため再度入力してください"]</td>
    </tr>
    <tr>
        <th>お問合せ</th>
        <td>[mwform_textarea name="お問合せ内容" rows="50" placeholder="お問合せ内容を入力してください"]</td>
    </tr>
</table>

あ、大事なものを忘れてました。確認や送信ボタンがありませんね。

この例では入力、内容確認、送信(完了)という流れにします。

f:id:showjinx:20160625144112p:plain

「確認・送信」フォームタグを選び

f:id:showjinx:20160625144136p:plain

確認ボタンに表示する文字列と、送信ボタンに表示する文字列も入力。

[mwform_submitButton name="確認" confirm_value="送信内容を確認する" submit_value="送信する"]

最終的にはこのようになりました。

<table class="inquiry">
    <tr>
        <th>お名前</th>
        <td>[mwform_text name="名前" placeholder="お名前を入力してください"]</td>
    </tr>
    <tr>
        <th>よみがな</th>
        <td>[mwform_text name="よみがな" placeholder="よみがなを入力してください"]</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>[mwform_text name="住所" placeholder="お住まいの住所を入力してください"]</td>
    </tr>
    <tr>
        <th>電話番号</th>
        <td>[mwform_tel name="電話"]</td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td>[mwform_email name="メールアドレス" placeholder="メールアドレスを入力してください"]</td>
    </tr>
    <tr>
        <th>メールアドレス(確認)</th>
        <td>[mwform_email name="メールアドレス確認" placeholder="確認のため再度入力してください"]</td>
    </tr>
    <tr>
        <th>お問合せ</th>
        <td>[mwform_textarea name="お問合せ内容" rows="50" placeholder="お問合せ内容を入力してください"]</td>
    </tr>
</table>

<div class="entry_btn">[mwform_submitButton name="確認" confirm_value="送信内容を確認" submit_value="送信する"]</div>

完了画面に表示するメッセージ

フォームの編集画面下にある「完了画面メッセージ」に送信完了時のメッセージを入力します。 この編集画面でもHTMLが使えます。(ビジュアルモードも)

f:id:showjinx:20160625144325p:plain

MW WP Formでは入力画面の他に確認画面、完了画面に固有のURLを割り当てたり、固有の固定ページを割り当てる事ができますが、この例では出来るだけ簡素に作る方向で進めます。

この「完了画面メッセージ」を使えば、お問合せフォームに必要なのは

・フォーム(MW WP Formによる)
・フォームを表示するテンプレート(固定ページ)

だけで済みます。(入力画面、確認画面、完了画面すべてを同一のテンプレートで表示)

URL設定

確認画面、完了画面、エラー画面で固有のURLを割り当てる場合に使用します。 この例では使用しません。(また別の機会にこれを使う例を紹介します)

f:id:showjinx:20160625144627p:plain

バリデーションルール

ここでバリデーションルールを指定します。

必須項目等、各フォーム項目に対して細かく設定出来ます。(name属性の値で指定します)

f:id:showjinx:20160625144807p:plain

「バリデーションルールを追加」ボタンをクリックすると、この画面になりますので「バリデーションを適用する項目」に対象の要素の属性(nameの値)を指定します。必須であれば必須項目にチェックを入れます。

その他にも半角英数字でないと認めないとか、カタカナでないと認めないとか、メールアドレスに適切な文字列しか認めないとか、細かくルールが設けられています。

バリデーションを適用したい項目ごとにこの作業をしていきます。

確認用のメールアドレスは、先に入力したメールアドレスと比較して一致するかで判断しますので、このようにします。

f:id:showjinx:20160625144830p:plain

この例ではすべて必須項目とし、このようにバリデーションルールを作りました。 (このキャプチャ画像ではたたまれてますが、右端の▼をクリックすると展開して内容が確認できます)

f:id:showjinx:20160625144852p:plain

フォーム識別子

編集画面の右上にある(公開ブロックの下)「フォーム識別子」は、このフォームに使用するテンプレート(固定ページ)に記述するので、固定ページを作るときにこの文字列をコピーして使用します。

f:id:showjinx:20160625144918p:plain

自動返信メール設定

お問合せを送信した方に自動で送信される自動送信メッセージについての設定です。

件名、送信者名、送信元メールアドレス、本文が設定できます。

f:id:showjinx:20160625150649p:plain

本文では任意のメッセージと、送信内容はフォームの各項目ごとにnameで指定した値でこのように中括弧でかこって記述します。

【お名前】
{名前}

【よみがな】
{よみがな}

【ご住所】
{住所}

【電話番号】
{電話}

【メールアドレス】
{メールアドレス}

【お問合せ内容】
{お問合せ内容}

==================署名
==================

本文の下の「自動送信メール」には自動送信メールの宛先を指定するので、フォームの「メールアドレス」に指定したもののnameの値を入力します。この例では「メールアドレス」になります。(かっこは不要です)

ここの指定を忘れると当然ですが送信者に自動送信されないので注意です。

f:id:showjinx:20160625145055p:plain

管理者宛メール設定

こちらは管理者側へ送信される(フォームから送信された内容)設定です。

送信先(フォームで送られた内容を受け取る)メールアドレスと、cc、bccが指定出来ます。

件名、送信者名も任意のものを指定できます。

本文は先の「自動返信メール設定」のものを流用すればいいかと思います。

*本メールは自動送信です。

ホームページから
「お問合せ」が送信されました。

ご担当者様、ご対応よろしくお願いいたします。

【お名前】
{名前}

【よみがな】
{よみがな}

【ご住所】
{住所}

【電話番号】
{電話}

【メールアドレス】
{メールアドレス}

【お問合せ内容】
{お問合せ内容}

設定

ここではオプション項目を設定します。

この実装例では使用しませんが、URL引数を有効にすると、WordPressの投稿を取得でき、投稿の内容(タイトルや任意のカスタムフィールドの値など)をフォームに引き渡すといったことが出来ます。

問い合わせをデータベースに保存する場合には、保存オプションを使用します。

その他は私は使用したことがないので割愛します。

ここまできたらひとまずフォームについては完成ですので、画面右上の「公開」をクリックして保存します。

テンプレートを用意する

お問合せフォームを表示するためのテンプレートを固定ページで用意します。

先にテンプレート.phpを作ります。環境によりますが、すでにindex.phpはあるはずなので、それを複製して流用してみます。

ここでは複製したテンプレートをform.phpとリネームした上で

固定ページを作るときにテンプレートを指定出来るように冒頭にTemplate Nameをつけておきます。

先に用意したフォームの内容を表示するのはclass名「form」の内容になります。

<?php /** * Template Name: 共用フォーム画面 */
get_header(); ?>

    <div class="side col-12 col-4-m col-4-l">
        Sidebarの内容
    <!-- / .side --></div>
    <div class="main col-12 col-8-m col-8-l">

        <div class="form">
            <h1><?php the_title(); ?></h1>
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); /* ループ開始 */ ?>
                    <?php the_content(); ?>
                <?php endwhile; ?>
                <?php else : ?>
                <p>表示する記事はありませんでした。</p>
            <?php endif; ?>
        <!-- / .form --></div>

    <!-- / .main --></div>
<!-- / .contents --></div>

<?php get_footer(); ?>

固定ページを用意する

フォームに使用するテンプレート(form.php)を用意したので、管理画面からこれを使用する固定ページを作成します。

管理画面のサイドバーにあるメニューから「固定ページ>新規追加」を選びます。

f:id:showjinx:20160625145212p:plain

固定ページのタイトル、パーマリンク(ここはパーマリンク設定をどうしてるかで変わってきますが)、適用テンプレートの指定をしてから「下書きとして保存」します。

f:id:showjinx:20160625145231p:plain

ここでフォームにいったん戻ります。

MW WP Formで作成したフォームの「フォーム識別子」を管理画面メニュー「MW WP Form」から確認。この識別子をコピーしてから固定ページ(お問合せフォーム)に戻ります。

f:id:showjinx:20160625145250p:plain

固定ページ(お問合せフォーム)の編集画面を開き、編集エリアにフォーム識別子をペーストして、公開ブロックで「公開」をクリックします。

f:id:showjinx:20160625145309p:plain

これで完成です。

フォーム入力画面

実際に訪問者に表示されるページを表示するとこんな出来上がりです。 (必要最低限のCSSしか指定してませんが)

f:id:showjinx:20160625145401p:plain

エラー画面

すべて必須項目にしているので、この状態で「送信内容を確認」とすると以下のようにアラートメッセージがでます。

f:id:showjinx:20160625145439p:plain

確認画面

必要な項目をすべて入力するとこの状態に。(ここで送信または入力画面にもどって内容を修正も出来ます)

f:id:showjinx:20160625145506p:plain

送信完了画面

送信すると「完了画面メッセージ」で設定したメッセージが表示されます。(URLは固有のものを指定していないので、入力画面、確認画面、完了画面、すべて同一です)

f:id:showjinx:20160625145534p:plain

自動送信メール

こんな感じです。フォームに入力された情報以外は適宜テキストを書き換えることで親切、みやすくできます。サイト、サービスの署名なんかも入れるといいでしょう。

問い合わされた方へのメール f:id:showjinx:20160625145632p:plain

管理者へのメール f:id:showjinx:20160625145658p:plain

以上です。

MW WP Formは本当に高機能、便利で私もここ1年くらいはほぼこのプラグインを採用しています。開発者さんも親切で、フォーラムに質問を書き込むとアドバイスや回答をいただいて、カスタマイズにも大変役に立っています。

そのカスタマイズについてはまた別の機会に投稿していく予定です。