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

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

投稿日:2020年8月25日 更新日:

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

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

見積もり計算機能の仕様

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

下記は、デモです。

見積もり計算機能のデモ

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

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

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

商品名 料金(単価) 個数 税抜 税込
デモ商品1 5,250 0 0
デモ商品2 2,750 0 0
デモ商品3 30,000 0 0
デモ商品4 50,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="2" 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="2" 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">30,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">50,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制作+Webマーケティングの個別講座開講中

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


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


どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

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

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


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

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

執筆者:

関連記事

画像のサイズの変更、データ量の圧縮などあれこれできる便利サイトのご紹介

記事やサイトを作成する際に、画像のサイズの変更や、データ量を軽くするための圧縮などしたいときに簡単にできるサイトをご紹介します。サイズや圧縮以外にもあれこれできる便利サイトです。   この記 …

webサイトの問合せを増やすためのサイト運用方法の解説

【資料配布】Webサイトの問合せを増やすための運用・改善方法の解説

【5分で読めます】 自身のビジネス用のWebサイトを作る上での最終的な目標は、2つ、 問い合わせを増や 購入を増やす がゴールではないでしょうか。 最終的なゴールの数字を増やす上でサイトを、下記の2つ …

【提案事例】実店舗ローカルビジネスのWebサイトとSNSの設計一案

【5分で読めます】 実店舗オープン準備中の方より、Web作成の予算があまりかけられない、できれば無料ツール活用、日々の更新はSNS、中期的にはECを自サイトで展開したいというご相談。 実店舗だとこの要 …

【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法

【コピペ】WordPress、Contact Form7のカスタマイズ、作成する方法

コピペでできる、【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法の解説です。 なぜ必要か? 問い合わせ項目のより具体的な取得をした …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

  【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つ …

【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法

Word PressでJavaScriptのファイルを読み込みさせたいときは制作改善しているとよくあります。その方法を解説します。 この記事でわかること【1分コピペ】Word PressでJavaSc …

【解説】売上規模0から数十万円のECサイトを制作するときの考え方とサービス比較

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を新規作成したいときに、「なにで、どう作ればよいか?」ついての全体感と直近サービス列挙から提案事例を解説し …