ワードプレスでお問い合わせを設定するなら「Contact Form 7」プラグインを使ってみよう！

ワードプレスでブログを運営している方で、
お問い合わせフォームを設置したい場合、
独自のメールフォームをお持ちでない場合は
ワードプレスのプラグインを使って簡単にフォームを
設置することが出来ます。

「Contact Form 7」というプラグインを使います。

「Contact Form 7」を使うことによって、
簡単にワードプレスブログにお問い合わせページを設定出来ます。

今回は、「Contact Form 7」の設定の方法をご紹介させて頂きます。

ワードプレスのプラグインのインストール方法については、
以前更新した記事「【初心者必見！】WordPressプラグインのインストール方法」を
参考にしてみて下さい。

■Contact Form 7の設定について

「Contact Form 7」プラグインをインストールすると、
ワードプレスの管理画面の左側のメニューに
「お問い合わせ」のメニューが表示されますので、クリックします。

「Contact Form 7」プラグインをインストールした時点で
既に「コンタクトフォーム１」というページが作成されています。

「新規追加」で作成しても良いですし、
この「コンタクトフォーム１」を編集して使うという形でも
良いかと思います。

今回は既に用意されている「コンタクトフォーム１」を編集して
設定を行いたいと思います。

「コンタクトフォーム１」のタイトルにカーソルを当てると
「編集」というメニューが出るので、クリックします。

そうすると、この様な画面になります。
画面表示はプラグインのバージョンによって変わってくるかも
しれませんが、記事を書いている時点でのバージョンでは
このような画面になってます。

上から順番に見て行きたいと思います。

①フォームの名前

デフォルトでは「コンタクトフォーム１」になってますが、
変更したい場合はこちらで名前を記入して右側にある
「保存」ボタンをクリックします。
保存ボタンは下の方にもあるので、そちらをクリックしてもOKです。

このフォーム名は、管理画面内で表示されるだけですので、
ご自身で分かりやすい名前に設定すると良いでしょう。

②設定項目タブ

・フォーム
・メール
・メッセージ
・その他の設定

と４つの項目に別れていますので、
それぞれ設定していく形になります。

では、この４つの項目を順番に見て行きましょう。

■フォーム

フォームで使いたい項目の設定になります。

既に基本的な設定はされている状態ですが、
追加したい項目があれば、必要な項目のボタンをクリックします。

例えば、「メールアドレス」のボタンをクリックすると
この様な設定画面が表示されます。

必須項目にしたい場合はチェックを入れたり、
後はCSS等の知識がある方はIDやクラス属性を入力することも出来ます。

Akismetにチェックを入れるとAkismetプラグインの設定がされている場合は
スパムメールを減らすことが出来るようです。

プレースホルダーは、デフォルト値に入れた文字を
入力欄に表示させることが出来ます。

この様に、入力例を表示させることが出来ます。

フォーム入力欄はHTML形式になっているので、
pタグなどを使って調整すると良いでしょう。

■メール

こちらはお問い合わせの受取に関する設定画面です。

・送信先
・送信元
・題名
・追加ヘッダー
・メッセージ本文

送信先

お問い合わせのメールを受け取るメールアドレスを設定します。

送信元

wordpress@のダミーアドレスが入っていますが、
管理しやすい名前やメールアドレスに変更しても良いでしょう。

題名

メールの件名が表示されます。

追加ヘッダー

受け取るメールの返信先を指定します。デフォルトの設定のままで
問題はないと思います。

メッセージ本文

フォームの部分で設定した項目が表示されるよう設定しましょう。
受け取った際に見やすいようにご自身で調整すると良いでしょう。

メール (2)

ここにチェックを入れると、自動返信メールの設定が出来ます。

・「送信先」は[your-email]にします。そうしないとお問い合わせしてくれた人に、
　自動返信メールが届かなくなります。
・「送信元」はあなたの名前を入れればOKです。
・「題名」は自動返信と分かるように「お問い合わせありがとうございます」の
　ような感じにすると良いでしょう。
・「メッセージ本文」はお問い合わせ内容をそのまま載せると良いでしょう。

■メッセージ

フォームで不備などがあった場合や無事に送信できた際に
表示される文言です。

特にいじらなくて大丈夫だと思います。

送信ボタンを押して無事に送信されると
このようなメッセージが表示されます。

■その他の設定

例えば、お問い合わせが終わったら自動的に指定したページなどに
移動させたい場合、その他の設定の部分に下記のコードを
設定して下さい。
「on_sent_ok: “window.location.href =’http://◯◯◯.com’;”」

サンキューページのようなものを設定したい場合などに
使えると思います。

■フォームを設置する

フォームの編集の上の方に
フォームのコードが表示されていると思いますので
それをコピーします。

固定ページでお問い合わせのページを作成します。
そして、そこにコピーしたフォームのコードを
貼り付けます。

記事を公開して、表示など問題ないか確認します。
実際にフォームの動作も問題ないか、
メールアドレスなどを打ち込んで送信して確認してみましょう。

■まとめ

ワードプレスサイトを運営しているのであれば、
お問い合わせのフォームを気軽に設定することが出来る
「Contact Form 7」プラグインは必須と言っても良いくらい
良く使われているプラグインです。

もちろん、有料のフォームなどを使われている方には
必要ないものかもしれませんが、
そういうサービスを使っていない方は、まずは
「Contact Form 7」を試してみると良いと思います。

• Tweet
• 
• 

• 
• 
•