お問い合わせフォームを作るとき、プライバシーポリシーの同意欄って必須ですよね。
逆にないとそのサイトを不審に感じる人もいるかもしれません。
今回はelementor proのフォームでの作り方と、カスタマイズ用のコードをたんまり紹介します！
フォームを作成
詳しい使い方はここでは省きますが、elementor proのフォームウィジットで、こんな感じのフォームを作ってみました。
フォームの見た目をもっといい感じにしたい方は、この記事をご覧ください！
1- タイプ Acceptance を追加
ではこのフォームウィジットに新しく項目を追加します。
そして、タイプを「Acceptance」にします。
ラベルやテキストはお好みで。
Required を「はい」にすることで、この項目にチェックがないとフォームを送信できない仕組みにできます。
2- 同意する内容を追加する
「同意する」だけだと何に同意するかわかりませんので、内容を付け足しましょう。
3つ方法があります。
2-1 acceptance textにaタグを入れる
上の画像ではlabel（タイトル）を入れましたが一旦削除して、acceptance textに以下のテキストを貼り付けます。
<a href="#!" target="_blank" rel="noopener noreferrer">個人情報の取り扱い</a>に同意する
aタグで囲ったテキストには、hrefに入れたURLのリンクがつきます。
hrefのところの#!を消してリンクのご自身のURLを挿入してくださいね。
（同じサイト内のリンクなら「/privacy-policy」とか）
（他サイトのリンクなら「https://example.com/privacy-policy」とか）
ちなみに、aタグ内の target・rel というのはリンクを新しいタブで開くのに必要な記述なので、そのままでOK!
現状、aタグのテキストの色はテーマHelloの色を継承して赤になっています。
変えたい場合は以下のコードをCSSに入れてください！
.elementor-field-type-acceptance a {
color:#2a59c8; /* ←通常時のaタグテキスト色 */
text-decoration:underline; /* ←お好みで下線追加 */
transition: color .2s ease;
}
.elementor-field-type-acceptance a:hover,
.elementor-field-type-acceptance a:focus {
color:#222222; /* ←ホバー時の色 */
}2-2 HTMLでリンク付きの文章を追加
先ほどはチェックボックスのテキストにリンクを設定しましたが、チェックボックスは同意する」文言だけにして、その上に文章を追加して一部にリンクをつける、ということもできます。
言葉だけだとわからないので実際にやってみましょうね。
まずは、labelは空欄・Acceptance text は「同意する」にしました。
ここで、フォームに新しい項目を追加してHTMLを選びます。
この項目はHTMLのタグを使って、文章やリンクなどを追加できます。
以下のコードを、HTML欄にペーストしてみましょう。
※ #! はご自身が使うURLに置き換えてくださいね。
<p>取得した情報は○○株式会社の<a href="#!"target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に基づき管理し、 メール配信およびお問い合わせの対応等に利用させていただきます。</p>
HTMLで追加したテキストの色やフォントのスタイルは、フォームウィジットのスタイル > HTMLフィールドのところで設定できます。
リンク色は同じくテーマHelloのカラーを継承しているので、変えたい場合は以下のコードをCSSに貼り付けてください。
.elementor-field-type-html a {
color:#2a59c8; /* ←通常時のリンクの色 */
text-decoration:underline; /* ←お好みで下線追加 */
transition: color .2s ease;
}
.elementor-field-type-html a:hover,
.elementor-field-type-html a:focus {
color:#222222; /* ←ホバー時の色 */
}2-3 HTMLで直接プラポリの文章を追加
先ほどの方法はHTMLに、プラポリページに飛ばすリンクがついたテキストを入れる方式でした。
プラポリページがない場合、別ページに飛ばすリンクを入れずに、そこにプラポリ文を全部入れてしまう！という方式もできます。
フォームの項目はそのまま、HTMLのところに、以下長文を入れます。
※以下テキストはご自身のサイトにコピペ使用OKですが、法的なことは責任取れませんので、使用時は自己責任でお願いします…
※お手元にあるプラポリテキストを入れたい場合は、chatGPT等に「このプライバシーポリシーを、条項ごとにpタグでまとめて、タイトルは太字になるようにhtml形式にしてください」と指示すると以下のような形式にしてくれます！
<p>
<strong>プライバシーポリシー</strong><br><br>
＿＿＿＿＿（以下、「当社」といいます）は、個人情報の取扱いに関する方針を、以下の通り定め、これを公表するとともに遵守することを宣言します。
</p>
<p>
<strong>第1条（個人情報の定義）</strong><br>
「個人情報」とは、個人情報保護法における「個人情報」を意味し、生存する個人に関する情報であって、次のいずれかに該当するものをいう。<br>
・当該情報に含まれる氏名、生年月日その他の記述等により特定の個人を識別できるもの（他の情報と容易に照合することができ、それによって特定の個人を識別することができることとなるものを含む。）<br>
・個人識別符号が含まれるものをいう。
</p>
<p>
<strong>第2条（個人情報保護方針）</strong><br>
当社は、以下の通り個人情報保護方針を定め、個人情報保護の重要性を認識し、個人情報保護の取り組みを徹底いたします。
</p>
<p>
<strong>第3条（個人情報の利用について）</strong><br>
（1） 個人情報の取得<br>
当社は、業務の円滑な遂行のため、お問い合わせをお受けするに当たり、ご本人の氏名、生年月日、電話番号、メールアドレス、住所等の個人情報を取得させていただきます。<br>
（2） 個人情報の利用<br>
当社が取得するご本人の個人情報は、利用目的を明確にした上で、目的の範囲内において利用させていただきます。<br>
（3） 法令等の遵守<br>
当社が保有する個人情報に関して適用される法令、規範を遵守します。<br>
（4） 個人情報の取扱いの改善と見直し<br>
当社は、個人情報保護に関する管理の体制と仕組みについて継続的改善を実施します。
</p>
<p>
<strong>第4条（利用目的）</strong><br>
当社が取得した個人情報の利用目的は、下記の通りとします。<br>
・お問い合わせに対する回答・ご相談の予約<br>
・ご相談をお受けするにあたっての利益相反等の確認<br>
・各種資料やご案内の送付<br>
・当ウェブサイト及び業務の改善等<br>
・サイトの保守・管理業者への個人情報を特定しない方法による問い合わせ状況の報告<br>
・個人情報を特定しない統計的な情報として集約し公表すること<br>
・電子メールの配信
</p>
<p>
<strong>第5条（個人情報の第三者への開示）</strong><br>
当社は、取得させていただいた個人情報は、ご本人の事前の同意なく第三者に対して開示することはありません。ただし、次の場合には、ご本人の事前の同意なく、取得した個人情報を開示できるものとします。<br>
・法令に基づき開示を求められた場合<br>
・当社、他のご本人またはその他の第三者の権利、利益、名誉、信用等を保護するために必要であると弊所が判断した場合<br>
・ご本人が自分の個人情報の開示を事前に承諾した場合
</p>
<p>
<strong>第6条（個人情報の利用・提供の拒否に関するお問い合わせ）</strong><br>
一旦当社にご提供いただいた個人情報について、利用を望まない場合や利用目的内での第三者への提供を望まない場合は、当社までお問い合わせください。
</p>
<p>
<strong>第7条（変更及び通知について）</strong><br>
当社は、このプライバシーポリシーの内容を、事前の予告なく変更することがあります。ご本人へその都度ご連絡はいたしかねますので、ご利用の際には本ページの最新の内容をご参照ください。
</p>
<p>
<strong>第8条（個人情報の訂正及び削除）</strong><br>
・当社が保有する個人情報が真実でないときは、ご本人の請求により、個人情報の訂正及び削除を求めることができます。<br>
・当社は、ご本人から前項の請求を受けた場合に、当該個人情報の訂正又は削除の決定をしたときは、当社が定める手続に従い当該個人情報の訂正又は削除を行った後、遅滞なくご本人に通知します。
</p>
<p>
<strong>第9条（苦情及び相談の連絡先）</strong><br>
当社は、個人情報の取扱いについて、ご本人からの当社の個人情報の取扱いについて、ご本人からの苦情や相談を受け付けます。相談や苦情等は、以下の窓口までお問い合わせください。<br>
社名：○○<br>
住所：○○<br>
電話番号：○○<br>
メールアドレス：○○
</p>
<p>以上</p>
こんな感じで入れましたが、このままだともちろん見づらいので、見やすくするCSSを入れましょう。
.elementor-field-type-html p{
font-size:12px; /* ← 文章の文字の大きさ */
margin-bottom:12px; /* ← 文章間の間 */
}
.elementor-field-type-html {
background-color:#f9f9f9; /* ← このブロックの背景色 */
border-radius:5px; /* ← このブロックの枠線の丸み */
padding:20px !important; /* ← このブロックの枠線の丸み */
border:1px solid #5A565733; /* ← このブロックの枠線 */
height:180px; /* ← このブロックの高さ */
overflow:auto; /* ← これを入れると中をスクロールできる */
}これで、フォームの邪魔にならないように長文を入れ込むことができました！スッキリ！
3- チェックボックスの見た目を整える
フォームの形は整いましたが、「同意する」のチェックボックスが少しずれていたりして不自然ですね。
コードを追加して直していきましょう！
ちょっと長いですが、このコードをコピペしてみてください！
.elementor-form .elementor-field-type-acceptance .elementor-field-option{
display:flex;
justify-content: center; /* 横の中央よせ */
align-items:center; /* 縦の中央よせ */
column-gap:6px; /* チェックボックスとテキストの間隔 */
}
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]{
-webkit-appearance:none;
appearance:none;
position:relative;
width:20px;
height:20px;
border:1.5px solid #92003B; /* 枠線の太さと色 */
border-radius:3px; /* 枠線の丸み */
background:#fff; /* 背景色 */
cursor:pointer;
margin-top: 2px; /* 上下ずれ微調整 */
}
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]:checked{
background:#92003B !important; /* チェックしたときの背景色 */
}
.elementor-form .elementor-field-type-acceptance input[type="checkbox"]:checked::after{
content:"";
position:absolute;
top:4px;
left:3px;
width:12px;
height:6px;
border-bottom:2px solid transparent; /* チェックの太さ */
border-left:2px solid transparent; /* チェックの太さ */
transform:rotate(-45deg);
border-color:#ffffff; /* チェックの色 */
}こんな感じで、見た目が整いました！！同意したくなりますね！
まとめ
フォームウィジットの項目で、タイプ Acceptance・HTMLを駆使 → CSSで整える という流れでした。
ぜひ活用してみて、しっかりとしたフォームをelementorで作ってみてください！
引き続きコピペでelementor制作を拡張する記事を書いていきますので、ご期待ください〜！
本日もお疲れ様でした！
