WordPressにプラグインContact Form 7をインストールし、チェックボックスをコントロールに追加したところ、チェックが全く出来なくなるケースの解消方法です。

なお、バージョンは以下の通りです。

起きる事象はこちらの図の通りです。正常にチェックボックスは表示されるのですが、なぜかクリックしてもチェックがつきません。

ちなみに、Contact Form 7の設定画面では、この場所はこのように指定しています。

なお、対象となるコントロールをdivタグでくくっています。divタグを使っているのは、制作状況のように縦にチェックボックス項目を配置した項目が複数あり、それらの項目同士を横に並べるためです。従ってチェックボックスのチェックがうまく出来ないのはdivタグが原因ではありません。念のためid=”yoursituation”が示すスタイルを示しておきます。

これは、図のように<span class=”wpcf7-form-control-wrap”>でposition:relative;が指定されているためです。なので、解消するにはposition:inherit;とすると良いでしょう。

これでチェックができるようになりました。