新增表單(串接 Google Sheets)

layouts/shortcodes/form.html

@@ -0,0 +1,213 @@
+<div class="news-form">
+  <div class="text-center title">
+    <h4>線上諮詢</h4>
+    <p>與我們合作，馬上展開全新的創作里程碑</p>
+  </div>
+  <form>
+    <div class="row mb-4">
+      <label for="nameValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          聯絡人 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯絡人姓名">
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <label for="phoneValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          聯絡電話 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <input type="tel" class="form-control" id="phoneValue" placeholder="請留下聯絡電話">
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <label for="companyValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          公司名稱 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <label for="emailValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          電子信箱 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail">
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <label for="dateValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          預計活動需求日 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10 d-flex align-items-center">
+        <input type="date" id="dateValue" name="dateValue" class="px-2"
+          style="border:1px solid #ced4da; border-radius: 3px;" />
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <label for="budgetValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          預算限制 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <select class="form-select" id="budgetValue" name="budgetValue">
+          <option selected>請選擇</option>
+          <option value="一萬以內">一萬以內</option>
+          <option value="一萬到五萬">一萬到五萬</option>
+          <option value="五萬到十萬">五萬到十萬</option>
+          <option value="無預算限制">無預算限制</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <label for="demandValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          需求目的 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <!-- <input type="text" class="form-control" id="demandValue" placeholder="請留下需求目的"> -->
+        <fieldset>
+          <div>
+            <input type="radio" id="aiHost" name="demandValue" value="AI主持人" />
+            <label for="aiHost">AI主持人（尾牙、活動）</label>
+            <br>
+            <input type="radio" id="aiGuide" name="demandValue" value="AI導覽員" />
+            <label for="aiGuide">AI導覽員</label>
+            <br>
+            <input type="radio" id="aiOfficial" name="demandValue" value="AI長官替身" />
+            <label for="aiOfficial">AI長官替身</label>
+            <br>
+            <input type="radio" id="otherOption" name="demandValue" value="其他" />
+            <label for="otherOption">其他（可自行填寫）</label>
+            <input type="text" id="otherText" />
+          </div>
+        </fieldset>
+      </div>
+    </div>
+
+    <div class="row mb-4">
+      <label for="captionValue" class="col-sm-2 col-lg-3 col-xl-2 col-form-label">
+        <div class="d-flex flex-nowrap">
+          需求說明 <span class="text-danger">*</span>
+        </div>
+      </label>
+      <div class="col-sm-10 col-lg-9 col-xl-10">
+        <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明"></textarea>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-sm-10 col-lg-9 col-xl-10 offset-sm-2">
+        <div class="form-check">
+          <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
+          <label class="form-check-label w-100" for="agreeValue">
+            本人同意集仕多搜集資料
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div style="height: 15px;">
+      <span class="errorText text-danger">尚有欄位未填寫</span>
+    </div>
+
+    <div class="d-flex justify-content-center mt-5">
+
+      <button type="submit" class="submit-btn" id="submitBtn">
+        <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
+        提交
+      </button>
+    </div>
+  </form>
+</div>
+
+<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"></script>
+<script>
+  $('.errorText').hide();
+  $('.loading-btn').hide();
+  const scriptURL = 'https://script.google.com/macros/s/AKfycbyAUKo8onoxuEgXP876QsR6q0_8379v4hMCvYVCk3gVaaTEIuK7hPNnOSKNWHlBJ4mVgA/exec';
+
+  console.log('測試');
+
+  function send() {
+    console.log('addEventListener');
+    let name = document.querySelector('#nameValue').value; // 聯絡人
+    let phone = document.querySelector('#phoneValue').value; // 聯絡電話
+    let company = document.querySelector('#companyValue').value; // 公司名稱
+    let email = document.querySelector('#emailValue').value; // 電子信箱
+    let demand; // 需求目的
+    let caption = document.querySelector('#captionValue').value; // 需求說明
+    let budget = document.querySelector('#budgetValue').value; // 預算限制
+    let date = document.querySelector('#dateValue').value; // 預計活動需求日
+    let agree; // 搜集資料
+
+    if (document.querySelector('input[id="agreeValue"]:checked')) {
+      agree = "同意";
+    } else {
+      agree = "不同意";
+    }
+
+    if (document.querySelector('input[name="demandValue"]:checked')) {
+      demand = document.querySelector('input[name="demandValue"]:checked').value;
+    }
+
+    if (demand === "其他") {
+      demand = document.querySelector('#otherText').value;
+    }
+
+    if (name === "" || phone === "" || company === "" || email === "" || demand === "" || caption === "" || budget === "" || date === "") {
+      $('.errorText').show();
+      return;
+    } else {
+      $('.loading-btn').show();
+      $('.errorText').hide();
+    }
+
+    $.ajax({
+      url: scriptURL,
+      method: "post",
+      data: {
+        "name": name,
+        "phone": phone,
+        "company": company,
+        "email": email,
+        "demand": demand,
+        "caption": caption,
+        "budget": budget,
+        "date": date,
+        "agree": agree
+      },
+      success: function (response) {
+        if (response == "成功") {
+          $('.loading-btn').hide();
+          alert("成功提交！");
+        }
+      },
+    });
+  };
+
+  $('button').on('click', function (e) {
+    e.preventDefault();
+    send();
+  });
+</script>

static/css/style.css

@@ -4565,17 +4565,21 @@
   }
 }
 .news-main-content h2 {
-  padding-left: 10px;
+  padding-left: 20px;
   margin: 30px 0;
   font-size: 1.8rem;
   font-weight: bold;
   border-left: 4px solid #ea5413;
+  letter-spacing: 2px;
 }
 @media (max-width: 767px) {
   .news-main-content h2 {
     font-size: 1.4rem;
   }
 }
+.news-main-content h3 strong {
+  letter-spacing: 2px;
+}
 .news-main-content p {
   font-size: 16px;
   margin-bottom: 50px;
@@ -4606,4 +4610,42 @@
   }
 }
 
+.news-form {
+  padding: 50px;
+  margin: 150px auto;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px 2px rgb(222, 220, 220);
+}
+@media (max-width: 575px) {
+  .news-form {
+    padding: 50px 30px;
+  }
+}
+.news-form form {
+  margin: auto;
+  max-width: 600px;
+}
+.news-form .title {
+  margin-bottom: 50px;
+}
+.news-form .title h4 {
+  margin-bottom: 10px;
+  font-size: 32px;
+  font-weight: bold;
+}
+.news-form .title p {
+  margin-bottom: 30px;
+}
+.news-form .submit-btn {
+  padding: 5px 40px;
+  color: #fff;
+  background-color: #ea5413;
+  border: 1px solid #ea5413;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.news-form .submit-btn:hover {
+  opacity: 0.8;
+}
+
 /* news-content End *//*# sourceMappingURL=style.css.map */

static/css/style.scss

@@ -5004,17 +5004,24 @@
   }
 
   h2 {
-    padding-left: 10px;
+    padding-left: 20px;
     margin: 30px 0;
     font-size: 1.8rem;
     font-weight: bold;
     border-left: 4px solid #ea5413;
+    letter-spacing: 2px;
 
     @media (max-width: 767px) {
       font-size: 1.4rem;
     }
   }
 
+  h3 {
+    strong {
+      letter-spacing: 2px;
+    }
+  }
+
   p {
     font-size: 16px;
     margin-bottom: 50px;
@@ -5049,4 +5056,48 @@
   }
 }
 
+.news-form {
+  padding: 50px;
+  margin: 150px auto;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px 2px rgb(222, 220, 220);
+
+  @media (max-width: 575px) {
+    padding: 50px 30px;
+  }
+
+
+  form {
+    margin: auto;
+    max-width: 600px;
+  }
+
+  .title {
+    margin-bottom: 50px;
+
+    h4 {
+      margin-bottom: 10px;
+      font-size: 32px;
+      font-weight: bold;
+    }
+
+    p {
+      margin-bottom: 30px;
+    }
+  }
+
+  .submit-btn {
+    padding: 5px 40px;
+    color: #fff;
+    background-color: #ea5413;
+    border: 1px solid #ea5413;
+    border-radius: 5px;
+    transition: all .3s;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+
 /* news-content End */