【WordPressプラグイン】お問い合わせページ作成にはこれ！【Contact Form 7 】

2015/08/29

ブログ開設1ヶ月記念でヘッダーのナビゲーションバーに「当サイトについて」を作ったはいいが、他に表示するコンテンツが無いよ！と2日前に困っていました。
その時の記事：ブログにおける【当サイトについて】【管理人プロフィール】の重要性

そして、「あっ！お問い合わせページ作ればそれっぽい！」と急いで用意することにして、その時凄く役立ったのが、今回紹介する「Contact Form 7」です。

導入から動作確認まで、5分ほどで終わる素晴らしいWordPressプラグインです。

サクッと導入して、お問い合わせページを用意しましょう。

Contact Form 7とは

お問い合わせフォームを簡単に作ってくれて、フォームからの投稿があればWordPressに登録したメールアドレス宛に内容が送信されてくる。そんな素敵なプラグインです。

フォームの内容は柔軟に変更することが出来るので、かなり自由度が高くいろんなものに利用出来そうです。

サンプル

こういうものが簡単に作れて、固定ページや記事、ウィジェット内等に埋め込むことが出来ます。

Contact Form 7のインストール

それではインストール手順です。基本的には普通の他のプラグインと同様です。

管理画面から「プラグイン」→「新規追加」→キーワードに「Contact Form 7」を入力→表示された「Contact Form 7」の「今すぐインストール」をクリック。

インストールが完了したら、「プラグインを有効化」をクリックします。

インストールはこれで完了です。

Contact Form 7の使い方

まずは「Contact Form 7」を使うための画面に移動します。

インストール済みプラグイン一覧にある「Contact Form 7」の「設定」か、管理メニューに追加された「お問い合わせ」をクリックします。

こういう画面が表示されます。

最初から、デフォルト設定で作成された「コンタクトフォーム１」が用意されているので、これを利用しても良いです。

一応、新しいコンタクトフォームを作成する所から説明します。

新しいコンタクトフォームの作成

画面上部の「新規追加」をクリックします。

使用する言語を聞いてるので、言語を指定します。恐らく日本語で作成されると思うので、上部にある「新規作成」をクリックします。

SS_1075

日本語以外に変更する場合は、下の「言語を選択」から対象の言語を選択します。

「新規追加」を選択するとフォームの設定を行う画面が表示されます。

とりあえず「タイトル」だけ付けて保存してみましょう。「タイトル」は必須ではないので付けなくても作成できて、「無題」というコンタクトフォームが作成されます。

これで新しいコンタクトフォームの作成は完了です。

細かい設定は後で説明します。

コンタクトフォームの設置

コンタクトフォームを作成すると、コンタクトフォーム毎に、それぞれショートコードが作成されます。

このショートコードをコピーして、投稿、固定ページ、テキストウィジェットに貼り付けることでフォームが表示されます。

先ほど作った、コンタクトフォームのショートコードが以下でした。

[contact-form-7 id="1081" title="無題"]

これを使って、仮に固定ページで作成します。

ショートコードを貼り付けて、「公開」をクリック！

公開完了！「固定ページを表示する」から確認出来ます(^q^)

SS_1084

もの凄い簡単に例を示しましたが、自分でテストする際はタイトルつけたり、公開状態を非公開にしたりして試しましょう。

設置されたコンタクトフォームの動作確認

先ほど雑に作った固定ページを表示すると、デフォルトのフォームが表示されます。

とりあえず（必須）となっている「お名前」と「メールアドレス」のみ入力して「送信」してみました。

SS_1079

何の内容もないのに、送れてしまいました∑(ﾟДﾟ)ｶﾞｰﾝ

そして、全く内容のないメールも届きました…。これは酷い(‘A`)

せめて「メッセージ本文」は必須にしておかないとですね。

ちなみに、必須となっている部分を入力せずに送信しようとすると、エラーメッセージが表示されて送信されません。

不備のある入力項目の下にエラーが表示される。

SS_1085

送信ボタンの下に、不備があることを案内してくれる表示も出ます。

SS_1086

というわけで、デフォルトでは内容がないままで送れてしまうので、そこくらいは手を入れておきます。

コンタクトフォームのカスタマイズ

コンタクトフォームの一覧から、変更したいフォームのタイトルをクリックするか、カーソルが乗っている時に表示されるメニューの「編集」をクリックします。

フォームタブ

今回はフォームタブの内容の部分を編集していきます。

パッと見て察しの良い方なら気づくと思いますが、インプットタグの後ろに「*（アスタリスク）」が付いていると必須項目になります。
題名とメッセージ本文を必須にしたいので以下の様に変更します。

<p>お名前 (必須)<br />
    [text* your-name] </p>

<p>メールアドレス (必須)<br />
    [email* your-email] </p>

<p>題名(必須)<br />
    [text* your-subject] </p>

<p>メッセージ本文(必須)<br />
    [textarea* your-message] </p>

<p>[submit "送信"]</p>

これで、題名とメッセージ本文を必須項目にすることが出来ました。

見出し部分に（必須）が付いているのはプログラムが判断して付けてくれているわけではないので、自分でフォームの内容で入力しておく必要があります。

他にも色々なインプット要素がありますが、説明すると長くなるので、本家のドキュメントがあるので、そちらをご確認下さい。

公式：Contact Form 7 ドキュメント(日本語)

フォーム以外にもカスタマイズ可能です。詳細は公式ドキュメントが日本語で用意されているので大項目だけ紹介しておきます。