MW_WP_FORMの確認画面でメールフォームの位置に移動させる方法

WordPressでメールフォームを作るときに、MW_WP_FORMが便利ですよね。
僕もよく使います。

確認画面を、別ページを用意せず、そのページ内で表示させるときに、ページの先頭にいってしまいます。
それを解消する為のjavascriptを書きます。

エラーの時、確認画面から入力画面にもどる時、送信完了の時も合わせて書いていきます。

全部まとめて書いているものも最後に用意しています。

確認画面のときにメールフォームの位置に移動させる

MW_WP_FORMの確認画面の時にはフォームのdivに mw_wp_form_confirm というクラスが入ります。
そのクラスがあるかないかで、確認画面かどうかを判定。
あったら、フォームの位置に移動をします。

// フォームのdivを取得
var mwwpform = document.querySelector('.mw_wp_form');
// .mw_wp_form_confirmがあればフォームの位置へ移動
if(mwwpform.classList.contains('mw_wp_form_confirm')) {
	window.scrollTo(0, mwwpform.getBoundingClientRect().top);
}

エラーがあったときにフォームの位置に移動させる

エラーのときも、何も指定しなければページの先頭に移動させられてしまいます。

エラーのときはエラー内容を表示させる error というクラスのついた要素が出てきます。
error クラスの要素があるかないかで、エラー画面かどうかを判定し、エラー画面であればフォームの位置に移動させます。

// メールフォームのdivを取得
var mwwpform = document.querySelector('.mw_wp_form');
// .error の要素を取得
var error = document.querySelector('.error');
// .error の要素があればフォームの位置へ移動
if(error){
	window.scrollTo(0, mwwpform.getBoundingClientRect().top);
}

確認画面から修正で戻ってきたときにフォームの位置へ移動させる

こちらも考え方は上ふたつと同じです。
確認画面から修正で戻ってきたことを判別し、そうであればフォームの位置に移動させる。

一度修正画面にいけたということは、必須項目が全部入力されているということです。
なので、必須項目のvalueに値が入っていれば、確認画面から修正で戻ってきたということとします。

// いちばん最初の入力項目が必須だったとします

// フォームのdivを取得
var mwwpform = document.querySelector('.mw_wp_form');
// 最初の入力項目を取得
var inputValue = document.querySelector('.mw_wp_form input');
// 最初の入力項目に値が入っていればフォームの位置へ移動
if (!inputValue.value == '') {
	window.scrollTo(0, mwwpform.getBoundingClientRect().top);
}

送信完了画面の時にフォームの位置へ移動させる

送信完了のときは、フォームのdivに mw_wp_form_complete というクラスが入ります。

// フォームのdivを取得
var mwwpform = document.querySelector('.mw_wp_form');
// .mw_wp_form_completeがあればフォームの位置へ移動
if (mwwpform.classList.contains('mw_wp_form_complete')) {
	window.scrollTo(0, mwwpform.getBoundingClientRect().top);
}

ぜんぶまとめて指定したスクリプト

// フォームのdiv取得
var mwwpform = document.querySelector('.mw_wp_form');
// .errorを取得
var error = document.querySelector('.error');
// 最初の入力項目を取得
var inputValue = document.querySelector('.mw_wp_form input');
// 条件分岐
if(mwwpform.classList.contains('mw_wp_form_confirm')){
	window.addEventListener ('load', function () {
		window.scrollTo(0, mwwpform.getBoundingClientRect().top);
	});
} else if(error) {
	window.addEventListener ('load', function () {
		window.scrollTo(0, mwwpform.getBoundingClientRect().top);
	});
} else if (!inputValue.value == '') {
	window.addEventListener ('load', function () {
		window.scrollTo(0, mwwpform.getBoundingClientRect().top);
	});
} else if (mwwpform.classList.contains('mw_wp_form_complete')) {
	window.addEventListener ('load', function () {
		window.scrollTo(0, mwwpform.getBoundingClientRect().top);
	});
}

フォームの位置への移動が微妙にずれる場合があるので、移動のタイミングをwindowのロード完了後にしています。