【WordPress MW WP Form】URLパラメーターで遷移先のフォームのselect要素を選択する方法

【WordPress】URLパラメーターで遷移先のフォームのselect要素を選択する方法

こんにちは。

UVERworld布教クリエイターのゆうや(@yuyaphotograph)です!

本記事では、URLパラメーターで遷移先のフォームのselect要素を選択する方法をご紹介します。

「URLパラメーター」というのは、「?変数=値」というようにURL末尾に付け加える文字列のことを言います。

身近な例で言えば、ブログのサイト内検索結果ページのURLが分かりやすいでしょう(^o^)

当ブログで、「ONE PIECE」と検索した時の検索結果ページのURLはこんな感じになります。

https://yuyauver98.me/?s=ONE+PIECE

ドメインの末尾に「?s=検索ワード」となっていることが確認できますね。

sはsearchの頭文字です。

今回はそのURLパラメーターを利用して値をセットしてみます。

それでは参りましょう!

注意
WordPressで簡単に問い合わせフォームが作成できるプラグイン「MW WP Form」での実装例となりますのでご了承ください。

URLパラメーターでフォームのselect要素を選択できるようになろう!

実装イメージ図の共有

実装したいことのイメージ図を作ったのでご覧ください(^o^)

↓↓↓

URLパラメーターでフォームのselect要素を選択する

ボタンが3つあってクリックしたボタンによって選択される値が変わるというやつ

拙い図ですが伝わりましたかね?笑

MEMO
「項目1」などのボタンはaタグで実装する想定です。

URLパラメーターでselect要素を選択するポイント

今回の実装の要点をまとめると以下のようになります。

↓↓↓

  1. aタグのURLに条件分岐判定用のURLパラメーターをつけておく
  2. functions.phpにカスタムクエリなどを追加しておく
  3. 遷移先ページでswitch文でURLパラメーターの値によって条件分岐し該当のoptionタグを選択状態にする

それでは、1つずつコードを見ていきましょう。

aタグのURLにURLパラメーターをつける

index.php
<a href="<?php echo esc_url( home_url( '/contact/?option_id=1' ) ); ?>">項目1</a>
<a href="<?php echo esc_url( home_url( '/contact/?option_id=2' ) ); ?>">項目2</a>
<a href="<?php echo esc_url( home_url( '/contact/?option_id=3' ) ); ?>">項目3</a>

?option_id=数字」が肝です。

数字は遷移先ページでのswitch文で使用します。

functions.phpにカスタムクエリなどを追加する

functions.php
add_filter( 'mwform_value_mw-wp-form-69', 'my_mwform_value', 10, 2 );
function custom_query_vars( $public_query_vars ) {
$public_query_vars[] = 'option_id';
    return $public_query_vars;
}
add_filter( 'query_vars', 'custom_query_vars' );

switch文で条件分岐する

page-contact.phpでscriptタグを追加してその中に以下を書いて下さいまし(^o^)

page-contact.php
var option_id = '<?= get_query_var('option_id') ?>';
  switch(option_id){
    case '1':
    document.querySelector('option[value="項目1"]').setAttribute('selected', 'true');
    break;
    case '2':
    document.querySelector('option[value="項目2"]').setAttribute('selected', 'true');
    break;
    case '3':
    document.querySelector('option[value="項目3"]').setAttribute('selected', 'true');
    break;
    default:
    document.querySelector('option[value="選択してください"]').setAttribute('selected', 'true');
    break;
  }

条件分岐を行った後、該当のoptionタグにsetAttributeメソッドを用いてselected属性の値をtrueにすることで予め選択した状態で表示することができます!

まとめ

以上、URLパラメーターで遷移先のフォームのselect要素を選択する方法をご紹介しました。

ぼくは友人のエンジニアに今回紹介した方法をやってもらい対処できたので同じ様に困っている方、きっといると思います。

本記事がその方の助けになれれば幸いです(^o^)

最後までご高覧いただきありがとうございました!

コメントを残す

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