やりたいこと

お問い合わせの「件名」をセレクトボックスで選択させつつ、送信先も変えたい

 

悩みポイント

１. プラグイン「Contact Form 7」のセレクトボックスで内容に応じて送信先を変更する方法を試す

２. 確認画面を表示するプラグイン「Contact Form 7 Multi-Step Forms」を導入し、値を受け取ったとき、表示したい方の日本語ではなく送信先のアドレスが取れてきてしまう

この問題について1個ずつ詳細に書いていきます。

 

１. プラグイン「Contact Form 7」のセレクトボックスで内容に応じて送信先を変更する方法を試す

・ 「contact form 7」ではセレクトボックスを作りたい場合本来はこう書きます。

[select* your-subject “選択肢1” “選択肢2” “選択肢3”]

選択肢1を選択した場合の値

[your-subject] → 選択肢1

 

・ 次に選択するものによって送信の宛先を変えたい場合はこんな書き方ができるみたいです。

    セレクトボックスの選択値に応じて送信先が変更されます。

    [select* your-subject “選択肢1|contact@mdb.co.jp” “選択肢2|form@mdb.co.jp” “選択肢3|7@mdb.co.jp”]

    選択肢1を選択した場合の値

    [your-subject] → contact@mdb.co.jp

    [_raw_your-subject] → 選択肢1 ※メール本文などメールタブ内でしか使用できない

     

    ２. 確認画面を表示するプラグイン「Contact Form 7 Multi-Step Forms」を導入し、値を受け取ったとき、表示したい方の日本語ではなく送信先のアドレスが取れてきてしまう

    ・「Contact Form 7」のみでは入力画面と送信しかできないため、確認画面が導入できる「Contact Form 7 Multi-Step Forms」を使用し新たに確認画面用のコンタクトフォームと固定ページを作成 ※導入の仕方などは割愛します

    確認画面の値の受け取り方はこう↓

    選択肢1を選択した場合の値

    [multiform “your-subject”] → contact@mdb.co.jp

    でもこれだとアドレスが表示されてしまう…

    [_raw_your-subject]は使えないしどうにかして日本語部分を表示したい…

     

    解決策

    結論：隠し入力項目(hidden)を使って値を引き継がせたらいい！

    [hidden subject “”]

     

    ただ日本語部分を取るにはセレクトボックスで選択された値を入れなければいけないのでjqueryを追加

    <script>
    $(‘[name=your-subject]’).change(function() { //要素の中身が変更された
    var val = $(‘[name=your-subject]’).val(); //選択された項目のvalue値を取得
    $(‘[name=subject]’).val(val); //隠し入力要素のvalueに追加
    });
    </script>

     

    そして確認画面のコンタクトフォームでsubjectを表示すればOK！

    [multiform “subject”]

     

    なかなか切羽詰まってて、だいぶ力技になってしまったのでもっといいやり方があれば教えてください。

    それでは！