Contact Form 7でCheckboxが効かなくなる場合の対応法


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これでチェックができるようになりました。



ホームページを5,6年ぶりにリニューアルしました


先日の6/14土曜日にホームページをリニューアルし、リリースしました。
2008年からだから5,6年ぶりの刷新です。

今回はベースとなるCMSをXOOPSからWordPressに変更しました。

前回はXOOPSをベースにプラグインの形でWordPressを導入しました。が、それ以来、WordPressが長足の進歩を遂げました。私も5年ほど前にフルWordPressベースのホームページを作成・納入しており、その実力はすでに知っていたのですが、自らのホームページは後回しになってしまっており・・

今回は実はbasercmsによる構築を試行していました。が、ホスティングサーバーのOSや各種ソフトウェアのアップグレードの狭間にあったためか、なかなかうまくいきませんでした。これに手間取ってホームページのリニューアルが後回しになるのは避けたい。そんな思いでWordPressでの構築を優先することにしました。

今回はトップページも含めて全面でのWordPress導入です。ベースとなるテーマはcelestial-liteを採用しました。ヘッダ画像の変更を手始めとし、バナーからプレーンスタイルのページをサイドバー形式に変えたのが大きな変更点です。あとはheader.phpとpage.phpに手を入れた以外は、cssの変更で対応しました。style.cssとbootstrap.css、forms.css、menus.cssです。

XOOPSからのデータベースデータの退避も行いましたが、結局インストールせず、一件一件、手でコピー&ペーストによるブログ移設を行いました。

あとは、liblarで132件書き込んだブックレビューの移設、それとTumblrでそれぞれ数十件書き込んだ駅鉄、蓋鉄、さらには映画.comに書き込んだ映画レビューの移設とアメブロに書き込んだ観劇レビューの移設も今後行う予定です。

こちらのブログおよびホームページも今後ともよろしくお願いいたします。