Contact Form7でラジオボタンを必須にする方法

         

プラグイン

Contact Form7でラジオボタンを必須にする方法

2019年01月28日 8:00 

Contact Form7でラジオボタンを必須にする方法

おはようございます!社員Aです👩

今回は、WordPressのお問い合わせプラグインContact Form7でラジオボタンを必須にする方法をご紹介します。

実は、Contact Form7のラジオボタンはデフォルト状態では必須化することができません。

それでも、フォームでラジオボタンを必須にしたい場合もあるかと思いますので、必須にする方法をまとめていきます。



 

公式では必要ないとの見解…

Contact Form7の公式サイトでは、radioボタンの必須化は必要ないと記載してあります。

入力必須版の radio (“radio*”) はありません。Contact Form 7 が “radio*” を提供しない理由は、そもそもラジオボタンとは入力必須のものだからです。このあたりのことについては HTML の仕様を見た方が早いでしょう。

とはいっても、サイトによってはラジオボタンで必須化したい状況もあるかと思います。

今回ご紹介する方法は、function.phpに追記するだけでラジオボタンを必須化することができますのでとても簡単です。

 



Contact Form7のラジオボタンを必須化する方法

1.function.phpに下記を追加

まずは、function.phpに下記を追記します。

add_action( 'wpcf7_init', 'wpcf7_add_shortcode_radio_required' );
  
function wpcf7_add_shortcode_radio_required() {
    wpcf7_add_shortcode( array( 'radio*' ), 
        'wpcf7_checkbox_shortcode_handler', true );
}
  
add_filter( 'wpcf7_validate_radio*', 'wpcf7_checkbox_validation_filter', 10, 2 );
B!

 

2.Contact Form7作成画面でラジオボタンにアスタリスク(*)をつける

Contact Form7では、アスタリスク(*)をつけることで必須項目と認識されます。

そのため、Contact Form7作成画面でラジオボタンを追加する際に、下記のように記述します。

[radio* your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]

 

まとめ

function.phpにソースコードを追記するだけで、デフォルトでは出来なかったラジオボタンの必須化が簡単に出来ました。

フォーム内で性別を選択させたり、その他色んなシーンで使える技だと思うので備忘録としてまとめておきたいと思います。

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺