choozmo
/
hhh_step_question


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>幸福空間 - 問卷調查</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="text-center coffee_t">
      <img class="img-fluid" src="images/banner_top1.jpg" alt="幸福空間 - 裝修市場問卷調查">
    </div>

    <form action="/step_questions/line-submit" method="post" id="msform">
      <div class="notice_card">
        您好：<br>我們是幸福空間，想要進行裝修市場調查，只要填寫完成就送您五萬元裝修折抵券！為確保兌換權益，請務必填寫真實資訊，感謝您的配合。
      </div>
      <ul id="progressbar" class="p-0">
        <li class="active">基本資料</li>
        <li>建案資料</li>
        <li>裝修資料</li>
      </ul>
      <!-- fieldsets -->
      <fieldset>
        <h2 class="fs-title">基本資料</h2>
        <h3 class="fs-subtitle" style="margin-bottom: 0rem;">步驟 1</h3>
        <input type="text" name='userid' value="" id="userid" style="visibility: hidden;">
        <input type="text" name='area' value="" id="area" style="visibility: hidden;">
        <select name="q1" style="margin-top: -4rem">
          <option value="Male">男</option>
          <option value="Female">女</option>
        </select>
        <input type="text" name='q2' value="" placeholder="手機號碼" /> <br/>
        <input type="email" name='q3' value="" placeholder="Email" />
        <input id="checker" type="button" name="next" class="next action-button" value="下一步" />
      </fieldset>
      <fieldset>
        <h2 class="fs-title">建案資料</h2>
        <h3 class="fs-subtitle">步驟 2</h3>
        <label class="fs-label"><i class="fas fa-chevron-right"></i>請問您現在所在建案名稱?</label>
        <input type="text" name='q4' value="" placeholder="建案名" class="mb" />

        <label class="fs-label"><i class="fas fa-chevron-right"></i>建案類型</label>
        <div class="fs-label">
          <input type="radio" class="check_button" value="預售屋" name="q5" id="pre-sold" />
          <label for="pre-sold" class="fs-label-type">預售屋</label>
          <input type="radio" class="check_button ml" value="新成屋" name="q5" id="new" />
          <label for="new" class="fs-label-type">新成屋</label>
        </div>
        <input type="button" name="previous" class="previous action-button" value="上一步" />
        <input type="button" name="next" class="next action-button next-2" value="下一步" />
      </fieldset>
      <fieldset>
        <h2 class="fs-title">裝修資料</h2>
        <h3 class="fs-subtitle">步驟 3</h3>
          <div class="fs-label">
            <label class="fs-label"><i class="fas fa-chevron-right"></i>喜歡的裝修風格?(複選)</label>
            <input type="checkbox" value="簡單大方" name="q6" id="6a" />
            <label class="mr fs-label-info" for="6a">簡單大方</label>
            <input type="checkbox" value="北歐風" name="q6" id="6b" />
            <label class="mr fs-label-info" for="6b">北歐風</label>
            <input type="checkbox" value="日式風格" name="q6" id="6c" />
            <label class="mr fs-label-info" for="6c">日式風格</label>
            <input type="checkbox" value="美式鄉村風" name="q6" id="6d"/>
            <label class="mr fs-label-info" for="6d">美式鄉村風</label>
            <input type="checkbox" value="" id='q6_checkbox' onclick="show_input_text('q6_checkbox', 'q6_input')" />
            <label class="mr fs-label-info" for="q6_checkbox">其他</label>
            <input type="text" id="q6_input" name="q6" style="display:none" value="" placeholder="其他風格" />
          </div>
          <br/>
          <div class="fs-label">
            <label class="fs-label"><i class="fas fa-chevron-right"></i>預計裝修預算(不含活動型傢俱/廚具/空調/窗簾/主燈)?(單選)</label>
            <input type="radio" value="50萬以下" name="q7" id="7a" />
            <label class="mr fs-label-info" for="7a">50萬以下</label>
            <input type="radio" value="50~100萬" name="q7" id="7b" />
            <label class="mr fs-label-info" for="7b">50~100萬</label>
            <input type="radio" value="100~200萬" name="q7" id="7c" />
            <label class="mr fs-label-info" for="7c">100~200萬</label>
            <input type="radio" value="200~300萬" name="q7" id="7d" />
            <label class="mr fs-label-info" for="7d">200~300萬</label>
            <input type="radio" value="300~500萬" name="q7" id="7e" />
            <label class="mr fs-label-info" for="7e">300~500萬</label>
            <input type="radio" value="500~800萬" name="q7" id="7f"/>
            <label class="mr fs-label-info" for="7f">500~800萬</label>
            <input type="radio" value="800萬以上" name="q7" id="7g" />
            <label class="mr fs-label-info" for="7g">800萬以上</label>
            <input type="radio" value="" id='q7_checkbox' onclick="show_input_text('q7_checkbox', 'q7_input')" name="q7"/>
            <label class="mr fs-label-info" for="q7_checkbox">其他</label>
            
            <input type="text" id="q7_input" name="q7" style="display:none" value="" placeholder="自訂預算" />
            <br/>
          </div>
          <br>
          <div class="fs-label">
            <label class="fs-label"><i class="fas fa-chevron-right"></i>預計裝修坪數?(單選)</label>
            <input type="radio" value="20坪以下" name="q8" id="8a" />
            <label class="mr fs-label-info" for="8a">20坪以下</label>
            <input type="radio" value="20~30坪" name="q8" id="8b" />
            <label class="mr fs-label-info" for="8b">20~30坪</label>
            <input type="radio" value="30~40坪" name="q8" id="8c" />
            <label class="mr fs-label-info" for="8c">30~40坪</label>
            <input type="radio" value="40~50坪" name="q8" id="8d" />
            <label class="mr fs-label-info" for="8d">40~50坪</label>
            <input type="radio" value="50坪以上" name="q8" id="8e" />
            <label class="mr fs-label-info" for="8e">50坪以上</label>
          </div>
          <br/>
          <div class="term-link">
            <a href="index_terms.html" target="_blank">蒐集個人資料告知事項暨個人資料提供同意書<i class="fas fa-external-link-alt"></i></a>
          </div>
          <input id="checker2" type="checkbox" class="custom-control-input" value="" name="q9" checked>
          <label for="checker2" style="margin-bottom: .5rem;">我同意</label>
          <br>
          <p id="term-error"></p>
          <input type="button" name="previous" class="previous action-button" value="上一步" />
          <input type="submit" name="submit" class="submit action-button" value="提交"/>
      </fieldset>
    </form>
        
    <div class="text-center coffee_b">
      <img class="img-fluid mb-3" src="images/banner-bottom1.jpg" alt="幸福空間 - 裝修市場問卷調查">
    </div>

  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
  <script>
    $('.coffee_t').css('display', 'none');
    function showcoffee() {
      axios.get('http://q.ptt.cx/coffee').then(res => {
        if(res.data.coffee == 1) {
          $('.coffee_t').css('display', 'block');
        } else {
          $('.coffee_t').css('display', 'none');
        }
      });
      }
      showcoffee();

    function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    function getUserid() {
      let id = getParameterByName('userid');
      $('#userid').val(id);
    }
    getUserid();

    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }
    
    function getArea() {
      let Area = getCookie('area');
      $('#area').val(Area);
    }
    
    getArea();
  </script>
  <script src="./script.js"></script>
</body>
</html>