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

このエントリーをはてなブックマークに追加

eFormはMODXからメールを送信するためのスニペットです。Ajaxを使って画面を遷移させずにeFormのメールを送信するTipsです。

サンプル

サンプルはMODXページの中間あたりにある1行アンケートです。気軽に送信してみてください(๑'ᴗ'๑)

1行アンケートのサンプル

前準備

前提としてjQueryと、折角なので先日作ったモーダルウィンドウのスクリプトを使用しました。

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

作成

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

チャンクでも構わないのですが、私の場合ツリー構造で管理できるのが便利なのでだいたいリソースを使います。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スニペットを記述する

フォームを表示したい場所でスニペットコールを記述します。

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

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

どこでもいいのですがとりあえずスニペットの下辺りに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="styles/js/ajaxmail.js"></script>

styles/js/ajaxmail.jsはこの後作成します。

javascriptを記述

送信ボタンが押された時のjavascriptの処理を書きます。先に説明したモーダルウィンドウ用のjavascriptも書きます。HTMLで指定したIDのフォームがSubmitされたタイミングで処理します。IDの部分が違う場合はそれだけ変更してそのままで使えると思います。

$(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');
        });
    });
});

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

ブラウザでjavascriptが使用できなく設定されていた場合は通常の遷移でメールを送信します。

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

Edited on 2016.12.21 Created on 2016.12.15 MODXEvoAjaxWebデザインTips
PAGE TO TOP