こんにちは！☺☺

延岡・日向でホームページからの集客のお手伝いをしている

メヒカリデザインの林田です。

 

今回は自分でお見積りフォームを作成いたしました。

 

はじめに

１，WordpressでならJazzy Formsなどのプラグインの方が簡単につくれると思います。

参考　無料のワードプレス見積もりプラグイン「 Jazzy Forms」の設定方法

今回は色々カスタマイズしたいため自分で作成しました。

 

２，Bootstrap４を導入しているので、そのまま使うとブラウザのレイアウトや表示崩れがあるかもです。

 

３，Wordpress（以下WP）ではFormのinputタグで「name = “〇〇”」の〇〇ところにWPとバッティングする文字列を使うとPOSTした時、エラーで404になってしまいます。

参考：WordPressでFormを用いてPOSTすると404になる問題

 

４，未入力のエラーは入れていません。

 

５、受け渡す側の <form action=”commit” 　method=”post”> commitは設定し直してください。

 

６，使用する際は自己責任でお願い致します。😣

 

 

サンプル

※2018年８月９日までのデザインを掲載しています。

１，見積もりテーブル

２，見積もり結果・見積もり表

 

CSS

/*estimation 受け渡す側のCSS*/
#estimation{font-size: 1.45em;}
#estimation .nav-tabs{border-bottom:2px solid #00b7ee; }
#estimation li a{font-size: 0.75em; font-weight: bold;color: #000;}
#estimation li a:hover{border:1px solid #00b7ee;color:#00b7ee; }
#estimation li i{margin-left: 6px;}
.nav-tabs .nav-item.show .nav-link,
#estimation li .active{border:1px solid #00b7ee; color:#00b7ee; }
#estimation .tab-content{border:1px solid #00b7ee; border-top: none; padding:36px;}
.tab-pane h3{font-weight: bold; margin-bottom: 6px;}
.tab-pane p{font-size: 0.85em; }
.tab-pane .wrap-fukishi p{font-size: 1.25em;}
.tab-pane section{margin-bottom: 24px;}
.wrap-label{background-color: #f1f1f1; padding: 24px 12px; }
.wrap-label label span{margin-right: 24px; padding-left: 6px; position: relative; top:3px;}
.wrap-label label .number{ width: 70px; padding-left: 12px;}
#tab-end{text-align: center;}
#tab-end-icon img{width: 130px; height: auto; position: relative; left: -12px; z-index: 3333;}
#tab-end button{position: relative; top:-40px;}
#commit-fuki span{font-size: 0.85em; font-weight: normal;}
/*estimation-results-page　受け取る側のCSS*/
#estimation-results-answer{font-weight: bold;}
#estimation-results-answer span{ font-size:3em; font-weight: bold; color: #d7357a; position: relative; right: 6px;}
#estimation-results-answer td:nth-child(even){text-align: right; padding:36px 12px;}
#estimation-results table{border-top: 1px solid #00b7ee; border-left: 1px solid #00b7ee;width: 100%;}
#estimation-results table tr{border-bottom:1px solid #00b7ee; }
#estimation-results table td{width: 15%; padding: 12px 6px; border-right: 1px solid #00b7ee; font-size: 1.35em;}
#estimation-results table tbody tr:nth-child(even){background-color: #d5ebf1;}
#estimation-results table tbody td:last-child,
#estimation-results table tfoot td:last-child{font-weight: bold;}
#estimation-results table tbody .bg-gray{background-color: #eee !important;}
#estimation-results .lg-td{width: 40%;}
#estimation-results .number-td{text-align: right;}
#estimation-results .text-red{color: red;}
#btn-submit{color: #fff;background-color: #eea70f; border: none; font-size: 0.9em; margin-top: 16px;}

 

受け渡す側ソース

<!-- estimation -->
          <div id="estimation" class="content-block clearfix">
            <div class="container">
              <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a href="#tab-start" class="nav-link navbar-default active" data-toggle="tab">スタート<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab1" class="nav-link navbar-default" data-toggle="tab">デザイン・ページ数<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab2" class="nav-link navbar-default" data-toggle="tab">写真・素材<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab3" class="nav-link navbar-default" data-toggle="tab">追加オプション<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab4" class="nav-link navbar-default" data-toggle="tab">サポート<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab5" class="nav-link navbar-default" data-toggle="tab">割引・特典<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                  <li class="nav-item">
                    <a href="#tab-end" class="nav-link navbar-default" data-toggle="tab">見積もり結果<i class="fas fa-arrow-circle-right"></i></a>
                  </li>
                </ul>
                <!--タブの中身-->
                <form action="commit" method="post">
                   <input type="hidden" name="mode" value="send" />
                  <div class="tab-content">
                    <div id="tab-start" class="tab-pane active">
                      <!--Tab1の内容-->
                      
                      <h2>１０秒無料お見積り</h2>
                      <div class="wrap-fukishi">
                        <section class="first">
                          <p>簡単な選択と、記述でメヒカリデザインでホームページ制作の概算料金をご提示いたします。</br>他社との比較にもお気軽にお使いください。</p>
                        </section>
                        <section class="logo-icon">
                          <img src="/static/img/icon_wink.png" alt="メヒカリicon">
                        </section>
                      </div>
                    </div>
                    <div id="tab1" class="tab-pane">
                      <!--Tab1の内容-->
                      <section>
                        <h3>ホームページのデザインについて</h3>
                        <p>デザインについてあてはまるものを選択してください。</p>
                        <div class="wrap-label">
                          <label><input class="radio" type="radio" name="design" value="A" checked><span>任せる（写真と文章が中心）</span></label></br>
                          <label><input class="radio" type="radio" name="design" value="B"><span>デザインにこだわったサイトを作りたい</span></label>
                      </div>
                      </section>
                      <section>
                        <h3>ホームページの下層ページ数</h3>
                        <p>トップページ以外必要なページ数を記入ください。</p>
                        <div class="wrap-label">
                          <label><input class="number" type="number" name="emPage" value="3"></label>
                        </div>
                      </section>
                    </div>
                    <div id="tab2" class="tab-pane">
                      <!--Tab２の内容-->
                      <section>
                        <h3>写真撮影</h3>
                        <p>ホームページで使用する写真撮影を依頼しますか？</p>
                        <div class="wrap-label">
                          <label><input class="radio" type="radio" name="photo" value="A" checked><span>依頼する（５枚程度）</span></label></br>
                          <label><input class="radio" type="radio" name="photo" value="B"><span>写真は準備する</span></label>
                      </section>
                      <section>
                      <h3>有料の写真やイラスト</h3>
                        <p>有料の写真やイラストを購入しますか？</p>
                        <div class="wrap-label">
                          <label><input class="radio" type="radio" name="tollparts" value="A" checked><span>購入しない</span></label></br>
                          <label>
                            <input class="radio" type="radio" name="tollparts" value="B"><span>購入する（一枚3,000円）</br>
                            <input class="number" type="number" name="tollpartsNumber" value="1"></span><span class="small-text">購入数を記入してください。</span>
                          </label>
                      </div>
                    </section>
                    <section>
                        <h3>バナー</h3>
                        <p>バナー制作を依頼しますか</p>
                        <div class="wrap-label">

                          <label><input class="radio" type="radio" name="bnr" value="A" checked><span>依頼しない</span></label></br>
                          <label>
                            <input class="radio" type="radio" name="bnr" value="B"><span>依頼する（一枚5,000円）</span></br>
                            <input class="number" type="number" name="bnrNumber" value="1"></span><span class="small-text">作成数を記入してください。</span>
                          </label>
                      </div>
                      </section>
                    </div>
                    <div id="tab3" class="tab-pane">
                      <!--Tab３の内容-->
                      <section>
                          <h3>新着情報・ブログ</h3>
                          <p>
                            新着情報・ブログなどを更新するホームページを作成しますか
                          </p>
                          <div class="wrap-label">
                            <label><input class="radio" type="radio" name="updateFu" value="A" checked><span>はい</span></label></br>
                            <label><input class="radio" type="radio" name="updateFu" value="B"><span>いいえ</span></label>
                        </div>
                      </section>
                      <section>
                          <h3>お客様事例代行</h3>
                          <p>
                            公開時にメヒカリデザインが代行して入力する事例数を入れてください（事例の提供はお客様）</br>
                            ホームページ公開後にお客様が追加するものはいくつでも無料です。
                          </p>
                          <div class="wrap-label">
                            <label>
                              <input type="radio" name="case" value="B" checked><span>事例代行を依頼する</span></br>
                              <input class="number" type="number" name="caseNumber" value="3">
                            </label></br>
                            <label><input class="radio" type="radio" name="case" value="A"><span>事例代行を依頼しない</span></label>
                        </div>
                        </section>  
                    </div>
                    <div id="tab4" class="tab-pane">
                      <!--Tab４の内容-->
                      <section>
                        <h3>毎月サポート（月額費用）</h3>
                          <p>
                            ご希望のサポート体制を選択してください。
                          </p>
                          <div class="wrap-label">
                            <label><input type="radio" name="emSupport" value="A" checked><span>１，通常のサポート</span></label></br>
                            <label><input type="radio" name="emSupport" value="B"><span>２，アクセスレポート付きサポート</span></label></br>
                            <label><input type="radio" name="emSupport" value="C"><span>３，アクセスレポートと月例ミーティングを依頼する</span></label></br>
                            <label><input type="radio" name="emSupport" value="D"><span>４，アクセスレポートと月例ミーティングと改善作業を依頼する</span></label></br>
                        </div>
                      </section>
                    </div>
                    <div id="tab5" class="tab-pane">
                      <!--Tab４の内容-->
                      <section>
                        <h3>制作実績に掲載（５％割引）</h3>
                          <p>
                            メヒカリデザインの制作実績に掲載してもよろしいですか？
                          </p>
                          <div class="wrap-label">
                            <label><input class="radio" type="radio" name="emWork" value="A" checked><span>はい</span></label>
                            <label><input class="radio" type="radio" name="emWork" value="B"><span>いいえ</label>
                          </div>
                      </section>
                      <section>
                        <h3>お客様の声に掲載（５％割引）</h3>
                          <p>
                            メヒカリデザインのお客様（写真付き）の声に掲載してもよろしいですか？
                          </p>
                          <div class="wrap-label">
                            <label><input class="radio" type="radio" name="emVoice" value="A" checked><span>はい</span></label>
                            <label><input class="radio" type="radio" name="emVoice" value="B"><span>いいえ</span></label>
                        </div>
                      </section>
                    </div>
                    <div id="tab-end" class="tab-pane">
                     <!--Tab5の内容-->
                     <div id="tab-end-icon">
                      <img src="/static/img/icon_smiling.png" alt="メヒカリicon">
                     </div>
                     <button class="btn btn-orange">
                      <input id="btn-submit" type="submit" value="見積もり結果を見る" />
                     </button>　
                    </div>
                  </div>
                </form>
            </div>
          </div>
        <!-- estimation-end -->

 

POSTのされた値を振り分けるPHP

<?php
  //見積もりformからデザインの結果を代入 
  $designCostA = '30000';
  $designTextA = '写真と文章が中心';
  $designCostB = '285000';
  $designTextB = 'デザインにこだわったサイトを作成する';
  if (isset($_POST['design'])) {
    if ($_POST['design'] === 'A') {
      $designText = $designTextA;
      $designCost = $designCostA;
    } else {
      $designText = $designTextB;
      $designCost = $designCostB;
    }
  }

  //見積もりformから下層ページの結果を代入
  if(isset($_POST['emPage'])){

    $pageNumber = $_POST['emPage'];
    $pagecost = $pageNumber*9000;
  }

  //見積もりformから写真撮影の結果を代入 
  $photoCostA = '15000';
  $photoTextA = '写真撮影を依頼（５枚程度）';
  $photoCostB = '0';
  $photoTextB = '写真素材はお客様がご用意';
  if (isset($_POST['photo'])) {
    if ($_POST['photo'] === 'A') {
      $photoText = $photoTextA;
      $photoCost = $photoCostA;
    } else {
      $photoText = $photoTextB;
      $photoCost = $photoCostB;
    }
  }

  //見積もりformから素材購入の結果を代入 
  $tollpartsTextA = '購入しない';
  $tollpartsTextB = '購入する';
  if (isset($_POST['tollparts'])) {
    if ($_POST['tollparts'] === 'A') {
      $tollpartsText = $tollpartsTextA;
      $tollpartsCost = 0;
    } else {
      $tollpartsText = $tollpartsTextB;
      $tollpartsNumber = $_POST['tollpartsNumber'];
      $tollpartsCost = $tollpartsNumber*3000;
    }
  }

  //見積もりformからバナーの結果を代入 
  $bnrTextA = 'バナー制作は依頼しない';
  $bnrTextB = 'バナー制作を依頼する';
  if (isset($_POST['bnr'])) {
    if ($_POST['bnr'] === 'A') {
      $bnrText = $bnrTextA;
      $bnrCost = 0;
    } else {
      $bnrText = $bnrTextB;
      $bnrNumber = $_POST['bnrNumber'];
      $bnrCost = $bnrNumber*5000;
    }
  }

  //見積もりformから新着情報・ブログの結果を代入 
  $updateFuCostA = '30000';
  $updateFuTextA = '更新機能を導入（Wordpress）';
  $updateFuCostB = '0';
  $updateFuTextB = '更新機能は導入しない';
  if (isset($_POST['updateFu'])) {
    if ($_POST['updateFu'] === 'A') {
      $updateFuText = $updateFuTextA;
      $updateFuCost = $updateFuCostA;
    } else {
      $updateFuText = $updateFuTextB;
      $updateFuCost = $updateFuCostB;
    }
  }

  //見積もりformから事例の結果を代入 
  $caseTextA = '事例は制作完了後にお客様が掲載する';
  $caseTextB = '事例の掲載を依頼する';
  if (isset($_POST['case'])) {
    if ($_POST['case'] === 'B') {
      $caseText = $caseTextB;
      $caseNumber = $_POST['caseNumber'];
      $caseCost = $caseNumber*1000;
    } else {
      $caseText = $caseTextA;
      $caseCost = 0NU;
    }
  }

  //見積もりformからサポートの結果を代入 
  $supportCostA = '5000';
  $supportTextA = '通常のサポート';
  $supportCostB = '10000';
  $supportTextB = 'アクセスレポート付きサポート';
  $supportCostC = '20000';
  $supportTextC = 'アクセスレポートと月例ミーティングを依頼する';
  $supportCostD = '50000';
  $supportTextD = 'アクセスレポートと月例ミーティングと改善作業を依頼する';
  if (isset($_POST['emSupport'])) {
    if ($_POST['emSupport'] === 'A') {
      $supportText = $supportTextA;
      $supportCost = $supportCostA;
    } elseif ($_POST['emSupport'] === 'B') {
      $supportText = $supportTextB;
      $supportCost = $supportCostB;
    }elseif ($_POST['emSupport'] === 'C') {
      $supportText = $supportTextC;
      $supportCost = $supportCostC;
    }elseif ($_POST['emSupport'] === 'D') {
      $supportText = $supportTextD;
      $supportCost = $supportCostD;
    }
  }

  //割引と消費税を除いた金額の計算式
  $costAll = 35000 + 20000 + $designCost + $photoCost + $tollpartsCost + $bnrCost + $updateFuCost + $updateFuCost + $caseCost;


  //見積もりformから制作実績に掲載（割引）の結果を代入 
  $workTextA = '制作実績の掲載を許可する（5%割引）';
  $workTextB = '制作実績の掲載を許可しない';
  if (isset($_POST['emWork'])) {
    if ($_POST['emWork'] === 'A') {
      $workText = $workTextA;
      $workCost = $costAll*0.05;
    } else {
      $workText = $workTextB;
      $workCost = 0;
    }
  }

  //見積もりformからお客様の声に掲載（割引）の結果を代入 
  $voiceTextA = 'お客様（写真付き）の声に掲載を許可する（5%割引）';
  $voiceTextB = 'お客様（写真付き）の声に掲載掲載を許可しない';
  if (isset($_POST['emVoice'])) {
    if ($_POST['emVoice'] === 'A') {
      $voiceText = $voiceTextA;
      $voiceCost = $costAll*0.05;
    } else {
      $voiceText = $voiceTextB;
      $voiceCost = 0;
    }
  }

  //小計の金額の計算式
  $costSmall = $costAll - $workCost - $voiceCost;

  //消費税の金額の計算式
  $tax = ($costAll - $workCost - $voiceCost)*0.08;

  //消費税込の総金額の計算式
  $costResult = $costAll - $workCost - $voiceCost + $tax;
?>

 

受け取る側ソース

 

<!-- estimation-results -->
        <div id="estimation-results">
          <table>
            <thead id="estimation-results-answer">
              <tr>
                <td>初期費用</td>
                <td><span><?php echo number_format($costResult)?></span>円</td>
                <td>月々の管理費</td>
                <td colspan="2"><span><?php echo number_format($supportCost)?></span>円</br>（<?php echo $supportText?>）</td>
              </tr>
            </thead>
            <thead>
              <tr>
                <td>大項目</td>
                <td class="lg-td">詳細</td>
                <td class="number-td">単価</td>
                <td class="number-td">数量</td>
                <td class="m-td number-td">金額</td>
              </tr>
            </thead>
            <tbody>
              <tr class="bg-gray">
                <td>トップページ制作</td>
                <td>トップページ制作と取材を含む（※必須）</td>
                <td class="number-td">35,000</td>
                <td class="number-td">1</td>
                <td class="number-td">35,000</td>
              </tr>
              <tr class="bg-gray">
                <td>スマートフォン対応</td>
                <td>マルチデバイス対応（※必須）</td>
                <td class="number-td">20,000</td>
                <td class="number-td">1</td>
                <td class="number-td">20,000</td>
              </tr>
              <tr>
                <td>デザイン</td>
                <td><?php echo $designText?></td>
                <td class="number-td"><?php echo number_format($designCost)?></td>
                <td class="number-td">1</td>
                <td class="number-td"><?php echo number_format($designCost)?></td>
              </tr>
              <tr>
                <td>下層ページ</td>
                <td>トップページ以外のページ作成</td>
                <td class="number-td">9,000</td>
                <td class="number-td"><?php echo $pageNumber?></td>
                <td class="number-td"><?php echo number_format($pagecost)?></td>
              </tr>
              <tr>
                <td>写真撮影</td>
                <td><?php echo $photoText?></td>
                <td class="number-td"><?php echo number_format($photoCost)?></td>
                <td class="number-td">1</td>
                <td class="number-td"><?php echo number_format($photoCost)?></td>
              </tr>
              <tr>
                <td>素材購入</td>
                <td><?php echo $tollpartsText?></td>
                <td class="number-td">3,000</td>
                <td class="number-td"><?php echo $tollpartsNumber?></td>
                <td class="number-td"><?php echo number_format($tollpartsCost)?></td>
              </tr>
              <tr>
                <td>バナー制作</td>
                <td><?php echo $bnrText?></td>
                <td class="number-td">5,000</td>
                <td class="number-td"><?php echo($bnrNumber)?></td>
                <td class="number-td"><?php echo number_format($bnrCost)?></td>
              </tr>
              <tr>
                <td>更新機能</td>
                <td><?php echo $updateFuText?></td>
                <td class="number-td"><?php echo number_format($updateFuCost)?></td>
                <td class="number-td">1</td>
                <td class="number-td"><?php echo number_format($updateFuCost)?></td>
              </tr>
              <tr>
                <td>事例代行</td>
                <td><?php echo $caseText?></td>
                <td class="number-td">1,000</td>
                <td class="number-td"><?php echo $caseNumber?></td>
                <td class="number-td"><?php echo number_format($caseCost)?></td>
              </tr>
              <tr>
                <td>特典割引１</td>
                <td><?php echo $workText?></td>
                <td class="number-td"><?php echo number_format($workCost)?></td>
                <td class="number-td">1</td>
                <td class="number-td text-red">▲<?php echo number_format($workCost)?></td>
              </tr>
              <tr>
                <td>特典項目２</td>
                <td><?php echo $voiceText?></td>
                <td class="number-td"><?php echo number_format($voiceCost)?></td>
                <td class="number-td">1</td>
                <td class="number-td text-red">▲<?php echo number_format($voiceCost)?></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td class="number-td">小計</td>
                <td class="number-td"><?php echo number_format($costSmall)?></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td class="number-td">税額</td>
                <td class="number-td"><?php echo number_format($tax)?></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td class="number-td">合計</td>
                <td class="number-td"><?php echo number_format($costResult)?></td>
              </tr>
            </tfoot>
          </table>
        </div>
        <!-- estimation-results-end -->