WordPressで簡単にお問い合わせフォームを作ることが出来るプラグインの「Contact Form 7」。
ページが表示された際のラジオボタンの初期選択を条件によって切り替えたいと思ったことはありませんか？

今回の記事では「Contact Form 7」で条件によってラジオボタンの初期選択を切り替える方法をご紹介したいと思います。

条件でラジオボタンの初期選択を切り替える方法

Contact Form 7の設定

まず初めにフォームを設置するページのスラッグ名は「contact」とします。

そして、「Contact Form 7」のラジオボタンは以下のように設定します。

ラジオボタンの名前（name属性）はcategory、オプションは「お問い合わせ」「採用について」「その他」、このように設定します。

[radio category default:1 "お問い合わせ" "採用について" "その他"]

このコードでは「お問い合わせ」が初期選択されている状態になります。

以下の記事では「Contact Form 7」でラジオボタンの初期選択を未選択状態にする方法を解説しています。

【Contact Form 7】ラジオボタンのデフォルト選択肢を未選択状態にする方法

リンクボタンの設定

続いて、他ページに設置するフォームページへのリンクは以下のようにします。

「お問い合わせ」が選択された状態の場合は、特に設定は必要ありません。

<a href="<?php echo home_url('contact'); ?>">フォームへ</a>

「採用について」「その他」の場合はそれぞれ以下のようにURLにパラメータを設定します。

<!-- 「採用について」の場合 -->
<a href="<?php echo home_url('contact?key=採用について'); ?>">フォームへ</a>

<!-- 「その他」の場合 -->
<a href="<?php echo home_url('contact?key=採用について'); ?>">フォームへ</a>

jQueryで制御

「Contact Form 7」で条件によってラジオボタンの初期選択を切り替える場合、jQueryを使用します。

まずは、以下のようにjQueryを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

そして以下のjQueryコードで条件によってラジオボタンの初期選択を切り替えます。

$(window).on('load',function(){
    
    let url = new URL(window.location.href);
    let params = url.searchParams;
    let param = params.get('key');
    if( param ){
        $('input:radio[name="category"]').attr('checked',false);
        $('input:radio[name="category"][value="' + param + '"]').attr('checked',true);
    }

});

URLにパラメータを設定しているので、ページを表示した際、パラメータが存在していれば、それに対応する選択肢が選択された状態に切り替わります。

解説

let url = new URL(window.location.href);
let params = url.searchParams;
let param = params.get('key');

上記のコードでURLを取得し、そのURLから「key」のパラメータ値を変数に格納します。

if( param ){
    $('input:radio[name="category"]').attr('checked',false);
    $('input:radio[name="category"][value="' + param + '"]').attr('checked',true);
}

パラメータが無ければ「お問い合わせ」が選択されたままとなり、パラメータが設定されていれば「お問い合わせ」の選択を解除し、「value」がパラメータ値と一致する選択肢が選択された状態になります。

以上で条件によってラジオボタンの初期選択を切り替えるカスタマイズは完了です。

まとめ

いかがでしたか？
この方法でユーザーの入力の手間を軽減出来たり、入力間違いを防ぐことも可能になります。
ひとつのフォームで使いまわす場合は積極的に取り入れていきたいカスタマイズですね。