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でホームページを作るには

執筆者:

関連記事

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

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

コピーライティングで悩んだときの15の考え方

自社の商材をPRする際に、どう表現していいか悩むこともあるかと思います。アイデアのたたき台として、コピーライティングで悩んだときの15の考え方を解説します。 コピーライティングの代表的な5つの考え方 …

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

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

インタビュー方法

【コピペ】特定テキストにマウスがhoverしたときに背面に文字を出すCSS

特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか? 少しのCSSでサクッと対応できます。もちろんコピペできます。 特定テキストにマウスがhoverしたときに背 …

【秒速解決】Word Press Popular Postsでウィジェット保存できないときの解決方法

Word Pressのプラグイン「Word Press Popular Posts」でウィジェット保存できない挙動があったので、その解決方法を解説します。 ウィジェット保存しようとしたときにこんな画面 …

サイトのパスワード設定

【解説】WordPressサイトでURLを知っているひとしか閲覧できない設定方法

サイトでURLを知っているひとしか閲覧できない設定方法を知っていますか? 今回は、WordPressサイトで、どんな方法で設定するかをお伝えします。 設定には、Google検索に掲載させない方法やパス …

【簡単】商材ページ、13のポイントを意識して簡単につくる方法

クライアントサイトで、実際にコンテンツ作成するときに、重要なページ商材ページがあります。 どんな構成で作成すると良いのか? 商材自体の訴求ポイントの項目と、Webコンテンツとしての構成面と合わせて、1 …

^
;