Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

メールフォームの「送信する」ボタンの前に「個人情報保護方針にチェックする」のようなチェックボックスを見たことがある人も、多いのではないかと思いますが、

WordPressのContact Form 7を使った問い合わせフォームにも、チェックボックスをクリックしないとメール送信できない仕組み(同意チェック)を入れることは可能ですので、今回はその方法をについてご紹介します。

Contact Form 7で送信ボタンの前に同意チェックボックスを設置

管理画面左メニューから「お問い合わせ」>「コンタクトフォーム」をクリックします。
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

フォーム編集画面に進んで、
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

パーツの中から「承認確認」ボタンをクリックします。
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

承認確認を挿入する場所は[submit “送信”]ボタンの前です。

フォームタグ生成: 承諾確認ウィンドウが表示されるので、必要に応じて以下の項目を入力します。

承認確認の設定項目
名前 フォームのname
同意条件 チェックボックスの横に表示するテキスト
(例)規約に同意してチェック
オプション 初期設定でチェックボックスは任意になっているで
必須にする場合はチェックを外します
ID属性 フォームのID
クラス属性 フォームのクラス

今回は「規約に同意してチェック」を必須にするようにしました。
これで「タグを挿入」ボタンをクリックすると、
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

以下のようなタグが挿入されたことを確認されたら、

[acceptance acceptance-573] 規約に同意してチェック [/acceptance]

ページ下部の「保存」ボタンをクリックします。
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

チェックボックスの挙動確認

メールフォームの画面へ進み、チェックを入れないと送信ボタンがクリックできないことを確認してください。
Contact Form 7の送信ボタンの前に同意のチェックボックスを設置する方法

ブログを始めるならWordPressテーマSTORKがオススメ

理由は以下の記事でまとめています。

【STORK】有料テーマ購入を迷う人にストークをオススメする7つの理由2021年版

2019年6月1日

綺麗なデザインが最初から用意されているので、「ブログを書きたい」と思った時からすぐに始めることができます。しかも、執筆に便利なツールも一通りそろっているので、「書くことだけ」に集中できるという、ブロガーにとってはとても魅力的なテーマです。

是非STORKを試してみてくださいね★

関連記事

コメントを残す

ABOUTこの記事をかいた人

STORKのテーマやプラグインなど、WordPressを使ったアフィリエイトに関する記事を中心に紹介しています。そのほかにもMacやiPhone、HTML、CSS、Javascript、PHPなどの記事もちょこちょこ書いています★