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

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

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

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

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

あわせて読みたい

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

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

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

あわせて読みたい

CONTACT

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

実際の記述について

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

<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;
}

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

まとめ

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