技術資料

前提

• 問い合わせフォームに入力された内容を、自サーバー上のスクリプトと、外部のサービス( 例えば Salesforce の Account Engagement など )の両方に送信したい場合を考えます。
• 通常、フォームの action 属性には送信先の URL を1つだけ指定しますが、ここでは jQuery を使って複数の送信先にデータを送る方法を紹介します。
• フォームに入力された情報を受け付けて、表示を行なう確認画面からの送信を想定しています。

実装例

以下は、jQuery を使ってフォームを https://example.com/form-submit と、https://external-service.com/submit の2つのURLに送信する例です。

まず、HTML部分。

<form method="POST" id="confirmForm" action="https://example.com/form-submit">
    <input type="hidden" name="user_name" value="Tatsuya Abe">
    <input type="hidden" name="user_email" value="tatsuya@example.com">
    <input type="hidden" name="user_tel" value="090-1234-5678">
    <p id="confirmMsg">上記の内容で送信します。よろしいですか？</p>
    <input type="button" id="submitBtn" value="送信する">
</form>

次に、jQuery部分。

jQuery(function($) {
    $('#submitBtn').click(function(){
        $('#submitBtn').prop('disabled', true); // 二重送信防止
        $('#confirmMsg').html('送信中です。しばらくお待ちください...');
        $.ajax({
            type: 'POST',
            url: 'https://external-service.com/submit',
            data: $('#confirmForm').serialize(),
            dataType: 'html',
            success: function(data, status) {
                $('#confirmForm').submit();
            },
            error: function(xhr, status, error) {
                alert('送信に失敗しました。時間をおいて再度お試しください。');
                return false;
            }
        });
        return false;
    });
});

上記のコードでは、フォームの送信ボタンがクリックされたときに、まずボタンを無効化して二重送信を防止し、確認メッセージを「送信中です。しばらくお待ちください...」に変更します。

次に、jQueryの $.ajax メソッドを使って、フォームのデータを外部サービスのURL https://external-service.com/submit に非同期で送信します。送信が成功した場合は、元々のフォームの送信先にデータを送信します。送信が失敗した場合は、エラーメッセージを表示します。

この方法により、フォームのデータを複数の送信先に送ることができます。

注意点として、外部サービスのURLがCORS(Cross-Origin Resource Sharing)をサポートしている必要があります。また、セキュリティ上の理由から、信頼できる送信先のみを指定するようにしてください。

また、外部サービスへの送信失敗時にも、元のフォーム送信を行いたい場合は、error コールバック内で $('#confirmForm').submit(); を呼び出すように変更してください。