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

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

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

ビジネスサイトで商材の見積もり計算機能がほしいと感じることはありませんか?

クライアント事例で、Word Pressで、「見積計算機能」を作成しました。各項目と個数入力などで小計と合計を計算する仕様です。

今回は、一部、簡易なコード事例を紹介します。

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

今回は、クライアントのサイト改善で「見積もり計算機能」を実装したので、その一部紹介です。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

見積もり計算機能の仕様

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

下記は、デモです。

見積もり計算機能のデモ

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

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

執筆者:

関連記事

【解説】WordPressサイトが自動更新でログインできないときの対応一例(WPとEC系プラグインの競合エラー)

WordPressサイトの各バージョンが自動更新され、気づいたらエラーでサイトが見れない、ログインできないときはありませか? 今回は、WordPressのバージョンアップによるエラー対応の方法について …

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …

WordPressで「更新を失敗しました」と出たときの対応方法

WordPressの編集時に更新を押すと、「更新を失敗しました」と出たときの対応方法について解説します。 対応方法は検索すると色々出てきますが、主要な原因では、 WordPress新エディタ「Gute …

【note更新】自サイトの問合せを増やすためのサイトグロースマップの解説_簡易版

Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。 今回は、クライアントのサイト改善案を提案する際の資料の紹介です。 Web …

【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法

WordPressで独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …

WordPressで特定カテゴリーのみ一覧から非表示にする方法

WordPressで特定カテゴリーのみ一覧から非表示にする方法を解説します。 Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行していま …

インタビュー方法

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

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

;