フォームの特定ステップでのみJavascriptを動作させる方法

フォームのステップをパラメータで判定し、それぞれのステップで動作するJavascriptを作成しました。
実際にサンプルコードを掲載しておりますので、特定のステップでJavascriptを動作させたい場合に活用してみてください。
デモはこちら

機能説明

Javascriptで現在のURLを取得しステップパラメータを判定します。
特定のステップでのみJavascriptを動作させるためのプログラムです。

具体的な処理はそれぞれの要件に合わせて記載してください。

注意事項

・JavaScript のため、対応していないブラウザがあります。
・フォームブロックで使用することが前提となりますので、それ以外のブロックでは動作いたしません。

設定方法

ページの「Javascript」タブに以下のコードを貼り付けてください。

Javascript

// 設定値
const formStep_ParamKey = '';

// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    formStepFunction();
};

// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function formStepFunction() {
	const url = new URL(window.location.href);
	const params = url.searchParams;
	let formStep = params.get(formStep_ParamKey);
	formStep = formStep.substring(0, 3);

	if (formStep == 's1_') {
		// ここに処理を記載してください
		console.log("ステップ１");
	} else if (formStep == 'com') {
		// ここに処理を記載してください
		console.log("完了ステップ");
	}
}

設定値

formStep_ParamKey	こちらにはフォームURLにあるフォームステップのパラメータキーを入れてください。登録フォームブロックであれば「_ifbs-フォーム識別名」でキーが設定されています。・登録フォームブロックのパラメータキー記載例 const formStep_ParamKey = '_ifbs-newInsertForm'

ステップ分岐（サンプルコード18行目）

if (formStep == 's1_') {
	// ここに処理を記載してください
	console.log("ステップ１");
} else if (formStep == 'com') {
	// ここに処理を記載してください
	console.log("完了ステップ");
}

サンプルの上記部分でステップごとに分岐を行っています。
こちらでそれぞれの要件に合わせてステップ分岐を記載してください。
分岐を書く際にはパラメータ値の前3文字を記載するようにしてください。
※ステップ設定によってパラメータ値は変更されますが、前3文字までは固定です。

・ステップ２の分岐記載例

if (formStep == 's2_')

・完了ステップの分岐記載例

if (formStep == 'com')

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

機能説明

注意事項

設定方法

Javascript

設定値

ステップ分岐（サンプルコード18行目）

最後に

関連記事