[WordPress] Contact Form 7に利用規約に同意フィールドを追加する

WordPressでContact Form 7のような無料のプラグインや Quformと有料のプラグインを使用して簡単にお問い合わせフォームをブログに追加することができます。

基本的なContact Form 7の使い方は ここを参考にしてみてください。

[WordPress] Contact Form 7に利用規約に同意フィールドを追加する

この記事では、Contact Form 7に利用規約（利用規約、サービス利用規約等の名称は異なる場合があります）や個人情報保護方針などに同意フィールドを追加する方法を説明します。

この方法は、Quformや AvadaのFormにも適用が可能です。

まず、同意フィールドはチェックボックスフィールドを追加して同意フォームを作成することができます。 次のような形式でチェックボックスを追加します。

<p>이용약관(필수) [checkbox* checkbox-857 "동의"] </p>

利用規約やプライバシーポリシーは、リンクで接続してもされるが、ここでは textareaを使用して追加します。 次のような形式で teaxtarea タグを直接追加すると、種別についてはボックスの形で出力されます。 そして 無効を追加する必要がユーザーがプライバシーポリシーの内容を変更したり、削除することができません。

<p><textarea id='mytextarea' disabled>이용 약관 ("약관")
최종 更新: (날짜).
제1장 : 총칙
제2장 : 서비스 이용계약
제3장 : 계약당사자의 의무
....
</textarea></p>

一方、次の形式で textareaを追加する場合を考えてみることができます。

[textarea id:mytextarea your-message]
foo
bar
[/textarea]

この場合は、次のようなjQueryを使用して textarea フィールドを無効にすることができます。 その後、 textareaにあらかじめ入力されている内容を、ユーザーが変更することができなくなります。

$("#mytextarea").attr("disabled","disabled");

これにより、次のような形で利用規約に同意のフィールドが追加されます。

利用規約に同意のチェックボックスを選択しない場合、エラーメッセージが表示され、フォームが送信されません。

Quformでも同様の方法で利用規約を追加することができます。 Quformの場合上部のHTML要素を任意の場所にドラッグした後のHTMLコードを直接挿入します。

古いバージョンでは、右側のボックスに「HTML「要素をドラッグして挿入するだけです。

Avada テーマの Avada フォーム

Avada テーマや Enfold テーマ、あるいはDiviテーマなどにも、独自のコンタクトフォームの機能を提供します。 Avada テーマの場合 Avada テーマの Avada Form出会う（コンタクトフォーム）を参照してみてください。

Avada テーマで提供されるフォームを使用している場合、Code Block要素を追加して上記で紹介した方法で個人情報保護方針フレーズやサービス利用規約フレーズなどを追加することができます。 また、CSSを使用してTextareaフィールドのサイズを調整することができ、スクロールバーを表示または非表示にすることができます。

• Showing vertical scrollbar always in a textarea field（textareaフィールドで常に垂直スクロールバーを表示する）

WordPressユーザーCSSコードを追加する方法は、 ここを参照してみてください。

メモ：

• お問い合わせフォームプラグインContact Form 7の概要
• Quformコンタクトフォームプラグインは、段階的にフォームを入力することができる複数のページ機能を追加
• Contact Form 7フィールドのサイズを調整する