エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      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でも使えますので、同様に試してみてください。
 
 
ラジオボタンを例にとってみましょう。
通常、ラジオボタンは、下記の様に設定します。
 
—————————-
<p>らじお<br />
[radio radio-315 “あああ” “いいい” “ううう”] </p>
—————————-
 
この場合、↓このように表示されます。
 
—————————-
20131207_wordpress_1
—————————-
 
ですが、実は一つの「[radio …..]」の中にすべての項目を入れてしまう必要はないのです。(知ってる人は知っていると思いますし、いろいろ試す方は同じように試すと思いますが...)
 
IDさえ同じものを設定してあれば、それは一つのラジオボタンとして認識してくれます。
そのため、縦に並べたければ、下記の様に記述します。
—————————-
<p>らじお<br />
[radio radio-315 “あああ”]<br/>
[radio radio-315 “いいい”]<br/>
[radio radio-315 “ううう”]</p>
—————————-
 
2014.08.10追記
コメントに質問があり、上記の説明が分かりにくいため追記します。
上記に「IDさえ同じものを設定してあれば」と書いていますが、Contact From 7では下記の画像ように「名前」の値を同じものに設定します。
20131207_wordpress_4
 
MW WP Formでは、下記のように「name」の値を同じものを設定します。
—————————-
<p>ラジオボタン<br>
[mwform_radio name=”radio” children=”あああ”]<br>
[mwform_radio name=”radio” children=”いいい”]<br>
[mwform_radio name=”radio” children=”ううう”]</p>
—————————-
 
 
その設定を行うと、↓このように表示されます。
 
—————————-
20131207_wordpress_2
—————————-
 
項目と項目の間に全角スペースを入れて調整する方法もできます。
—————————-
<p>らじお<br />
[radio radio-315 “あああ”]__[radio radio-315 “いいい”]__[radio radio-315 “ううう”] </p>
—————————-
※上記は「__」で記述していますがそこに全角スペースなどを入れて調整すればいいかと思います。
 
この場合、↓このように表示されます。
 
—————————-
20131207_wordpress_3
—————————-
 
ここでは簡易的な調整方法をご紹介していますので、スペースを入れるといった手抜きな調整方法を取っていますが、項目ごとに分割する方法さえわかれば、あとは divタグなどを入れて cssで本格的に設定をすることもできるでしょう。
 
大した話ではないんですけども、これに気づくまでに結構時間がかかってしまったので、同じように悩んでいる方がいれば、と思って書いてみました。

 - WordPress

GoogleAdwords

GoogleAdwords

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

Comment

  1. 通りすがり より:

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

  2. 通りすがり より:

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

  3. エス技研 より:

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

  4. Jさん より:

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

    • エス技研 より:

      Jさん、コメントありがとうございます。
      ラジオボタン項目の設定として class、idの設定をすることが出来ますので、それを利用してテキストを画像に置き換える処理を組んでみてはいかがでしょうか?
      CSS、JavaScriptの設定はあまり詳しくはないので、具体的な方法は分かりかねますが...

Message

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

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

BackWPupでバックアップ・エラー発生の具体的対処方法事例6

BackWPupその6。エラーが起こったときの対処方法の具体例紹介です。

WP-PostRatingsでWordPressに自由度が高い口コミサイトを構築

口コミの評価点を投稿する機能に特化したプラグインで、多様なイメージと投稿方法が用意されていてサイトにあったイメージを選択できます。

WordPressの投稿プレビューのURLを変更する方法

プレビューを表示する際のURLを変更する方法の解説。「サイトアドレス (URL)」に基づいて編集されるURLを任意のURLに変更する場合の方法とその解説を行います。

WordPressのユーザ名を後から変更する方法。adminの使用は危険。

運用中のユーザ名を変更する方法を解説。かつてのデフォルト設定だった「admin」は誰もが使うIDのため非常に危険です。今からでも変更しましょう。

Search RegexでWordPress投稿の文字列を検索・置換する使い方解説

WordPressの投稿テキストを検索、置換するプラグイン Search Regexの使い方の詳細解説です。

WordPress 画面が真っ白になる対応の一つ デバッグモード

WordPressで画面が真っ白になる不具合があった場合などのために用意されているデバッグモードの解説です。

WordPressで特定のURL、ページ、ファイル単位でBasic認証を設定する方法

WordPressはURLはmod_rewriteにより疑似的に作られていますが、特定のページ、特定のURL、ファイル単位でBasic認証を設定する方法を解説します。ツールも紹介。

WordPressのSEOタイトル、キーワード、ディスクリプション編集解説

ヤフーやグーグルの検索結果を見ながらSEO視点でタイトル、ディスクリプションを書く際の基準を解説!スマホ対策も解説!

Theme My Loginの日本語翻訳ファイル Ver.6.4.5対応

Theme My Loginの日本語翻訳ファイルのダウンロードページ。WordPressの翻訳ファイルの設置方法、注意点、翻訳ファイルの作成方法なども解説。

WordPressのバージョンアップをしたら「the_content」でコンテンツが表示されなくなった

「the_content」でコンテンツが表示されないのは仕様が変更されたためでプログラムの修正が必要です。