WEB制作、マーケティングに関する情報をお届けします。

企業サイトを制作していると問合せ種別によってメールの送信元、送信内容などを変えたいということが多々あります。
その場合はJavascriptでポスト先のフォームを切り替えることでそれぞれにお問合せフォームを設定することができます。

使用するHTMLタグ

今回は以下のHTMLを想定して分岐させます。

<form action="" method="post">
    <table>
        <tbody>
            <tr>
                <th>お問い合わせ種別</th>
                <td>
                    <div>
                        <input type="radio" id="request" name="type" value="request" checked>
                        <label for="request">資料請求</label>
                    </div>
                    <div>
                        <input type="radio" id="contact" name="type" value="contact">
                        <label for="contact">お問い合わせ</label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="submit">送信</button>
</form>

actionはjavascriptで切り替えるため空値でOKです。

Javascriptを実装

ラジオボタンの変更するとポスト先のURLが切り替わります。

document.addEventListener('DOMContentLoaded', function () {
    // ラジオボタンの要素を取得
    var requestRadioButton = document.getElementById('request');
    var contactRadioButton = document.getElementById('contact');
    var form = document.querySelector('form');
    
    // 資料請求のラジオボタンのイベントハンドラ
    requestRadioButton.addEventListener('change', function() {
        if (this.checked) {
            form.action = 'ここに資料請求先のフォームURL';
        }
    });
    
    // お問い合わせのラジオボタンのイベントハンドラ
    contactRadioButton.addEventListener('change', function() {
        if (this.checked) {
            form.action = 'ここにお問い合わせのフォームURL';
        }
    });
});

解説

以下でラジオボタンのIDから要素を取得、変数に代入、formのセレクタも変数に代入します。

var requestRadioButton = document.getElementById('request');
var contactRadioButton = document.getElementById('contact');
var form = document.querySelector('form');

あとは、changeイベントを使用して発火させ、action属性を切り替えポスト先のURLを参照するようにします。

// 資料請求のラジオボタンのイベントハンドラ
requestRadioButton.addEventListener('change', function() {
    if (this.checked) {
        form.action = 'ここに資料請求先のフォームURL';
    }
});

// お問い合わせのラジオボタンのイベントハンドラ
contactRadioButton.addEventListener('change', function() {
    if (this.checked) {
        form.action = 'ここにお問い合わせのフォームURL';
    }
});

まとめ

数行で実施できましたね。
企業様の案件だと、遭遇する場面も多いので覚えておくといいでしょう。