Snow Monkey Formsの入力・確認・完了画面でそれぞれの表示を変えたい

0
いいねをした人: 居ません
  • このトピックには5件の返信、2人の参加者があり、最後に大ちゃんにより3年前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #87821
    大ちゃん
    閲覧者
    3

    【お使いの Snow Monkey のバージョン】
    15.8.0
    【お使いの Snow Monkey Blocks のバージョン】
    12.4.0
    【お使いの Snow Monkey Editor のバージョン】
    6.1.0
    【お使いのブラウザ】
    Google Chrome
    【当該サイトのURL】

    ### 実現したいこと
    Snow Monkey Formsの入力画面と確認画面とで文章を変えたい。
    ### 発生している問題

    ### 試したこと

    https://snow-monkey.2inc.org/wp-content/uploads/hm_bbpui/87821/vaq3t7oc0x98dlp4t3j40dnw136whmul.png

    現在、写真のようにお問い合わせの上に文章を入れているのですが
    この文章を入力画面と確認画面で切り替えることは可能でしょうか?
    また完了画面にて上の文章を消すことは可能でしょうか?
    わかる方がいればご教授お願いいたします。

    0
    いいねをした人: 居ません
    #87823
    アバター画像キタジマ タカシ
    参加者
    2371

    プログレスバーと位置が入れ替わっちゃいますが、フォームの中に文章を入れ込んでしまうのが簡単ではないでしょうか。

    フォームには入力、確認、完了でそれぞれ data-screen 属性が切り替わるようになっているので、それで CSS で出し分けはできます。

    0
    いいねをした人: 居ません
    #87917
    大ちゃん
    閲覧者
    3

    ありがとうございます。

    上記の2つの文章それぞれにclass="input"class="confirm"を設定して以下のコードを追加cssに記載した所どちろの文章も変わらずに出続けたままでした。

    .input[data-screen="confirm"] {
      display:none;
    }
    
    .confirm[data-screen="input"] {
      display:none;
    }

    [data-screen"input"]と[data-screen"confirm"]をそれぞれ消すとcssが効いたのですがどういった原因がございますでしょうか?

    0
    いいねをした人: 居ません
    #87979
    大ちゃん
    閲覧者
    3

    その後、色々試しました

    カスタムHTMLで

    上の文章にdata-screen="confirm"
    下の文章にdata-screen="input"

    を付け加え

    <p class="has-text-align-center input" data-screen="confirm">ご不明点やご相談·お問い合わせにつきましては、お気軽に下記項目を入力頂きご連絡ください。</p>
    
    <p class="has-text-align-center confirm" data-screen="input">下記項目で問題なければ送信するボタンを押して頂くと送信完了となります。<br>修正する場合は戻るを押してください</p>

    追加cssにて

    [data-screen="confirm"].input{
      display:none;
    }
    
    [data-screen="input"].confirm{
      display:none;
    }

    を加えるとどちらも消えてしまいます。

    画面が変わっても消えたままでした。

     

    追加CSSを

    [data-screen="confirm"].input{
      display:none;
    }
    [data-screen="confirm"].confirm{
      display:none;
    }

    にすると上の文章のみが消えるのですが、入力画面・確認画面ともに消えてしまいます。

    0
    いいねをした人: 居ません
    #88022
    アバター画像キタジマ タカシ
    参加者
    2371

    画面に表示するメッセージが下記のようになるように段落ブロックを配置してください。

    <p class="input">
    入力画面用のメッセージ
    </p>
    <p class="input">
    確認画面用のメッセージ
    </p>

    そして、下記の CSS を追加してください。

    [data-screen="confirm"] .input {
      display:none;
    }
    
    [data-screen="input"] .confirm,
    [data-screen="invalid"] .confirm {
      display:none;
    }

    [data-screen="xxx"] はフォーム自体につきます。[data-screen="confirm"].input だと段落ブロックについていないと効きません。フォームの中の段落ブロックということで、[data-screen="confirm"] .input となります。

    0
    いいねをした人: 居ません
    #88082
    大ちゃん
    閲覧者
    3

    求める動きになりました。

    ありがとうございます。

    1
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「Snow Monkey Formsの入力・確認・完了画面でそれぞれの表示を変えたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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