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

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にhisanobuにより2ヶ月、 2週前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #141442
    hisanobu
    参加者
    30

    【お使いの 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
    いいねをした人: 居ません
    #141450
    アバター画像キタジマ タカシ
    参加者
    2421

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

    一応、

    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
    いいねをした人:
    #141453
    hisanobu
    参加者
    30

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

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

    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
    いいねをした人: 居ません
    #141477
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

    ちなみに、

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

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

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

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

    0
    いいねをした人: 居ません
    #141479
    hisanobu
    参加者
    30

    文言は固定ページに「通常表示用」「確認画面用」を直接記述しており、その下にフォームを設置しています。: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
    いいねをした人: 居ません
    #141481
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

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

    0
    いいねをした人: 居ません
    #141485
    hisanobu
    参加者
    30

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

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

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

    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「Snow Monkey Formsの確認画面、完了画面の表示開始位置をページトップにしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。