WordPress・Contact Form7、MW WP Form共通 細かなデザイン調整方法
2015/12/27
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でも使えますので、同様に試してみてください。
ラジオボタンを例にとってみましょう。
通常、ラジオボタンは、下記の様に設定します。
—————————-
<p>らじお<br />
[radio radio-315 “あああ” “いいい” “ううう”] </p>
—————————-
この場合、↓このように表示されます。
—————————-
—————————-
ですが、実は一つの「[radio …..]」の中にすべての項目を入れてしまう必要はないのです。（知ってる人は知っていると思いますし、いろいろ試す方は同じように試すと思いますが．．．）
IDさえ同じものを設定してあれば、それは一つのラジオボタンとして認識してくれます。
そのため、縦に並べたければ、下記の様に記述します。
—————————-
<p>らじお<br />
[radio radio-315 “あああ”]<br/>
[radio radio-315 “いいい”]<br/>
[radio radio-315 “ううう”]</p>
—————————-
2014.08.10追記
コメントに質問があり、上記の説明が分かりにくいため追記します。
上記に「IDさえ同じものを設定してあれば」と書いていますが、Contact From 7では下記の画像ように「名前」の値を同じものに設定します。
MW WP Formでは、下記のように「name」の値を同じものを設定します。
—————————-
<p>ラジオボタン<br>
[mwform_radio name=”radio” children=”あああ”]<br>
[mwform_radio name=”radio” children=”いいい”]<br>
[mwform_radio name=”radio” children=”ううう”]</p>
—————————-
その設定を行うと、↓このように表示されます。
—————————-
—————————-
項目と項目の間に全角スペースを入れて調整する方法もできます。
—————————-
<p>らじお<br />
[radio radio-315 “あああ”]＿＿[radio radio-315 “いいい”]＿＿[radio radio-315 “ううう”] </p>
—————————-
※上記は「＿＿」で記述していますがそこに全角スペースなどを入れて調整すればいいかと思います。
この場合、↓このように表示されます。
—————————-
—————————-
ここでは簡易的な調整方法をご紹介していますので、スペースを入れるといった手抜きな調整方法を取っていますが、項目ごとに分割する方法さえわかれば、あとは divタグなどを入れて cssで本格的に設定をすることもできるでしょう。
大した話ではないんですけども、これに気づくまでに結構時間がかかってしまったので、同じように悩んでいる方がいれば、と思って書いてみました。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！
関連記事
-
-
Advanced Custom Fieldsの全項目解説・公開側表示編集編
Advanced Custom Fieldsは現時点でカスタムフィールドを設定する最高のプラグイン。それで入力した情報を取り出す方法を全て網羅して解説しました。
-
-
Advanced Custom Fields（ACF）のアドオン・ギャラリーの使い方解説
Advanced Custom Fieldsのアドオン・ギャラリーの解説記事。複数の画像を入力できる優れもので、画像のサイズ、容量などでの制限ができ、より厳密な管理が可能。
-
-
WP Multibyte PatchでWordPressの管理画面のイタリック体を解消
管理画面の一部の文字がイタリック（斜体）になっているのはプラグイン「WP Multibyte Patch」が有効になっていないためです。日本語を使うには必ず有効化しましょう。
-
-
SyntaxHighlighterの設定、カスタマイズ方法を解説。Crayonから乗換え、高速化にも最適
SyntaxHighlighter 3の設置方法、各機能の設定方法、オプション、デフォルト設定の変更方法を解説。Crayonから乗り替えるならこれしかない。
-
-
WordPressで口コミサイト構築ならMulti Ratingがおススメ
口コミの評価点を投稿する機能に特化。評価点を複数設定することができ、投稿後の評価点を編集することができる数少ないプラグイン。日本語にも対応。おススメ。
-
-
SEO効果絶大！PVもアップするWordPressの高速化プラグイン元祖Lazy Load
Lazy Loadは、画像を最初にまとめて読み込むことで発生するスピードの遅延を防ぎ、必要な画像から順番に読み込むことでページの表示スピードを向上させるプラグインです。
-
-
WP Reviewを使ってWordPressのレビューサイトを構築
レビューサイトを構築するプラグインです。複数の評価者による評価点投稿やページごとに配色を変更する機能、機能満載なウィジェットなどレビューサイト構築に最適です。
-
-
カスタムフィールド決定版！Advanced Custom Fields全項目完全解説・管理画面編
カスタムフィールドを設定する最高のプラグイン。設定できる項目を全て網羅して解説。投稿の項目だけではなく、カテゴリやユーザ情報の項目を増やすことにも使えます。
-
-
Comment Rating FieldでWordPressのコメントに口コミサイト機能を追加
口コミサイトを構築するためのプラグイン。評価点を投票する仕組みをコメント投稿機能に追加する方法で実現。口コミサイトを構築するには十分な機能を提供。
-
-
EWWW Image Optimizerで画像の圧縮でWordPressを高速化
ページ表示の高速化に使うEWWW Image Optimizerの紹介です。英語で書かれているために取っつきにくいですが設定は3カ所。画像の圧縮もワンクリック。超簡単！
Comment
はじめまして。
同じやり方が MW WP Formでも使えますとありますが、IDを一致させればいいのでしょうか。
試してみましたがうまくいきません。
分離ができるとかなり便利なのですが・・・
連続して申し訳ありません。
うまくいきました。
MW WP Formではidではなく、nameを一致させればいいようですね。
お騒がせしました。
「通りすがり」さん、コメントありがとうございます。
ご連絡の件、記事を改めて読みましたが、確かに分かりにくいですね。
分かりにくいと思いましたので、記事を追記させていただきました。
Contact Form7、MW WP Form共に、ラジオボタンを画像にして選択させるようなことってできませんでしょうか？知恵をお貸し下さい。
Jさん、コメントありがとうございます。
ラジオボタン項目の設定として class、idの設定をすることが出来ますので、それを利用してテキストを画像に置き換える処理を組んでみてはいかがでしょうか？
CSS、JavaScriptの設定はあまり詳しくはないので、具体的な方法は分かりかねますが．．．