エス技研

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.

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

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

  関連記事

SMTP Mailerでスパム判定回避。WP Mail SMTPで発生する送信エラーも対応
SMTP Mailerでスパム判定回避。WP Mail SMTPで発生する送信エラーも対応

WordPressからのメールをスパム判定されずに送信する「SMTP Mailer」の解説。SMTP MailerはPHP 5.6、7.0になってもSMTP接続でエラーにならない設定を搭載しているのが特徴。

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

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

AddQuicktagを使って WordPressの投稿を楽にする

投稿時にタグの入力を楽にしてくれるプラグイン「AddQuicktag」の使い方の説明です。クリック一つでタグを編集できます。

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

FC2からWordPressへの引越し解説。内容は引越しメインではなくこれからWordPressでブログを構築する方向けのブログ構築の解説記事です。

WordPressの管理画面と公開画面を別のドメインに分離して運用する方法

管理画面と公開画面のURLを違うドメインで設定・運用する方法を解説。管理画面と公開画面の場所を分離することでセキュリティ面でのメリットが大きくなります。

WordPressでダブルクォートなどの文字が自動変換?原因と対処方法

ダブルクォート、シングルクォート、HTMLタグなどが自動変換関数によって入力と違う形で表示されます。原因を2つの関数ごとに説明し、対応方法を3パターン提示します。

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成

WordPressの Google XML Sitemapsで WebMaster Tools用の sitemap.xmlを生成する方法を説明しています。

Contact Form 7使い方詳細解説・WordPressメールフォーム

WordPressの標準お問い合わせメールフォームである Contact Form 7の詳細な使い方の解説です。

Meta ManagerでWordPressのキーワード、ディスクリプションを編集

WordPressの基本機能にないキーワード、ディスクリプションを編集するプラグインMeta Managerの解説です。

WP Mail SMTP、WP SMTP、Easy WP SMTPでWordPressのメールのスパム判定を回避

WordPressから送信したメールがスパム判定される!そんな悩みを解決するプラグインを紹介。3種類にプラグインを比較しオススメを紹介。なぜスパム判定されるかの解説も。