超簡単！Contact form 7 を資料ダウンロードフォームに！ワードプレス

Web制作

企業のホームページで、ホワイトペーパーマーケティングは、とても重要になってきています。リード（見込み顧客）獲得につながるからです。

しかし、ホワイトペーパーを作ってもホームページにダウンロードフォームがない！となると、本末転倒ですよね。また、ただ、資料だけ、DLできるようにしても、意味がないですよね。

そこで、今回はワードプレスで超簡単に作れる資料ダウンロードフォームについて解説していきます。

もちろんメールアドレスや名前会社名電話番号を登録していないと資料が DL できないフォームになりますのでリードを獲得して、その後のメールマーケティングやテレアポに使えますよ！

1 ホームページに資料ダウンロードフォームを設置する方法
2 Contact form 7 とは
3 Contact form 7でサンクスページを設定する方法
4 Contact form 7での設定方法
5 １つのサイトから複数の資料をダウンロードできるようにする方法
6 複数資料のダウンロードを可能にする手順 5STEP
7 ワードプレスで　複数資料ダウンロード可能にする方法詳細
8 Contact Form 7 使い方解説動画
9 要注意！ワードプレスのフォームスパム対策重要
10 Contact Form 7 スパム対策
11 Contact form 7 多言語でも使える
12 まとめ Contact form 7 でもホワイトペーパーDL施策は簡単にできる！
13 ■ web制作人気記事

ホームページに資料ダウンロードフォームを設置する方法

まずは、ホームページに資料ダウンロードフォームを作るフローを書いていきます。

ただ、ワードプレスでホームページが作られていることが前提になります。

手順は以下の通りです。

プラグイン Contact form 7 をインストール
Contact form 7を有効化
Contact form 7 で入力フォームを作成
サンクスページ（資料DLページ）を作成
Contact form 7でリダイレクトの設定
Contact form 7 「入力ありがとう」メッセージの文言変更

流れとしては、上記の６ステップで完了します。

ちなみに、Contact form 7については、次で解説しますが、国産のメールフォーム作成が簡単にできるワードプレスのプラグインです。

Contact form 7 とは

Contact form 7とは、ワードプレスで、メールフォームを作るなら、これ！と言われるほど、日本では人気のプラグインです。

Contact form 7は無料で使えます。

Contact form 7は導入や設定がとっても簡単なので、多くのwebサイトで使われています。フォームの内容も、かなり柔軟に編集ができます。さらに、Contact form 7は、汎用性が高いため、ネットで検索すると、いろいろな情報が転がっています。

なので、メールフォームを作るなら、Contact form 7は、非常にメリットの高いツールになっています。

チェックボックス、ラジオボタン、クイズなど、ボタン１つで作れてしまうのも、非常に使いやすいとされている理由ですね。

ワードプレス初心者でもくじけることはないでしょう。

Contact form 7でサンクスページを設定する方法

Contact form 7には、サンクスページがついていないのですが、資料のDLができるようにするため、サンクスページを作りましょう。

これは固定ページで、thanksなどのページ名で作ればOKです。

このサンクスページに、資料をDLできるようにファイルを設置するなり、資料DLのできるURLを置くなり、資料をDLできるQRコードを掲載すればOK！

サンクスページを作れば、Google広告のCVタグや、facebook広告のCVタグ、Yahoo広告のCVタグと、さまざまな広告の効果測定ができるようになります！CVタグの設定ができないのは、webマーケティング上、自動化もできないので、もったいないですよ！

サンクスページを作るのは、こういったメリットがあって、便利ですよ。

Contact form 7での設定方法

Contact form 7で、この作成したサンクスページを読ませるためには、

Contact form 7で

「その他の設定」タブをクリックして、入力欄に以下を記載

1on_sent_ok: “window.location.href =’サンクスページのURL’;”

サンクスページのURLは、httpからのフルパスで記述してください。

これであとは、Contact form 7で

「メッセージ」タブから、

メッセージが正常に送信された　の下の欄に、送信しています。と記載するだけ。

これで、資料のDLフォームが完成です！

もちろん、資料請求フォームを経由しないと、たどり着けないページになるので、名前や会社名、TELなど、リード情報を取得できます！

１つのサイトから複数の資料をダウンロードできるようにする方法

ワードプレスのContact Form 7 を使って、１つのホームページから、複数の資料をダウンロードできるようにする方法についてもまとめておきます。

実際、ホワイトペーパーでマーケティングする場合、複数の資料をダウンロードできるようにしておきたいですよね。

複数のファイルをダウンロードできるようにするために行うことのロジックは以下になります。

Contact Form 7で作ったフォームの完了画面を２つ以上作る
それぞれDLフォームごとに、完了画面のリダイレクト先をわける
それぞれの完了画面に、資料ごとのダウンロードボタンをつける

というロジックです。

そのためには、Contact Form 7に加えて、もう１つ、ダウンロードモニターというプラグインを使います。ダウンロードモニターで、資料をダウンロードできる口を複数作ることで、上記が可能になります。

複数資料のダウンロードを可能にする手順 5STEP

さっそくですが、実装方法の解説です。

前提として、Contact Form 7のインストールや、ダウンロードフォームの設定をしていることを前提とします。

手順としては、５STEPです。

Download Monitor のインストール
Download Monitor 設定
Download Monitor にて資料アップロード
固定ページで、申し込み完了画面を2つ作る
functions.phpに下記コードを記載

これで完了です。

functions.phpにコードを入れる際、functions.phpに、バックアップは事前にとっておいてくださいね。壊れたら、直すのが大変ですからね。

詳細を解説していきます。

ワードプレスで　複数資料ダウンロード可能にする方法詳細

複数資料のダウンロードを可能にする方法の詳細を、こまごま解説していきます。手順やロジックを理解していると、速いかもですね。

Download Monitor というプラグインをインストール
有効化をして、Download Monitor 設定画面へ
デフォルトテンプレートで「ボタン」を選択
ホットリンクの防止を有効にチェック
Download Monitor の新規作成画面へ
タイトルと、ダウンロードしてもらう資料をアップロード
Download Monitorのショートコードをメモっておく
固定ページで、サンクス画面を作成
Download Monitor でメモったショートコードを設置
ワードプレスの外観メニューにあるテーマエディターから、functions.phpを選択。

以下のコードを設置。

////////////////////////////////////////////////////////
//コンタクト７　完了画面切り分け
////////////////////////////////////////////////////////
add_action( ‘wp_footer’, ‘wpcf7_mailsent_1’ );
function wpcf7_mailsent_1() {
?>
<script type=”text/javascript”>
document.addEventListener(‘wpcf7mailsent’,function(event) {
if (‘対象のコンタクトフォーム7-ID’ == event.detail.contactFormId) {
location.replace(“サンクスページ1″)
}
},false);
</script>
<?php
}

add_action( ‘wp_footer’, ‘wpcf7_mailsent_2’ );
function wpcf7_mailsent_2() {
?>
<script type=”text/javascript”>
document.addEventListener(‘wpcf7mailsent’,function(event) {
if( ‘対象のコンタクトフォーム7-ID’ == event.detail.contactFormId) {
location.replace(“サンクスページ2”);
}
},false);
</script>
<?php
}

Download Monitorのボタンのデザインが気に入らなければ、CSSで編集

Download Monitorのボタンのデザインの編集例は以下にあります。

参考）
【WordPress】Download MonitorプラグインのボタンをCSSでカスタマイズする方法
 https://howcang.com/2020/08/05/dlm/

プラグインDownload Monitorのダウンロードボタンをカスタマイズ
 https://zbnr-hp.com/download-button-css

ぜひ活用してみてください。