[hisanobu]

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのSnow Monkey Forms のバージョン】7.1.0（最新）
【お使いのブラウザ】Chrom
【当該サイトのURL】ローカルのため無し

### 実現したいこと

Snow Monkey Formsの確認画面、完了画面、表示が切り替わる時の開始位置をページトップにしたい

### 発生している問題

確認画面、完了画面でフォームより上の文言を変更しているのですが、現在の仕様ではそのテキストが隠れてしまいます。

表示が切り替わる時、ページ遷移した時のようにページトップから表示させることはできないでしょうか。

### 試したこと

試行錯誤してみましたが、おそらくsmf-focus-pointで位置を調整しているのだと推測しています。

以下のCSSを追加してみたところ、一応は思った通りになりました。

.smf-focus-point {
top: -1000px;
}

ただ、この要素が行なっている役割が他にもあったり、不具合を起こすものであれば別のアプローチが必要だと考えています。

正規的な方法で解決できればと思いますが、いかがでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あーこれちょっと難しい問題ですね…。

一応、

add_filter(
	'render_block_snow-monkey-forms/snow-monkey-form',
	function( $html ) {
		return str_replace( 'smf-focus-point', '', $html );
	}
);

というコードで .smf-focus-point を消すことはできるのですが、フォームの画面遷移が画面リロード無しで非同期で実行されるため、.smf-focus-point が無いとフォームの先頭への移動が実行されず、送信してもその位置のままになるからかなり操作感がわるくなってしまいます。

ちなみに、

確認画面、完了画面でフォームより上の文言を変更しているのですが、

Snow Monkey Forms は入力・確認・完了画面の遷移が同一ページ上で行われるので、フォームの外側で、確認画面と完了画面だけ文言を変えるというのが普通ではできないのでは？と思ったのですが、どのように実装されているのでしょうか？

♥ 1

いいねをした人:

[hisanobu]

早速のお返事ありがとうございます。

文言の変更はざっくりとこんな感じです。

body:has(.snow-monkey-form) .contact-input-text,
body:has(.snow-monkey-form) .contact-confirm-text {
  display: none;
}
body:has([data-screen="input"]) .contact-input-text,
body:has([data-screen="confirm"]) .contact-confirm-text {
  display: block;
}

なかなかいい案だと思ったのですが、アクションした時にそもそもテキストが見えないなと…
あまりテクニカルなことをすると保守性が悪くなるので、CSSで調整できればと思っているのですが、.smf-focus-pointのtop位置を変更した場合の懸念点ってありますでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

CSS を見た印象だと、確認画面、完了画面用の文言はフォームの中（記事の編集画面ではなくてフォームの編集画面の中で入力している）にあるのかなと思ったのですがどうでしょうか？ そうだとすると、.smf-focus-point はフォームの最上部にあるから切れずに表示されるのかなと思ったのですが、ちょっと状況がよくわからずでして…。

.smf-focus-pointのtop位置を変更した場合の懸念点ってありますでしょうか？

変更することを想定していなかったので、変更するとどういうことが考えられるのかはわからないのですが、送信自体ができなくなるようなクリティカルな問題は発生しないのかなとは思います。

ちなみに、

.smf-focus-point {
  top: -1000px;
}

という指定だと画面幅によって、どこまでずらしたいかが変わってきて -1000px という固定値だと意図しない位置になる場合もあるのかなと思ったので、

.smf-focus-point {
  position: fixed;
  top: 0;
}

とするとどうでしょうか？

♥ 0

いいねをした人: 居ません

[hisanobu]

文言は固定ページに「通常表示用」「確認画面用」を直接記述しており、その下にフォームを設置しています。:has()疑似クラスで[data-screen=”xxx”]を含むbodyを基準にして、各文言のクラスを出し分けている感じになりますm(_ _)m

.smf-focus-point {
  position: fixed;
  top: 0;
}

こちらも試してみたのですが、現在位置が常にtop:0となるため、移動しませんでした…。
あまり気持ちよくないですが、以下のようにするか…

.smf-focus-point {
  top: -99999px;
}

もしくは、アクション時にフォーム内の.smf-focus-pointではなく、body要素にフォーカスポイントを変更するということは仕様上難しいでしょうか？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こちらも試してみたのですが、現在位置が常にtop:0となるため、移動しませんでした…。

あーなるほど…ドキュメントの0pxじゃなくて画面の0pxになるからだめですね…。(TT)

もしくは、アクション時にフォーム内の.smf-focus-pointではなく、body要素にフォーカスポイントを変更するということは仕様上難しいでしょうか？

この動作は js で実現しているので、フックとかで変えられないんですよね。なのでやはり現状では top でずらすしか無い気がします。

♥ 0

いいねをした人: 居ません

[hisanobu]

ドキュメントの0pxじゃなくて画面の0pxになるからだめですね…。

そうなんですよ、他の方法も思い当たらず…。
動作としては問題なさそうだったので、top:-99999pxで対処したいと思いますm(_ _)m

難しい質問にお答えいただきありがとうございました。

♥ 1

いいねをした人:

[投稿者]

投稿