問合せフォームにプライバシーポリシーを記載しよう

目次

Contact Form 7にプライバシーポリシーを記載

こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。今回は問合せフォームを作るプラグインである『Contact Form 7』にプライバシーポリシーを記載していきたいと思います。

当サイトでは問合せフォームをContact Form 7で作成しています。代表的な問合せフォームの1つにContact Form by WPFormsがありますが、有料版にしないとカスタマイズ性が乏しいため、使用していません。

前回のContact Form 7のレスポンシブル化の記事にその点を触れていますので、よろしければご一読下さい。

あわせて読みたい
コンタクトフォームプラグイン『Contact Form 7』のレスポンシブル化
コンタクトフォームプラグイン『Contact Form 7』のレスポンシブル化【Contact Form 7のスマホでの表示崩れ対策】こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。今回はWordPressの記事ですが、備忘録...

今回の完成イメージはこちらです。

実際の当サイトのお問合せページもご覧ください。

あわせて読みたい
お問合せ
お問合せ

ポイントは以下の3つぐらいでしょうか。非常に簡単に実装できます。

  • プライバシーポリシーの全文を表示せず、スクロールさせる。
  • スクロールボタンやテキストBOXの大きさの調整をする。
  • 文字の大きさや背景色の設定する。

実際の記述について

まずはプラグインの設定<お問合せ>より、下記画像を参考にしてメッセージ本文の下ぐらいに記述を行います。実際の記述内容はご自身のサイトのプライバシーポリシーを記載してください。

<label> プライバシーポリシー</label>
<div class="scroll-box" style="width:100%; height:200px; overflow-y: scroll; border: 1px solid #ddd;background-color:#f8f4f4;">

<u><b>■個人情報保護方針</b></u>
<p class="bs">〇〇(以下、当社)は~<本文を記載、以下略></p>

</div>

細かい設定の説明は省きますが、高さ(height:200px)や色(background-color:#f8f4f4)はお好みで各自調整して下さい。

次に、お問合せフォームのショートコードを張り付けたページの追加CSS(無い場合はカスタマイザーの追加CSSでも可)に、下記の様に詳細のデザインの記述をします。

/* スクロールバーの幅 */
.scroll-box::-webkit-scrollbar { width: 10px; }

/* スクロールバー背景色 */
.scroll-box::-webkit-scrollbar-track { background: #f1f1f1; }

/* スクロールバーのつまみの色 */
.scroll-box::-webkit-scrollbar-thumb { border-radius: 6px; background: #c1c1c1; }

/* 本文調整 */
.bs {
  margin-bottom: 1.0em;
}

これについても、各自デザインの調整は行ってください。

まとめ

プライバシーポリシーはページとして独立して準備していると思いますが、お問合せフォームに記載することで、よりそれっぽさが増しますので、特にサイト型の場合はおすすめです。

  • お問合せフォームにプライバシーポリシーを記載するには、Contact Form 7を使用する。
  • Contact Form by WPFormsのプラグインでは有料版にしないとカスタマイズができない。
  • 記事にある簡単なHTMLとCSS(各自調整)で実装が可能。
  • サイト型の場合は“それっぽさ”がでるので特におすすめ。
目次
閉じる