ContactForm 7のラジオボタン・チェックボックス・セレクトメニューの外観を変える

Contact Form 7をスマホでも操作し易くしたい

デフォルトのラジオボタン・チェックボックス・セレクトメニュー
WordPressで問い合せフォームを作成する場合、よく使われるのがContact Form 7でしょう。

フォームタグ生成モーダルウインドウで所定の項目を設定するだけでテキストボックスやラジオボタンを表示させるショートコードを発行したり、メール送信の設定や内容を細かくカスタマイズ出来たり、reCAPTCHAが使えたり、他のプラグインと連動させる事でデータベースに保存(Flamingo)したりと多機能で設定もし易いプラグインです。

が、CSSで表示をカスタマイズしようとすると、途端に難しくなります。
特にスマホやタブレット用にボタンを大型化する場合、工夫が必要になります。

Contact Form 7が書き出すhtml codeの特徴

それは'<input type=”text” />’が幾重にも'<span>’で囲まれた複雑なhtmlとなっているからです。

通常、選択肢のグループが ‘radio_sample’ で ‘value’ が ‘ラジオボタンA’ と ’ラジオボタンB’ のラジオボタンをラベル付きで表示させる場合、

ちょい古い記述法では、

と記述されるところが、 ‘Contact Form 7’ では

と一気に煩雑なものになります。

どんな表示にカスタマイズするか

デフォルト表示のままでは、スマホなどで操作し難いタイプ属性の

  1. 「ラジオボタン」
  2. 「チェックボックス」
  3. 「セレクトメニュー」

の3タイプを、クリックエリアを指で操作し易い大きいものカスタマイズしてみます。

カスタマイズ後の表示の挙動

  1. 「ラジオボタン」は、同じグループのボタンで、defoultに設定したものが有れば ‘on’ になります。以降、クリックしたボタンが ‘on’ になります。既に ‘on’ だったボタンは、別のボタンがクリックされると ‘off’ になります。
  2. 「チェックボックス」は、同じグループでも複数のボタンを ‘on’ にできます。 既に’on’ になっているボタンをクリックすると ‘off’ になります。
  3. 「セレクトメニュー」は、クリックエリアを指で操作し易いサイズにします。

iPhoneでの表示はこんな感じです。(↓)
iPhoneでのラジオボタン・チェックボックス・セレクトメニュー

実際の操作感はこちらで確認できます。

カスタマイズ方法

先に、Contact Form 7が書き出した(一部カスタマイズで付け加えたクラス有り)ラジオボタン・チェックボックス・セレクトメニューのあるフォームのhtmlを載せておきます。

‘label’要素と’appearance’プロパティに注目

ラジオボタン・チェックボックスに関しては、クリックした’input’要素自体の表示を変えるのではなく、そのparentの’lavel’要素の表示をカスタマイズする事で表示を変えてやります。
に ‘radio_checked’ クラスを追加し、cssで ‘radio_checked’ クラスの表示を変えてやります。

このクラスの追加はjQueryで行います。
今回のスクリプトはjQuery 1.6以降で使用できます(jQuery 2及び3でも使用可)。

ラジオボタン・チェックボックス・セレクトメニューそれぞれのカスタマイズ方法は以下の通り。

ラジオボタン

ラジオボタンやチェックボックスの’input’タグは、cssをカスタマイズしても表示を変えられません。’input’自体の表示を変えるのではなく、そのparentの’lavel’要素の表示をカスタマイズする事で表示を変えてやります。
jQuery 1.6以降がインストールされた環境で使用できます(jQuery 2及び3でも使用可)。

セレクト

セレクトメニューの’select’タグも、cssのカスタマイズは一工夫必要です。cssの’select’の’appearance’プロパティを’button’でボタン化してやるか’none’で非表示にします。
こうして本来のセレクトのメニューを開く前の表示(セレクトメニューの際)を
このやり方は、セレクトの複数選択させない設定(ContactForm 7の[select]内にmultipleが入っていない)場合にだけ有効です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です