Skip to content
イノーバマーケティングチーム2024/02/02 17:39:471 min read

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

すでにお気づきの方は多いと思うのだが、THE CONTENT MARKETINGでは「スターバックスのソーシャルメディア戦略活用テクニック」というテーマで小冊子ebookを作成して、無料でダウンロードできるようにしている。(新規のダウンロードは停止しております。)

資料ダウンロードページを作成したのは初めてだったので、その作り方を説明しよう。(ちょっと技術的なので、苦手な方は飛ばしてください(笑))

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

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

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

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

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

Webで問い合わせをつくるには?BtoB企業サイトの仕組み

 

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

WordPressはとても便利ですが、メンテナンスやセキュリティにも気をかけなければなりません。弊社では、BtoB企業専門のWEB サイト制作サービスを提供しております。集客から見込み客の獲得や商談の創出を可能にするウェブサイトへのリニューアルに関してご興味がありましたら、是非ご活用ください。

Webで問い合わせをつくるには?BtoB企業サイトの仕組み

avatar

イノーバマーケティングチーム

株式会社イノーバの「イノーバマーケティングチーム」は、多様なバックグラウンドを持つメンバーにより編成されています。マーケティングの最前線で蓄積された知識と経験を生かし、読者に価値ある洞察と具体的な戦略を提供します。