WordPress・Contact Form7、MW WP Form共通　細かなデザイン調整方法

2013/11/25 2014/08/10

Contact Form7、MW WP Form共通　デザイン調整方法

ラジオボタン、チェックボックスの並びの調整

WordPressでお問い合わせフォームと言えば！「Contact Form7」と言われるほどメジャーな存在ですが、「MW WP Form」というフォームもありますよ、という記事を書きました。（「WordPressのおすすめの確認画面付きお問い合わせフォームプラグイン・MW WP Form」参照）
　
2014.02.24　追記
「WordPressの確認画面付フォーム MW WP Form詳細解説」にもMW WP Formの詳細解説ページを作成しましたので、合わせてご覧ください。
　
　
2014.06.07　追記
Contact Form 7使い方の詳細解説については「Contact Form 7使い方詳細解説・WordPressメールフォーム」に書いていますので、そちらを参照してください。
　
　
ですが、細かなデザインをするうえで、ラジオボタンやチェックボックスの処理が結構わからずに困ってしまっていました。
　
今日は、その方法の紹介です！
基本的には、ContactForm7の記述方法で記述していますが、同じやり方が MW WP Formでも使えますので、同様に試してみてください。
　
　
ラジオボタンを例にとってみましょう。
通常、ラジオボタンは、下記の様に設定します。
　
—————————-
らじお 
[radio radio-315 “あああ” “いいい” “ううう”] 
—————————-
　
この場合、↓このように表示されます。
　
—————————-

—————————-
　
ですが、実は一つの「[radio …..]」の中にすべての項目を入れてしまう必要はないのです。（知ってる人は知っていると思いますし、いろいろ試す方は同じように試すと思いますが．．．）
　
IDさえ同じものを設定してあれば、それは一つのラジオボタンとして認識してくれます。
そのため、縦に並べたければ、下記の様に記述します。
—————————-
らじお 
[radio radio-315 “あああ”] 
[radio radio-315 “いいい”] 
[radio radio-315 “ううう”]
—————————-
　
2014.08.10追記
コメントに質問があり、上記の説明が分かりにくいため追記します。
上記に「IDさえ同じものを設定してあれば」と書いていますが、Contact From 7では下記の画像ように「名前」の値を同じものに設定します。

　
MW WP Formでは、下記のように「name」の値を同じものを設定します。
—————————-
ラジオボタン 
[mwform_radio name=”radio” children=”あああ”] 
[mwform_radio name=”radio” children=”いいい”] 
[mwform_radio name=”radio” children=”ううう”]
—————————-
　
　
その設定を行うと、↓このように表示されます。
　
—————————-

—————————-
　
項目と項目の間に全角スペースを入れて調整する方法もできます。
—————————-
らじお 
[radio radio-315 “あああ”]＿＿[radio radio-315 “いいい”]＿＿[radio radio-315 “ううう”] 
—————————-
※上記は「＿＿」で記述していますがそこに全角スペースなどを入れて調整すればいいかと思います。
　
この場合、↓このように表示されます。
　
—————————-

—————————-
　
ここでは簡易的な調整方法をご紹介していますので、スペースを入れるといった手抜きな調整方法を取っていますが、項目ごとに分割する方法さえわかれば、あとは divタグなどを入れて cssで本格的に設定をすることもできるでしょう。
　
大した話ではないんですけども、これに気づくまでに結構時間がかかってしまったので、同じように悩んでいる方がいれば、と思って書いてみました。

- WordPress

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Comment

通りすがりより:

2014年8月10日 9:58 AM

はじめまして。
同じやり方が MW WP Formでも使えますとありますが、IDを一致させればいいのでしょうか。
試してみましたがうまくいきません。
分離ができるとかなり便利なのですが・・・

返信
通りすがりより:

2014年8月10日 10:05 AM

連続して申し訳ありません。
うまくいきました。
MW WP Formではidではなく、nameを一致させればいいようですね。
お騒がせしました。

返信
エス技研より:

2014年8月10日 4:20 PM

「通りすがり」さん、コメントありがとうございます。
ご連絡の件、記事を改めて読みましたが、確かに分かりにくいですね。
分かりにくいと思いましたので、記事を追記させていただきました。

返信
Jさんより:

2015年11月18日 3:18 PM

Contact Form7、MW WP Form共に、ラジオボタンを画像にして選択させるようなことってできませんでしょうか？知恵をお貸し下さい。

返信
- エス技研より:
  
  2015年11月18日 10:37 PM
  
  Jさん、コメントありがとうございます。
  ラジオボタン項目の設定として class、idの設定をすることが出来ますので、それを利用してテキストを画像に置き換える処理を組んでみてはいかがでしょうか？
  CSS、JavaScriptの設定はあまり詳しくはないので、具体的な方法は分かりかねますが．．．
  
  返信

エス技研へ返信するコメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: 技術ブログの悲劇。複数ブログをWordPressに引越して分かったこと

ブログによってユーザ層が違う。ユーザ層が違えば検索エンジンやブラウザ等が違うため、まずアクセス解析をやってみることが大事。一つの分析方法を紹介。

: WordPressの Link Managerでブックマーク（リンク）の管理を行う

ウィジェットのブックマーク（リンク）はプラグイン化された「Link Manager」を使って設定します。その使い方の解説です。

: WordPressグローバルナビ・メニューの編集の方法解説

グローバルナビであるメニューの編集方法の解説です。メニューの管理画面の使い方の解説と設定のポイント、テーマによって設定する項目が違う点などを解説します。

: FC2からWordPressに引越でcanonicalとmeta refreshで転送設定

FC2からWordPressに引越する際の転送設定はcanonicalとmeta refreshの設定でユーザへもGoogle検索エンジンにも引越し情報を伝えられます。

: Custom Post Type UIでカスタム投稿を設定し編集する方法解説

カスタム投稿を追加、管理するプラグインCustom Post Type UIの使い方の解説です。プラグインの解説ではあるものの、カスタム投稿の仕様の解説でもあります。

: WordPress　画面が真っ白になる不具合があった場合の対応の一つ

WordPressで画面が真っ白になる不具合があった場合の対応方法の説明です。PHPでエラーが起こっている場合がほとんどですがその対処方法です。

: seesaaからWordPressに引越。インストールなど必要な全てを解説

seesaaブログからWordPressへの引越し解説。他のブログにはないseesaaブログからcanonicalとリダイレクトの設定方法を実装！

: WordPressで指定カテゴリにnoindexをプラグインなしで設定。特定の記事は外す処理も

指定したカテゴリのみnoindexをプラグインなしで設定する関数を解説。指定したカテゴリの中でも指定した記事はnoindex設定しないオプションを装備。その処理とnoindexを設定すべき理由を解説。