【WordPress】「MW WP Form」のラジオボタンを工夫

WordPressのメールフォームプラグイン「MW WP Form」のラジオボタンを押すと、その押したものごとに違う選択肢が表示されるように組んでいるところです。

プラグインのショートコードで書かないとラジオボタンのバリデーションが働かない問題に取り組みまし…た。

はじめに サンプル画面

選ぶと下に新しい選択肢が表示される作りです↓

このスクリプトの動作確認ポイントはふたつ。

  1. 選択したら下に新たな選択肢が表示されるか(display:block;になるか)
  2. 何も選択しないで確認ボタンを押したら「必須項目です。」が表示されるか(バリデーションが働いているか)

それで、まずラジオボタンとドロップダウンを作って、これでうまくいくぞって思ったはずでした。

以前から、Wordpressのお問い合わせフォームはContact Form 7を使っていましたが、確認画面と完了画面の都合でMW WP Form をいじることになったついでに気になったことをメモ。久しぶりのjQueryに頭が…ウッ…。ラジオボタンを押すと質問内容が変わるようにするいわゆ...

なんと、MW WP Formで動かしてみたところ……

  • ショートコードにするとラジオボタンにidもonclickもつけられないので前回作ったスクリプトが使えない
  • プラグインのショートコードで書かないとラジオボタンのバリデーションが働かない

という事件が発生しました。

MW WP Formとは

WordPressでお問い合わせフォームを簡単に作れるプラグインです。

自動送信メールや完了画面、バリデーションにも対応。

ショートコード&バリデーションで簡単に実装できる反面、ショートコードでないとバリデーションができない場合も??

MW WP Form でラジオボタンを設置する

まず完成品のパターンから紹介します。

(1) フォーム編集画面のコード

ラジオボタンの部分はショートコードになっています。
ショートコードはフォーム編集画面でポチポチやるだけで作ってもらえます↓

(2) CSS

私の場合は独自テーマのCSSに追記しましたが、とりあえずやってみたいという人は固定ページの側に置けば適用されます。フォーム編集画面ではなく固定ページに置いてください。

<style>で囲って置くだけです。その下にMW WP Formのショートコードを設置します。

(3)jQuery

jQueryも外部で指定したりプラグインを使ったりすることになると思います。私の場合はテーマのphpに直接書き加えました。

今回のjQueryは、チェックの入っているラジオボタンの値(value)を取得して、変数(var)に代入しておき、その値によりif文で分岐するようにしたものです。

jQueryを書き忘れないこと、そしてjQuery( function( $ ) {……});を忘れないことが大切です。前回やらかしましたから…!笑

動くパターンがわかればOKの方はここで終了です!

ここから先は動かないパターンのご紹介になります。

動かなかった例

1) HTML直書きしたらバリデーションが動かなかった例

ラジオボタンをショートコードではなくHTMLで書いてみたところ、うまく動きませんでした。

ラジオボタン部分

全体像

2)jQueryが動かなかった例

idがつけられない

ショートコードにすると個別のinputタグにidをつけるということが不可能になるので、idを条件分岐に使うことができなかった。

onclickが使えない

ショートコードにすると、onclickをショートコード内にかいてもHTMLに出力されなかった。

おわりに

WordPressじゃなくてjQueryで結構な時間悩んでしまいました。

でもおかげでCodepenにも詳しくなれたので良かったと思います!!

See the Pen ラジオボタンでドロップダウン4(値で分岐) by mp-webmagic (@mp-webmagic) on CodePen.0