eFormのメールをAjaxで送信する

最終更新日
2017.10.05

移行作業中のため一部のページが正しく表示されていない場合があります(o-ω-))

Ajax を使って画面を遷移させずに eForm のメールを送信する Tips です。

サンプル

サイトリニューアルのためサンプルは停止中です(´•ω•`)

前準備

折角なので先日作ったモーダルウィンドウのスクリプトを使用しました。前提として jQuery とこのモーダルウィンドウの本体を読み込んでください。

スクロール対応のモーダルウィンドウの作成

作成手順

フォーム本体用のリソースを作成

チャンクでも問題ないですが私の場合ツリー構造で管理できるのが便利なのでだいたいリソースを使います。以下の例は eform 属性で`内容`を必須にして1つでも選んでいないと送信出来ないようにしたもの。

リソースの内容 IDは 20 と仮定

<form method="post" action="[(base_url)][~[*id*]~]" id="ModxOneLine">
<h4>どんなコンテンツを増やして欲しいですか?</h4>
[+validationmessage+]
<fieldset>
<label><input name="内容[]" type="checkbox" value="Evo用" eform="内容::1">Evo用</label>
<label><input name="内容[]" type="checkbox" value="Revo用">Revo用</label>
<label><input name="内容[]" type="checkbox" value="初心者向け">初心者向け</label>
<label><input name="内容[]" type="checkbox" value="デザイナー向け">デザイナー向け</label>
<label><input name="内容[]" type="checkbox" value="開発者向け">開発者向け</label>
<label><input name="内容[]" type="checkbox" value="実用Tips">実用Tips</label>
<button type="submit" class="button">送信</button>
</fieldset>
</form>

JavaScript で選択値を取得できるようにフォームにIDを付けておく。

メール本文用のリソースを作成

送られてくるメールの雛形。

リソースの内容 IDは 21 と仮定

ウェブサイトの1行アンケートからの送信です。
--------------------------------------------------------
選択された内容 :  
--------------------------------------------------------

eFormスニペットを記述する

フォームを表示したい場所に eForm のスニペットコールを記述する。

<!--@MODX:[!eForm
// 【必須】フォームID
&formid = `contact`
// 【必須】フォーム本体のHTMLコード(リソースIDで指定)
&tpl = `20`
// 【必須】送信するメールのひな型(リソースIDで指定)
&report = `21`
// 【必須】メールの送り先。メールアドレス文字列または変数を指定できます
&to = `[(emailsender)]`
// 送信するメールのタイトル。任意の文字列または変数を指定できます。
&subject = `1行アンケート`
// 連続送信を制限したい場合は以下を記述。
&protectSubmit = `内容`
// 送信成功した時に表示するHTML。 ※クラス名(.form_success)を成功フラグに使う
&thankyou = `@CODE:<p class="form_success">ありがとうございました</p>`
// フォームをテキストで送信する ※ Evoはこれを指定しないとHTML形式になり改行が無くなる事がある
&sendAsText = `1`
!]-->

モーダルウィンドウを作成

スニペットの下辺りに HTML を記述する。どこでもいい。

<div id="ModxOneLineModal" class="modalwindow noclose">
 <div class="body">
 <header>1行アンケート</header>
 <div class="modal_content">-</div>
 <footer align="center">
 <button type="button" data-closemodal="ModxOneLineModal" class="button">閉じる</button>
 </footer>
 </div>
</div>
<script type="text/javascript" src="assets/js/ajaxmail.js"></script>

assets/js/ajaxmail.jsはこの後作成する。

Ajax用のJavaScriptの記述

先に説明したモーダルウィンドウ用の JavaScript も読み込んでおく。以下は指定した ID のフォームが Submit されたタイミングで処理するもの。

$(function() {
    $('#ModxOneLine').on('submit', function(e) {
        // デフォルトの処理をキャンセル
        e.preventDefault();
        // 通信中はウィンドウを閉じられないようにして開く
        $('#ModxOneLineModal').addClass('lock').trigger('open');
        var modal_content = $('#ModxOneLineModal .modal_content');
        $(modal_content).text('メッセージを送信しています...');
        var cur_height = $(modal_content).outerHeight();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'html',
            cache: false
        }).done(function(result) {
            var form_success = $(result).find(".form_success").get(0);
            if (form_success) {
                var new_height = $(modal_content).html('メッセージを送信しました。<br>ありがとうございました。').outerHeight();
                // 送信が終わったらフォームをリセット
                $('#ModxOneLine').trigger('reset');
            } else {
                // 送信が成功していない場合の処理
                // .errorsがあれば入力内容が正しくないエラーで、なければ連続送信とかサーバー側のエラーですが
                // 細かく振り分けたい場合はLangファイルを弄らないとアレそうなのでアレします
                var errors = $(result).find(".errors").get(0) || '少し時間をあけて送信してください。';
                var new_height = $(modal_content).html(errors).outerHeight();
            }
            $(modal_content).trigger('smresize', [cur_height, new_height]);
        }).fail(function() {
            var new_height = $(modal_content).text('通信エラー').outerHeight();
            $(modal_content).trigger('smresize', [cur_height, new_height]);
        }).always(function() {
            // 通信が終わったらウィンドウを閉じられるように
            $('#ModxOneLineModal').removeClass('lock');
        });
    });
});

上記のコードを assets/js/ajaxmail.js で作成。

ほかのJavaScriptやCSSとかもろもろ

ブラウザで JavaScript が使用しない設定にされていた場合は通常の遷移でメールが送信される。

モーダルウィンドウの処理や、細かいCSSの装飾は長いのでこちらをソースを使ってください。