【MW WP Form】フォーム入力が必要なダウンロードボタンを作りたい!

ワードプレス

2022-07-28

MW WP Formで作る資料ダウンロード用フォーム

先日、お客さまの要望で「名前などを入力してもらってから資料をダウンロードできるような仕組みにしてほしい」というのがありました。
登録すると資料がもらえるサイトやSNSの広告などはよくみかけますよね。
そのお客さまのサイトではお問い合わせフォームにMW WP Formを使用していたので、ダウンロード用のフォームも同じプラグインで作りたいと思い調べてみました!

やりたいこと

・MW WP Formでフォームを作成。送信完了画面にダウンロードボタンを表示
・1つのフォームを複数のダウンロードページで使いたい
・例えば「商品A」のページからダウンロード用フォームに遷移してきたら、送信完了画面には「商品A」のダウンロードボタンが設置されている
(MW WP Formの引数を使用して、遷移元のタイトルをフォームで送信、完了画面を遷移元によって変更)
・送信完了画面にフォーム入力をしないでアクセスした場合、トップページ等にリダイレクトさせる

①フォームへのリンクボタンを作成

まずはフォームのあるページへのリンクボタンを、PHP(属性のテンプレート、single.php、page.php等)で設置します。
この時、スラッグの後にpost_id=をつけて、遷移元のIDをフォームに渡します。

<a class="btn" href="<?php echo esc_url(home_url('/')); ?>/スラッグ/?post_id=<?php 
$id = get_the_ID(); 
echo $id;
?>">資料をダウンロードする</a>

 

上のコードの「スラッグ」となっている部分はフォームを設置したページのURLになるように変更してください。

(フォームを別ページで開く場合のボタン設定なので、同じページにそのままフォームを埋め込む場合はこのステップは必要ありません)

②MW WP Formでダウンロード用フォームを作ります。

valueにpost_titleをセット

①の工程で遷移前のページIDの情報がフォームに引き継がれています。このIDからpost_titleで遷移元のページタイトルを取得し、フォーム送信の際に一緒に送るように設定します。
下記はコードの一例です。
valueにpost_titleを入れることで、自動で遷移前のページのタイトルが表示されます。

<p>資料:[mwform_text name="title" value="{post_title}"]</p>
<!--今回はnameを「title」にしました。
 value="{post_title}"で遷移元のタイトルを一緒に送信-->
</tr>
<table>
<tr>
<th>お名前</th>
<td>[mwform_text name="your-name" size="60"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[mwform_email name="email" size="60"]</td>
</tr>
</table>
<div class="contact_btn">
[mwform_submitButton name="submit" confirm_value="確認する" submit_value="送信する"][mwform_bback class="modoru" value="back"]戻る[/mwform_bback]
</div>

 

「URL引数を有効にする」
にチェック

フォーム編集画面の右下設定の「URL引数を有効にする」にチェックを入れます。
(フォームを別ページで作成せず、ページ内に埋め込む場合は「URL引数を有効にする」にチェックをいれません。)

URL設定は空に

完了画面をfunction.phpで設定したいので、こちらのURL設定は空にします。

③ダウンロードをボタン設置した送信完了画面を作成

ダウンロードする資料ごとに送信完了画面を作ります。下記は一例です。

<p>フォームにご入力いただきありがとうございました。<br>こちらからダウンロードしてください。</p>
<a href="資料のファイルパス/aaa.pdf" download target="_blank" rel="noopener">ダウンロードする</a>

 

function.phpにコード追加

下記は一例です。送信後、どの完了画面を表示させるかを設定します。こちらのコードで1つのフォームから、ダウンロード資料ごとの複数の完了画面に振り分けることができます。

001thanks、002thanksは完了ページのスラッグです。
それぞれ遷移させたい完了ページのURLになるように入力します。

「title」はフォーム作成の際に設定したnameの値、「商品001」「商品002」は投稿タイトルです。それぞれ適した値を入れてください。
xxxにはフォーム拡張子の数字を入れます

//フォーム完了ページのURLを変える
function my_mwform_redirect_url($url, $Data) {
  if($Data->get('title') === '商品001'){
    switch($Data->get_view_flg()){
      case 'complete':
      $url = get_home_url().'/001thanks/';
        break;
    
      default:
        break;
    }
  }
  if($Data->get('title') === '商品002'){
    switch($Data->get_view_flg()){
      case 'complete':
      $url = get_home_url().'/002thanks/';
        break;
    
      default:
        break;
    }
  }
  return $url;
}
add_action( 'mwform_redirect_url_mw-wp-form-xxx', 'my_mwform_redirect_url', 10, 2 );

 

こちらを参考にさせていただきました。ありがとうございます!!

直打ち対策

入力画面を経てからでないと送信完了画面を表示させないようにしたい時の一例はこちら。
送信完了画面へのURL直打ちの場合はトップページにリダイレクトするように設定します。

下のコードをヘッダーの一番上に配置します。
条件分岐で、送信完了画面(ダウンロード画面。例では「001thanks」「002thanks」)だけに効かせます。
どこからアクセスしてきたかの情報がなければ(URLの直打ち等ならば)、http://www.aaa.com/にリダイレクトさせます。

<?php if( is_page(array('001thanks', '002thanks')) ) : ?>
<?php
if(!isset($_SERVER['HTTP_REFERER'])){
header('Location: http://www.aaa.com/');
  exit;
}
?>
<?php else: ?>
<?php endif; ?>

分岐の部分、投稿ページの場合は「is_page」を「is_single」にします。

資料ファイルのファイルパスの直打ち対策

ファイルパスからファイルを表示させると入力フォームなしでダウンロードできてしまうので、こちらは.htaccessで制限します。

SetEnvIf Referer "^https://www\.aaaaa\.com/images/download" mysite
SetEnvIf Referer "^http://www\.aaaaa\.com/images/download" mysite
SetEnvIf Referer "^https://aaaaa\.com/images/download" mysite
SetEnvIf Referer "^http://aaaaa\.com/images/download" mysite
Order Deny,Allow
Deny from all
Allow from env=mysite

 

「aaaaa\.com/images/download」の部分は制限したいディレクトリになるように書き換えてください。URLの前に「^」、「.」の前にバックスラッシュ「\」を入れます。

こちらの.htaccessファイルを、ダウンロードファイルと同じ階層にアップします。

このディレクトリに入ってるファイルが画像の場合、ページ上に表示されなくなるので、使用している画像がある場合は気を付けてください。

-ワードプレス

関連記事

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

最初の数行を表示させて、残りは会員限定で閲覧できるWPの限定コンテンツを作りたい

【プラグイン無し】moreタグ以降はログインで表示させる限定をコンテンツを作成! 今回はログインフォーム、限定コンテンツについて調べました! やりたいことは下記になります。 ・コンテンツの最初の数行を …

MW WP Formが動かない!確認画面にいかない!原因は?

入力画面でループして確認画面やエラーの表示に遷移しない、せっかく入力したのに確認画面を押すと、リロードされて消えてしまい、先に進まない…。なかなか解決せずはまってしまったMW WP Form。試してみた内容をご紹介しています。

バージョンアップしたContact Form 7 に入力確認画面をつけたい!

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」 Contact Form 7をアップデートしたらフォームが動かなくなってしまった! 調べてみると確認画 …

アイキャッチ画像を出力するテンプレートタグ(& object-fit)

分岐でアイキャッチ画像を表示させたい! アイキャッチ画像を設定しない場合、何か代わりの画像を出力させたい こちらはアイキャッチ画像が設定されていない場合「no-image.png」を表示させる例です。 …