WordPressでダウンロードフォームを作成する方法

コンテンツマーケティング

すでにお気づきの方は多いと思うのだが、THE CONTENT MARKETINGでは「スターバックスのソーシャルメディア戦略活用テクニック」というテーマで小冊子ebookを作成して、無料でダウンロードできるようにしている。資料ダウンロードページを作成したのは初めてだったので、その作り方を説明しよう。(ちょっと技術的なので、苦手な方は飛ばしてください(笑))

WordPressでダウンロードフォームを作成する方法

今回このダウンロードフォームは、Wordpressのプラグイン「Contact Form 7」を使って作成した。

資料のダウンロードページとは

最初に資料のダウンロードページについて説明しよう。このページは、役に立つノウハウや事例集などを小冊子の形でダウンロードできるようにしたページである。国内だと、一部の大手企業のみが実践しているが、海外では、広く使われているテクニックだ。

このように資料を無料で提供する事で、顧客からメールアドレスや会社名などの情報を登録してもらう事が出来る。私はこのプロセスを通じて、顧客との間により深い関係性・信頼関係を築く事が出来ると考えている。

資料ダウンロードページ

Contact Form 7のインストール方法

「Contact Form 7」は、簡単にお問い合わせフォームを作成でき、カスタマイズも可能な大人気の無償プラグインである。

1.WordPressの管理画面を開き、「ダッシュボード」メニューの「プラグイン」内の「新規追加」をクリックする。

wordpress-contactform7_2.jpg

2.検索フィールドが表示されるので、検索フィールドに「Contact Form 7」と入力する。

wordpress-contactform7_3.jpg

3.検索結果に表示されたら、「いますぐインストール」をクリックする。

wordpress-contactform7_4.jpg

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

wordpress-contactform7_5.jpg

5.管理画面のダッシュボードの「お問い合わせ」をクリックし、Contact Form 7のメニュー画面を表示させ、その中の「コンタクトフォーム 1」をクリックし、Contact Form 7の編集画面を表示する。

wordpress-contactform7_6.jpg

6.編集画面を表示したら、問い合わせフォームの設定を行う。

wordpress-contactform7_7.jpg

7.今回Contact Form 7では、以下の7項目を作成してみる。
・氏名(必須)
・メールアドレス(必須)
・会社名
・会社サイトアドレス
・従業員数
・申し込み動機
・メッセージ

項目は、「フォーム」右側の「タグの作成」で種類を選択する。

wordpress-contactform7_8.jpg

クリックすると以下ようにメニューが表示される。
wordpress-contactform7_9.jpg

8.各項目の設定を行う。
氏名の設定(タグ:テキスト項目)
必須入力の項目ですか?」にチェックを入れる。
名前:your-name
size(桁数):80

wordpress-contactform7_10.jpg

※idやclassを設定するとcssでデザインをカスタマイズ出来る。
「このコードをコピーして、左のフォーム内にペーストしてください。」という茶色の部分をコピーして左側の「氏名(必須)」というタグに置き換える。

wordpress-contactform7_11.jpg

※茶色の部分のコピー&ペーストは共通なので、以下の項目は、タグの種類と入力、チェックする項目のみを記述する。

メールの設定(タグ:メールアドレス項目)「必須入力の項目ですか?」にチェックを入れる。
名前:your-email
size:80

会社名の設定(タグ:テキスト項目)
名前:your-companyname
size:80

サイトアドレスの設定(タグ:テキスト項目)
名前:URL
size:80

従業員数(タグ:テキスト項目)
名前:emproyeenumber
size:10

申し込み動機の設定(タグ:ドロップダウン・メニュー)
名前:emproyeenumber
選択項目:"雰囲気が良い"、 "社風に合っている"、 "オプションが充実している"
"アフターケアが万全"(※一語ずつ改行しながら入力)

メッセージの設定(タグ:テキストエリア)
名前:message

申し込みボタンの設定(タグ:送信ボタン)
名前:submit

以上、全ての項目を設定すると、画面左側のソースコードは下記のようになる。

氏名 (必須)

[text* your-name 80/ akismet:author]


メールアドレス (必須)

[email* your-email 80/ akismet:author_email]


会社名

[text your-companyname 80/]


サイトアドレス

[text URL 80/ akismet:author_url]


従業員数

[text emproyeenumber 10/]


申し込み動機

[select motive "雰囲気が良い" "社風に合っている" "オプションが充実している" "アフターケアが万全"]


メッセージ

[textarea message]


[submit "今すぐダウンロード"]


9.メール(受信メール)の設定を行う。
メール設定の左側は、以下のように設定する。

wordpress-contactform7-13.jpg

メール設定の右側は、以下のように設定する。

wordpress-contactform7_14.jpg

10.ダウンロードページの設定を行う。
ページ下部にある「その他の設定」に、
on_sent_ok: "location.replace('ダウンロードサイトのURL');"
と記入する。

wordpress-contactform7_15.jpg

11.以上の設定を終えたら、ページ上部にある「保存」ボタンを押し、「保存」ボタン左上部の茶色の箇所のコードをコピーする。

wordpress-contactform7_16.jpg

12.「ダッシュボード」メニューの「固定ページ」内の「新規追加」をクリックする。

wordpress-contactform7_18.jpg

13.タイトルと、本文の設定を行う。

wordpress-contactform7_18.jpg

14.資料ダウンロードフォームの設定を終えたら、右側の「下書きとして保存」ボタンで保存し、「プレビュー」ボタンでフォーム体裁の確認、「公開」ボタンでサイトへの公開をする。

wordpress-contactform7_19.jpg

15.資料ダウンロードフォームは、サイトではこのように表示される。

wordpress-contactform7_20.jpg