WordPressでホームページを作るには

【コピペ】見積もりの簡易フォームを作成しましたので活用ください

投稿日:

Word Pressで、見積計算機能を作成しました。各項目と個数入力などで小計と合計を計算する仕様です。

カスタマイズや別途作成のご相談承っております。

見積もり計算機能の仕様

各項目と個数入力などで小計と合計を計算する仕様です。

下記は、デモです。

見積もり計算機能のデモ

下記は商品金額と、個数を小計で税抜、税込金額で小計をだし、最下部で合計金額を出しています。

デモ商品1と2は個数を入力(3桁まで)

デモ商品3と4は個数をセレクトボックスから選択(範囲1,2,3のうち)

商品名 料金(単価) 個数 税抜 税込
デモ商品1 5,250 0 0
デモ商品2 2,750 0 0
デモ商品3 300,000 0 0
デモ商品4 500,000 0 0
合計     0 0

見積もり計算機能のデモのソースコード

見積もり計算機能のデモのソースコードを公開します。コピーして活用ください。

コピー活用された方、お仕事のご依頼お待ちしております。

自社最適の見積もり計算機能を作成してほしい方、 お気軽にご相談ください。

ソースコード、HTML

それでは、ソースコード、まず、HTMLです。

<figure class="wp-block-table">
    <table class="price-table">
    <tbody>
    <tr>
    <td>商品名</td>
    <td>料金(単価)</td>
    <td>個数</td>
    <td>税抜</td>
    <td>税込</td>
    </tr>
    <tr>
    <td>デモ商品1</td>
    <td class="sumple1_price">5,250</td>
    <td><input type="tel" name="sumple1" class="form-ticker-symbol sumple1" maxlength="3" style="width: 80%; text-align: right;"/></td>

    <td class="sumple1 notax">0</td>
    <td class="sumple1-tax tax">0</td>
    </tr>
    <tr>
    <td>デモ商品2</td>
    <td class="sumple2_price">2,750</td>
    <td><input type="tel" name="sumple2" class="form-ticker-symbol sumple2" maxlength="3" style="width: 80%; text-align: right;"/></td>

    <td class="sumple2 notax">0</td>
    <td class="sumple2-tax tax">0</td>
    </tr>
    <tr>
    <td>デモ商品3</td>
    <td class="sumple3_price">300,000</td>
    <td><select id="sumple3" class="form-select" name="member" style="width: 80%; direction: rtl;">
        <option value="0">0</option>
        <option value="1">1-30</option>
        <option value="2">31-50</option>
        <option value="3">51-100</option>
        </select>
    </td>

    <td class="sumple3 notax">0</td>
    <td class="sumple3-tax tax">0</td>
    </tr>
    <tr>
    <td>デモ商品4</td>
    <td class="sumple4_price">500,000</td>
    <td><select id="sumple4" class="form-select" name="member" style="width: 80%; direction: rtl;">
        <option value="0">0</option>
        <option value="1">1-30</option>
        <option value="2">31-50</option>
        <option value="3">51-100</option>
        </select>
    </td>

    <td class="sumple4 notax">0</td>
    <td class="sumple4-tax tax">0</td>
    </tr>
<tr>
<td style="font-size:1.1em; font-weight: bold;">合計</td>
<td> </td>
<td> </td>
<td class="notax-total" style="font-size:1.1em; font-weight: bold;">0</td>
<td class="tax-total" style="font-size:1.1em; font-weight: bold;">0</td>
</tr>
    </tbody>
    </table>
    </figure>

ソースコード JavaScript(jQuery)

つづいて、JavaScript(jQueryで書いてます、冗長です)

 $(function(){
            var tax_total_nums = 0;

            $('.form-ticker-symbol').on("keypress", function(event){return leaveOnlyNumber(event);});

            $(".form-select").change(function() {


                var target_value = $(this).val(); 
                var target_name = $(this).attr('id');
                
                var target_value_price = $('.' + target_name + '_price').text();
                
                // カンマとる
                var target_value_price_re = target_value_price.replace(",", "");
                
                var target_value = Number(target_value);
                
                var target_value_price_re_num = Number(target_value_price_re);
                
                var target_value_price_re_num_comma = target_value_price_re_num.toLocaleString();
                
                var target_value_tax_excluded = target_value*target_value_price_re_num;
                
                var target_value_tax_excluded_tax = target_value_tax_excluded*1.1;
                
                var target_value_tax_excluded_comma = target_value_tax_excluded.toLocaleString();
                
                var target_value_tax_excluded_comma_tax = target_value_tax_excluded_tax.toLocaleString();
                
                var target_value_tax_excluded_comma_renda = $('.' + target_name).text(target_value_tax_excluded_comma);
                
                var target_value_tax_excluded_comma_renda_tax = $('.' + target_name +'-tax').text(target_value_tax_excluded_comma_tax);

                tax_total_nums = 0;
                $(".tax").each( function() {
                    
                    var tax_total = $(this).text();
                    
                    var tax_total_re = tax_total.replace(",", "");
                    
                    var tax_total_num = Number(tax_total_re);
                    
                    tax_total_nums += tax_total_num;
                    
                    var notax_total_nums = tax_total_nums / 1.1;
                    var tax_total_nums_comma= tax_total_nums.toLocaleString();
                    var notax_total_nums_comma= notax_total_nums.toLocaleString();
                    $(".tax-total").text(tax_total_nums_comma);
                    $(".notax-total").text(notax_total_nums_comma);
                    
                });

                

            });


            $('.form-ticker-symbol').on("keyup", function(){

                var target_name = $(this).attr('name');
                
                var target_value = $('input[name=' + target_name + ']').val();
                
                var target_value_price = $('.' + target_name + '_price').text();
                
                var target_value_price_re = target_value_price.replace(",", "");
                
                var target_value_price_re_num = Number(target_value_price_re);

                var target_value_price_re_num_comma = target_value_price_re_num.toLocaleString();
                
                var target_value_tax_excluded = target_value*target_value_price_re_num;
                
                var target_value_tax_excluded_tax = target_value_tax_excluded*1.1;
                
                var target_value_tax_excluded_comma = target_value_tax_excluded.toLocaleString();
                
                var target_value_tax_excluded_comma_tax = target_value_tax_excluded_tax.toLocaleString();
                
                var target_value_tax_excluded_comma_renda = $('.' + target_name).text(target_value_tax_excluded_comma);
                
                var target_value_tax_excluded_comma_renda_tax = $('.' + target_name +'-tax').text(target_value_tax_excluded_comma_tax);
                
                 tax_total_nums = 0;
                $(".tax").each( function() {
                    
                    var tax_total = $(this).text();
                    
                    var tax_total_re = tax_total.replace(",", "");
                    
                    var tax_total_num = Number(tax_total_re);
                    
                    tax_total_nums += tax_total_num;
                    
                    var notax_total_nums = tax_total_nums / 1.1;
                    var tax_total_nums_comma= tax_total_nums.toLocaleString();
                    var notax_total_nums_comma= notax_total_nums.toLocaleString();
                    $(".tax-total").text(tax_total_nums_comma);
                    $(".notax-total").text(notax_total_nums_comma);
                    
                });

                ;});

            function leaveOnlyNumber(e){
            // 数字以外の不要な文字を削除
            var st = String.fromCharCode(e.which);
            if ("0123456789".indexOf(st,0) < 0) { return false; }
            return true;  
            }
        });

以上です。






Web担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

WordPressでホームページを作るには

執筆者:

関連記事

CF7 Google Sheets Connectorが転記できないときの対応方法

CF7 Google Sheets Connectorが転記できないときの対応方法

CF7 Google Sheets Connectorが転記できないときの対応方法です。 クライアントサイトで使用してるのですが、2020年2月で転記してくれなくなったので、対応した方法をまを解説しま …

【完全網羅】Word Pressの保守運用・セキュリティ59の対策一覧

Word Pressのセキュリティ対策の一覧と情報収集ソースを59ほどリストアップしました。自身のサイトのセキュリティ対策にご活用ください。 ※メモ書きなので、後日詳細解説を更新します。 WordPr …

Word原稿をWordPressにUPするとき画像が横向きなる対応や効率的な公開方法

クライアントさんからいただいたWord原稿をWordPressにUPしたいときの効率的な公開方法を解説します。その際の画像がWordPressのメディア内で横向きになってしまうときの対応も解説します。 …

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。     WordPressの管理画面が …

Web編集で文字が斜体にならないときの理由と2つの対応方法

Web編集で文字が斜体にならないときの理由と2つの対応方法です。斜体とはイタリック文字のことです。編集エディタ上ですと、「I」タグのボタンを押すスト斜体になるあの斜体のことです。サイトの作りでは、デフ …

お問合せを増やしたいフォームの制作の方法と考え方

【コピペ】お問合せを増やしたいフォームの制作の方法と考え方_前年比200%増の成果事例

お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。 今回はお問合せを増やすためのフォーム …

fontAwesomeが表示されない対処方法はフォントファミリーに設定すること

このサイトなのですが、fontAwesomeという、外部サイトの情報から矢印やメール電話などアイコンを表示してくれるCSSを連携しています。初期設定やバージョン更新でよくあるのですが、そのアイコンが表 …

^
;