1RiDzain 2023年10月16日

クライアント案件でワードプレスの注文フォームを作成することになり『Caluculated Fields Form』を利用しました。無料でも計算部分は利用できますが、メール送信するには有料版が必要です。ただ、買い切りタイプで価格も良心的。2023年現在は、サイト数も制限なしのようなので、購入して損はないと思います。

基本的な使い方は直感的で分かりやすいのですが、サンクスページに送信内容を表示する方法と自動返信メール・管理者宛メールに送信内容を表示する方法で躓いた点がありましたので記録しておきます。

自動返信メール・管理者メール

自動返信メール・管理者宛メールに送信内容を表示するには、下記のような形式のタグを貼り付けるだけです。シンプルに全部出力が簡単ですが、今回ちょっと込み入った入力内容だったため、出力を整形する必要があり、ラベルと値をそれぞれ出力する方法を採用しました。

すべての情報を出力<%INFO%>
入力のあるfieldだけ出力<%INFO if_not_empty%>
特定のfieldのラベルを出力<%fieldname#_label%>
特定のfieldのラベルを出力（入力があれば）<%fieldname#_label if_not_empty%>
特定のfieldの値を出力<%fieldname#_value%>
特定のfieldの値を出力（入力があれば）<%fieldname#_value if_not_empty%>
前後に文字を出力（HTMLタグも可）<%fieldname# if_not_empty before={{<p>}} after={{</p>}} %><%fieldname# if_not_empty after={{円}} %>

サンクスページ

サンクスページに送信内容を表示するには、ショートコードを利用します。メール表示用のタグも利用できますが、「if_not_empty」や「before={{<p>}} after={{</p>}}」は利用できません。

すべての情報を出力[CP_CALCULATED_FIELDS_RESULT]
特定のfieldの値を出力[CP_CALCULATED_FIELDS_RESULT]
<p><%fieldname43_label%><br>
<%fieldname43_value%></p>
[/CP_CALCULATED_FIELDS_RESULT]

フォームの送信内容を一覧表示

ショートコードを利用して、特定のフォームの送信データを一覧出力することもできます。

すべての情報を出力[CP_CALCULATED_FIELDS_RESULT_LIST formid=”1″]
特定のfieldの値を出力[CP_CALCULATED_FIELDS_RESULT_LIST formid=”1″]
<p><%fieldname43_label%><br>
<%fieldname43_value%></p>
[/CP_CALCULATED_FIELDS_RESULT_LIST]

おまけの機能

こちらのプラグインの機能とは関係ありませんが，クライアントからの要望だったので、下記で実現しました。

メールアドレスの確認フォームをペースト禁止にするには

jQuery(document).ready(function($){
$('#fieldname80_1').on('paste',function(e){
 e.preventDefault();
 });
 });

郵便番号から住所を自動入力

jQuery(document).ready(function($){
$("#fieldname74_1").change(function() {
        let zip = $(this).val();
        $.ajax({
            url: "https://zipcloud.ibsnet.co.jp/api/search",
            type: "GET",
            data: {zipcode: zip},
            dataType: "JSONP"
        })
        .done(function(value) {
            if (value.message == null) {
                let result = value.results[0];
                $("#fieldname82_1").val(result.address1 + result.address2 + result.address3);
            } else {
                $("#fieldname82_1").val(value.message);
                alert("郵便番号が不正です");
            }
        })
        .fail(function() {
            alert("郵便番号が不正です");
        });
});	
});