サポート » プラグイン » Contact Form 7にプライバシーポリシーを掲載したい

  • 解決済 wptomix

    (@wptomix)


    Contact Form 7に、プライバシーポリシーの全文を表示したいとおもっています。
    10行ぐらいみれてスクロールするテキストエリアです。

    現在textareaで、表示していますが、なぜか本文改行位置にPタグが表示されて
    しまいます。そもそもtextareaでよいのかわかりません。

    インラインスタイルをいれていますが、効かないようです。

    <textarea style=”width:100%;height:100px;” rows=”10″ cols=”80″>
    プライバシーポリシーの全文
    </textarea>

    なぜ、プレーンテキストにPタグがはいるのか、詳しい方ご教授お願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • wptomix

    (@wptomix)

    行は10行を指定していますが、4行程度しか表示されません。
    ためしに<pre>をいれてみたところ<p>タグはきえたものの、<pre>自身が表示されていて間抜けな感じです。

    • この返信は1 ヶ月前に  wptomix さんが編集しました。
    • この返信は1 ヶ月前に  wptomix さんが編集しました。
    • この返信は1 ヶ月前に  wptomix さんが編集しました。
    ishitaka

    (@ishitaka)

    こんにちは

    現在textareaで、表示していますが、なぜか本文改行位置にPタグが表示されてしまいます。

    フォーム(コンタクトフォームの編集画面のフォーム)内であれば、textarea タグ内に p タグは挿入されないと思います。どちらに記述していますか?

    そもそもtextareaでよいのかわかりません。

    表示だけであれば、overflow プロパティで scroll を使用するのもいいかもしれません。

    <div style="width:100%; height:100px; overflow-y: scroll; border: 1px solid #ddd;">
    <p>プライバシーポリシーの全文1</p>
    <p>プライバシーポリシーの全文2</p>
    </div>

    行は10行を指定していますが、4行程度しか表示されません。

    rows 要素より、スタイルの height(height:100px;)が優先されるからです。

    wptomix

    (@wptomix)

    ご検討ありがとうございます、
    希望に近い形になりますが、以下の現象がおこります。

    ・天地は4行程度にしかなりません
    ・空行がとんでしまってベタテキストになります。

    なにが原因なのでしょう。contact-from 7の入力エリアはHTMLがつかえるのですよね

    ishitaka

    (@ishitaka)

    天地は4行程度にしかなりません

    スタイルの height の値(100px)を調整してください。

    空行がとんでしまってベタテキストになります。

    HTML で改行は、ブラウザ上では反映されません。br や p タグをお使いください。
    https://saruwakakun.com/html-css/reference/br

    wptomix

    (@wptomix)

    ご返信ありがとうございます。

    Brの改行を止める。
    段落末はp brとする

    といった調整でうまくいきました。

    天地は200pxで希望のサイズになりました。

    あとはスクロールバーが常時表示されればよいのですが、ブラウザー依存なのかな….

    ishitaka

    (@ishitaka)

    あとはスクロールバーが常時表示されればよいのですが、ブラウザー依存なのかな….

    Chrome(スマホ)および Safari の場合は、下記のようなスタイルで常時表示されるようになります。

    対象のタグに、scroll-box クラスを追加

    <div class="scroll-box" width:100%; height:100px; overflow-y: scroll; border: 1px solid #ddd;">
    <p>プライバシーポリシーの全文1</p>
    <p>プライバシーポリシーの全文2</p>
    </div>

    下記スタイルをテーマの style.css またはカスタマイズの [追加 CSS] に追加

    /* スクロールバーの幅 */
    .scroll-box::-webkit-scrollbar { width: 20px; }
    /* スクロールバー背景色 */
    .scroll-box::-webkit-scrollbar-track { background: #f1f1f1; }
    /* スクロールバーのつまみの色 */
    .scroll-box::-webkit-scrollbar-thumb { border-radius: 6px; background: #c1c1c1; }
    wptomix

    (@wptomix)

    おおおお、ありがとうございます。

    スクロールバーが表示されました!

    微調整して使わせて頂きます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。