Contact Form 7 を有効活用しよう

LINEで送る
Pocket


ワードプレスのプラグインに、「Contact Form 7」という便利なプラグインがあります。
SNSと違って、ブログなどで発信しているとサイト管理者側からの一方通行になりがちです。

しかし「Contact Form 7」をうまく活用すると、管理者と閲覧者、双方のやり取りが可能となります。
カスタマイズがしやすいプラグインですので、ぜひ活用してください。

 

Contact Form 7-プラグイン

概要
「Contact Form 7」を使って、ワードプレスの固定ページにこのようなお問い合わせフォームを設置することができます。
サイト管理者に対して閲覧者がコンタクトを取りた場合、このフォームからメッセージを送信することができます。
メールアドレスを設定しておくことで、好きなアドレス宛にそのメッセージは送信され、閲覧者とのコンタクトが可能となります。

contact18

 

 

1.プラグインをインストールする

過去記事参照 ⇒ WordPressにプラグインを導入していく

 

2.コンタクトフォームを設置する

2-1.タイトルをつける

①インストールした「Contact Form 7」は、ワードプレスの『お問い合わせ』の欄に表示されているのでクリック

contact1

 

②新規追加をクリック

contact2

 

③デフォルトの言語は日本語なので、そのままもう一度新規追加をクリック

contact3

 

④自身で管理しやすいタイトルをつけておく

contact6

 

 

2-2.固定ページに表示する内容を編集する

下の画像はデフォルトの状態のものです。
赤枠タグの作成から、様々な編集を加えることができます。
まずはデフォルトのままで十分なので、今回はタグの作成は省きます。後日タグの作成についての詳細を記載したいと思います。

デフォルト
contact7

編集後 

contact22

 

今回行った作業
①アップロードボタンの追加
contact21

contact24

・ファイルサイズの上限(バイト)(オプション)
⇒送信されるファイルのサイズに制限をかけておきます。今回は1,048,576バイト=1MBにしました。
・受け入れ可能なファイル形式(オプション)
⇒ファイル形式を入力し、『|』で区切ってください。スペースは必要ありません。
今回はjpg,png画像とPDFファイル、エクセルにしました。

赤線にコードが生成されますので、フォーム部とメール部に貼り付けます。

 

②『上記の内容で送信します』のチェックボックスの追加
青枠にあるように、↓をそのまま貼り付けてください。
[checkbox* use_label_element “上記の内容で送信します。”]

 

【参考】
スパムフィルタリング設定をしておくと良い。
(Akismetというワードプレスプラグインを有効にしておく必要がある)
⇒ Akismetによるスパムフィルタリング設定

 contact25

 

 

3.受信メール設定をする

サイト閲覧者から送信されたメッセージをメールで受け取る設定をします。
メール本文内容は自由に編集可能です。

デフォルト

contact8

編集後

contact23

・宛先⇒受け取るメールアドレス
・ファイル添付⇒先ほどの作業で貼り付けたもの
・メッセージ本文⇒自由に編集可能。[ ]内はフォームの[ ]内と対応していますので、メッセージ送信者がフォームに入力された内容が反映されます。
例)メッセージ本文内の”[your-name]”が→フォーム内一番上の”<p>お名前 (必須)<br />
[text* your-name] </p>”に対応

 

 

4.固定ページを作成し、生成コードを貼り付ける

お問い合わせフォームなどは、投稿としてではなく独立した固定ページとして作成する。

4-1.固定ページ新規作成

contact26

 

4-2.コンタクトフォームで作成されたショートコードを、固定ページテキスト本文内に貼り付ける

【コピーする】

contact27

【貼り付ける】

contact17

 

 

5.サンクスページを設定する(任意)

サンクスページとは、メッセージ送信後に自動的に飛ぶリンク先のことです。
このページに『送信完了』などの文章を入れておくと、送信者は安心します。

contact28

 

5-1. 4.と同様にして固定ページを作成

 

5-2.固定ページのURLを連動させる

コンタクトフォームの一番下にある『その他の設定』欄に、画像のように記載してください。
●●の部分に固定ページのURLを入力します。

on_sent_ok: “location.replace(‘http://shimamuray.com/●●●●●’);”

contact11

 

6.確認

完成したフォームからテストメッセージを送ってみると、このようにメール連絡が送られてきます。
それぞれの項目を対応させて見て、確認してください。

メッセージ送信

contact19

 ↓

メッセージ受信

contact20

 

 

今回は「Contact Form 7」の一般的な使い方を解説しました。
特に一連の流れと各対応項目が、初心者の方でも理解できるように記載したつもりです。

まずは今回の流れに沿って一度作業をしてもらい、慣れてからカスタマイズしてみてください。

また機会を設けて、「Contact Form 7」の使い方をより詳しく書けたらと思います。

 

LINEで送る
Pocket


コメントを残す