WordPress：『MW WP Form』コピペで簡単コンタクトフォーム

ワードプレスに『コメント』機能は有っても『お問い合わせページ』は存在しないので、自分で作るかプラグインに頼るかになりますが、デザインにこだわると難易度が上がってしまいます。今回は、丁度作り終えたコンタクトフォームを次回用のメモとして残します。

『MW WP Form』で作りました

コンタクトフォームの定番プラグインと言えば『Contact Form 7』かと思いますが、使用テーマ（isotype）の影響か、どうしても効かないコードが有った為『MW WP Form』を試してみると、あっさりクリア出来たので、こちらを使わせて頂きました。

プラグイン検索で『MW WP Form』と入力すれば入手出来ます。

『有効』にすると、この位置に現れ『新規追加』で投稿ページと同じ形式で作ることが出来ます。
『MW WP Form』は、作ったフォームの一覧表示です。

『Classic Editor』は、入れておいた方が良いですよね。

お問い合わせページ

今回作るのは、こんな感じのフォームです。色替え文字替えで、お好みカスタマイズしてもらえればと思いますが、テーブル形式がお好みであれば、ここでバイバイです(._.)

HTML

上記を『テキスト形式』の編集画面に貼り付けます。

右カラムに『フォーム識別子』と言うコードが出ます。

コピーして固定ページの『テキスト形式』欄に張れば、表示される仕組みです。

追加CSS

続いて『追加CSS』も入力したいので『外観』⇒『カスタマイズ』へ。

『追記CSS』を開きます。

上記コードをコピペで貼り付け『公開済み』ボタンで完了です。

• 『/*　*/』はコメントなので、無くても書き換えても大丈夫です
• 『#』はカラーコードなので、お好みで変更して下さい
• 『txt5』は項目文字の『class名』です

未入力の警告ページ

『必須』項目が未入力のまま『確認画面へ』ボタンを押すと、警告が出るようになっています。『追加CSS』の『必須の調整』から色やサイズの変更が可能です。

郵便番号から自動住所入力

郵便番号を入力すると、自動で住所入力してくれるプラグイン『zipaddr-jp』を入れると、とても便利です。

ちなみに電話番号欄と同様、郵便番号欄も『123-4567』のように入力ボックスを2つに分ける方法もあるのですが、テーマによっては強制的に全幅表示となっている場合は効きません。

全幅を打ち消すコードもありますが、そうすると全てのボックスが小さくなってしまいます。勿論、方法は有るはずですが、複雑になりそうなので今回はスルーしました。

バリデーションルール

『バリデーションルール〛とは、入力欄の内容を制限する為のものです。例えば『電話番号は半角数字で〛というルールにすると、それ以外の文字は弾かれます。

今回は幅広く受け入れられるよう、最小限のルールとしました。

ただし、セキュリティーと言うか、いたずらも含めた範囲でのフィルターは必要なので『お問い合わせ内容』の文面記載を『必須項目』とする為、チェックを入れてあります。

これで文面が記載しなければ、送信出来なくなりました。

メールアドレスについては、連絡が取れなくては話にならない為、優先順位は一番です。よって『必須項目』と『メールアドレス』にチェックを入れました。これで不完全なアドレス形式は除外対象となります。

完了画面メッセージ

お客様がお問い合わせ項目を送信した後、何も表示されないと不安になってしまうと思います。
なので『ちゃんと送れましたよ』というメッセージを出すことが可能です。

ただのテキストですが、例として載せておきます。

自動返信・管理者宛てメール設定

ここは、超重要です。
なぜなら間違って設定すると、お問い合わせ内容が消えてしまうからです。

お客様が『お問い合わせを送信』⇒『送りました確認表示』⇒『お客様へで入力内容確認のメール送信』・『管理者がお問い合わせ内容の確認メール受信』という流れになります。

なので設定しても安心せず、様々な環境でテストをしてみて下さい。

重要なのは、コンタクトフォームの作成時に記載した下記の部分です。

ここを返信メールの {　} の項目と同じにしてあげると、連動して情報が表示されるようになります。

ネットショッピングで、ポチッた後の自動返信メールがこの仕組みなので分かりやすいかと思いますが、項目が多い場合はくれぐれも間違いが無いよう、しつこいぐらいにチェックしましょう。

終わりに

カスタマイズについては、見れば分かる範囲だと思うので触れませんが、サイト構築において少しでも時短に繋がれば幸いでございます。