Contact Form 7 - 問い合わせフォームの設置

公開日:2011年2月7日
最終更新日:2013年12月4日

Contact Form 7はWordPressで問合せフォームを設置する為のプラグインです。簡単に設置でき、カスタマイズも可能なため大変人気があります。

Contact Form 7のインストール

Contact Form 7の設定

サイドバーにお問合せという項目が出来ています。

フォーム欄

問合せフォームに表示される項目になります。「*」付いているものは必須項目となります。タグの作成から色々な項目が追加できます。

入力フォームの幅などを調整したい場合には、以下のように記述します。
[email* your-email 35x30""]
35がサイズで、30が最大の文字数です。

現行バージョンでは、この方法で入力フォームの調整ができなくなったようです。

.wpcf7-form input{width: 450px !important;}
.wpcf7-form textarea{width: 450px !important;}
.wpcf7-form .wpcf7-submit{width: 80px !important;}

CSSにこのように追加してサイズを調整するのが良いかもしれません。上から、「名前・メアド・題名」「本文」「送信ボタン」のサイズを指定しています。

メール欄

フォームより送信されるメールの内容となります。件名やメッセージ本文は分かりやすいものに変更した方が良いでしょう。

メッセージ欄

image11

メッセージが正しく送信された時や、失敗した時などに表示されるメッセージです。そのままの文章で良いと思いますが、気になる人は変更してもよいでしょう。

コードを貼る

設定が完了し保存したら、問合せページを作成し指定のコードを貼ります。

[contact-form-7 id="2781" title="コンタクトフォーム 1"]

一番上にこういったコードが表示されていると思いますので、コピーします。

お問い合わせページを作成し、本文にコードを貼り付けます。普通の記事と同様に前後に文章を入れることも可能です。

問合せページを作成したら、実際に問合せしてみてメールが届くかを確認しておきましょう。

Contact Form7でAkismetを使う

  1. Akismetを有効化する
  2. Contact Form 7 の管理画面より、フォームの項目を編集する

image12

名前の入力タグに akismet:author オプションを追加する。
【例】[text* your-name akismet:author]

メールアドレス入力タグに akismet:author_email オプションを追加する。
【例】[email* your-email akismet:author_email]

URLの入力項目タグに akismet:author_url オプションを追加する。
【例】[text your-url akismet:author_url]

Akismetが有効化されていて、かつ1つ以上の akismet: オプションが指定されていれば、Contact Form7 は送信者の入力内容を Akismetのサーバーに送ります。

Akismetがスパムと判断した場合、Contact Form7はメールの送信を中止し、フォーム下にエラーメッセージを表示します。

Contact Form 7を使ってコンバージョン設定

サンキューページを作る

送信完了後に表示するサンキューページを作成します。記事として作成してもページとして作成してもOKです。パーマリンクは分かりやすいURLに変更しておきましょう。

当サイトのサンキューページです。「http://www.seotemplate.biz/thanks/」というURLでページとして作成しています。

設定

Contact Form 7の設定画面の一番下にあるその他の設定にコードを追加します。

on_sent_ok: "location.replace('サンキューページのURL');"

当サイトの場合以下のようになっています。

on_sent_ok: "location.replace('http://www.seotemplate.biz/thanks/');"

Googleアナリティクスのコンバージョン設定

Googleアナリティクスにログインし、コンバージョン設定として先ほど作成したサンキューページのURLを入力します。

Googleアナリティクスのコンバージョン設定方法の解説は、以下のページをご覧ください。

⇒Googleアナリティクスのコンバージョン設定
⇒Googleアナリティクスのカスタムレポート設定

公開日:2011年2月7日
最終更新日:2013年12月4日

カテゴリー:WordPressのプラグイン

コメント


このページの先頭へ