Wordpress 資料ダウンロードページを作る

作るもの

ダウンロード時にフォームを埋めてもらってからダウンロードをする仕組みを作ります。 セキュリティは甘い作り方ですが、ひとまず上記機能を作りたい場合に有効です。

プラグイン準備

今回はプラグインを利用します。 Download Monitor でダウンロード用リンクを作成し、contact form 7でダウンロード前の入力フォームを作成します。

Download Monitor

プラグインからDownload Monitorを検索・有効にします。

Contact form 7

問い合わせフォームなどでも良く利用されるcontact form7を利用してフォームを作成します。

contactform7.com

新規作成　→　ファイルの追加　→　ファイルのアップロード

右上欄の「ダウンロード情報」のダウンロードURLは後で参照します。

フォームの作成（デザイン変更付き）

問い合わせフォームの「フォーム」タブのテキストエリアに以下のhtmlコードを追記します。 このフォームのショートコードは後で参照します。

<span class="must">必須</span> お名前
    [text* your-name placeholder"例：名字　名前"]

<span class="free">任意</span>  ふりがな
    [text your-kana placeholder"例：みょうじ　なまえ"]

<span class="must">必須</span> 貴社名/組織名
    [text* your-corp placeholder"例：株式会社ABC"]

<span class="free">任意</span> 所属部署
    [text your-org placeholder"例：事業開発部"]

<span class="free">任意</span> 役職
    [text your-position placeholder"例：課長"]

<span class="must">必須</span> 電話番号
    [text* your-phone placeholder"例：03-1234-5678"]

<span class="must">必須</span> メールアドレス
    [email* your-email placeholder"例：contact@xxxx.co.jp"]

[submit "会社資料・導入事例をダウンロードする"]

スタイルの適用は追加CSSなどに以下のコードを追加してください。

/* Contact 用 */

/* 必須マーク */
.must{
    color: #fff;
    margin-right: 10px;
    padding: 6px 10px;
    background: #ff6666;
    border-radius: 20px;
}

/* 任意マーク */
.free {
    color: #fff;
    margin-right: 10px;
    padding: 6px 10px;
    background: #676666;
    border-radius: 20px;
}

/* 項目名を太字にする */
form p {
    font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
    width: 70%;
    padding: 8px 15px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid #d0d5d8;
    border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    height: 200px;
}

/* 必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    background: rgba(255, 255, 142, 0.46);
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
    width: 70%;
    height: 80px;
    background: #27c038;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
    color: red;
    font-weight: 600;
}

ダウンロードページの作成

フォームが含まれるダウンロードページを固定ページで作成します。 固定ページはテキストモードで冒頭に以下を入れます。

contact form 7のフォーム入力が正しく動作したときにjavascriptを動作させて、ダウンロードリンクに飛ぶことでダウンロードが可能となります。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'ダウンロードURL';
}, false );
</script>

ダウンロードURLは、先程のものを利用します。

次に、フォームを入れますので、上記コードの次に、フォームのショートコードを挿入しましょう。 以上のダウンロードページをリンクとして、リンクを置きたい場所にこの固定ページのリンクを貼り付ければ完了です。