共通利用する MW WP Form フォームを送信完了後に完了ページへ遷移する方法

WordPressのメールフォーム作成プラグイン「MW WP Form」で作成したフォームを複数のページで共通で使用する場合、通常の設定では「入力(→ エラー)→ 確認 → 送信完了」のステップを同一ページで完結させる必要があります。
しかし、それでは送信完了のコンバージョン取得が難しく(めんどくさく)なります。
そこで、今回は MW WP Form のフォームを共通利用しつつ、メール送信完了後に完了ページに遷移する方法をご紹介します。

  1. MW WP Form の URL設定 が空でも送信完了後に別ページに遷移させたい
  2. 手順1. MW WP Formをインストールして有効化
  3. 手順2.フォームを作成し、ショートコードをページ内任意の場所に記述
  4. 手順3.送信完了後にページ遷移の処理を追加
  5. まとめ

MW WP Form の URL設定 が空でも送信完了後に別ページに遷移させたい

MW WP Form で作成したフォームを複数のページで共通で使用する場合、「URL設定」の「入力画面URL」を入力できません
「入力画面URL」のみURL入力を省略し「確認画面URL」「完了画面URL」「エラー画面URL」にURLを入力しますと、確認画面の戻るボタン([mwform_backButton])クリックで「このページには直接アクセスできません。」と表示されてしまいます。

このエラーを回避するためには、「URL設定」には何も入力せず空白とする必要があります。
そうしますと、通常の設定では「入力(→ エラー)→ 確認 → 送信完了」のステップが同一ページで行われます。 もちろん、このままでも閲覧者から見たメールフォーム的には何の問題もありません。しかし、サイト運営者的には「GoogleAnalytics でメール送信完了のコンバージョンをとる」という有益な使い方ができません。
そこで、送信完了後に別ページに遷移させたいと思います。

作業手順

  1. プラグイン「MW WP Form」をインストールして有効化
  2. MW WP Form でフォームを作成し、ショートコードをページ内任意の場所に記述
  3. function.php にて送信完了後にページ遷移の処理を追加

手順1. MW WP Formをインストールして有効化

WordPressメニューのプラグインの新規追加より検索してインストールするか、下記よりダウンロードしてプラグインをインストールし、有効化します。

手順2.フォームを作成し、ショートコードをページ内任意の場所に記述

MW WP Form でフォームを作成します。「URL設定」には何も入力しないでください。

続いて、ページの任意の場所にショートコードを記述します。
この時、フォーム識別子のkey(数字のID)をどこかにメモしておきましょう。

手順3.送信完了後にページ遷移の処理を追加

function.php に送信完了後にページ遷移するコードを記述します。

// mw-wp-form 送信完了後に完了ページへ遷移
function my_mwform_after_send($Data) {
	$form_key = $Data->get_form_key();
	if($form_key === 'mw-wp-form-xxx') {
		wp_redirect('/compleat');
		exit;
	}
}
add_action('mwform_after_send_mw-wp-form-xxx', 'my_mwform_after_send');

「mw-wp-form-xxx」のxxxの部分は、先にメモったフォーム識別子のkey(数字のID)を入れてください。

ページタイトルをURLに渡す

コンバージョンをとるにあたって(完了ページに至る前ページを取得するのは手間ですので)ページタイトルをURLに引数として渡してしまいましょう。

// mw-wp-form 送信完了後に完了ページへ遷移
function my_mwform_after_send($Data) {
	$form_key = $Data->get_form_key();
	if($form_key === 'mw-wp-form-xxx') {
		$title_value = get_the_title();
		$compleatURL = '/compleat?title='. $title_value;
		wp_redirect($compleatURL);
		exit;
	}
}
add_action('mwform_after_send_mw-wp-form-xxx', 'my_mwform_after_send');

まとめ

  • MW WP Form でフォームを作成し、「URL設定」には何も入力しない
  • function.php に送信完了後にページ遷移するコードを書く

以上、MW WP Form で作成したフォームを送信完了後に完了ページへ遷移する方法をご紹介しました。
GoogleAnalytics のコンバージョン取得などにご活用ください。

また、複数のページで同一フォームを使うけれどメール送信先は別にしたいと言う場合はこちらをご利用ください。

MW WP Form で作成したフォームの送信先をカスタムフィールドでページごとに指定する
「MW WP Form」で作成したフォームでは、複数ページに同じフォームを設置し、全て違う送信先にしようとしてもできません。そこで、今回は同じフォームを使っていてもページごとに送信先を設定可能にするカスタマイズをご紹介…
https://sendai-kuraso.com/work/wordpress/specified-address-form.html

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー(嫁)

Web屋さんで8時間フルタイム勤務をしている、いわゆるワーキングマザー。
夫婦共働きで、ムスメ氏を育てています。
主に資産運用にかかわるお金の話、ムスメ氏を育てていく上での子育ての話、そしてたまにお仕事関連の記事を書いていく予定。
プロフィールを見る