[メールフォームプロ] ラジオボタンでMultiConfig機能を使う

公開日:2023/05/07

メールフォームを設置する際、お問い合わせの種別に応じて受信通知の送り先を切り替えたいというケースがあります。そんなとき、メールフォームプロのMultiConfig機能を使うことで、受信通知先や自動返信メールの内容を切り替えることができます。

今回は、ラジオボタンでお問い合わせ種別を選択し、種別に応じたConfigファイルに切り替える形でサンプルを作成しました。

html

<label>
    <input type="radio" name="お問い合わせ種別" value="○○について" data-config-type="aaa" required="required">
    ○○について
</label>
<label>
    <input type="radio" name="お問い合わせ種別" value="△△について" data-config-type="bbb" required="required">
    △△について
</label>
<label>
    <input type="radio" name="お問い合わせ種別" value="××について" data-config-type="ccc" required="required">
    ××について
</label>
<div id="errormsg_お問い合わせ種別" class="mfp_err"></div>

inputタグを使ってラジオボタンを作成します。ここでポイントになるのが「data-config-type」という属性です。

ここで指定した値が、そのラジオボタンを選択したときに使用されるconfigファイルになります。

サンプルコードの例では、「○○について」のラジオボタンの「data-config-type」に「aaa」が設定されています。これにより、このラジオボタンが選択されたときには「config.aaa.cgi」というConfigファイルが参照されるようになります。

JavaScript

<script type="text/javascript">
    window.addEventListener('load', function() {
        const form = document.getElementById('mailformpro');
        const formPath = form.getAttribute('action');
        const submitButton = form.querySelector('.mfp_element_submit');
        submitButton.addEventListener('click', setConfigType);
        setConfigType();

        function setConfigType() {
            const configRadios = document.querySelectorAll('input[data-config-type]');
            for(let i = 0; i < configRadios.length; i++) {
                if(true == configRadios[i].checked) {
                    let formPathWithParam = formPath;
                    const dataConfigType = configRadios[i].getAttribute('data-config-type');
                    if(dataConfigType) {
                        formPathWithParam = formPathWithParam + '?type=' + dataConfigType;
                    }
                    form.setAttribute('action', formPathWithParam);
                    document.getElementById('mfpjs').setAttribute('src', formPathWithParam);
                }
            }
        }
    }, false);
</script>

「data-config-type」属性を持つinputタグをループで回し、チェックがされていれば、「data-config-type」の値でメールフォームプロのaction属性、及びsrc属性を書き換えています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。