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

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

WordPress
Contact Form 7
FireFox
Google Chrome
・・・4.6.1
・・・4.5.1
・・・50.0
・・・54.0.2840.99 m

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


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


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


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


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



コメントを残して頂けると嬉しいです