WordPressの計算フォーム、Caluculated Fields Form

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

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

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

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

サンクスページ

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

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

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

おまけの機能

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

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

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("郵便番号が不正です");
        });
});	
});