AI_Video_LP/layouts/shortcodes/form-main.html

<div class="news-form">
  <div class="text-center mb-4 title">
    <h4>線上諮詢</h4>
    <p>與我們合作，馬上展開全新的創作里程碑</p>
  </div>
  
  <form>
    <div class="mb-3 align-items-center">
      <label for="nameValue">
        聯絡人／公司名稱 <span class="text-danger">*</span>
      </label>
      <div class="mt-2">
        <input type="text" class="form-control" id="nameValue" placeholder="請輸入聯絡人姓名或公司名稱" required>
      </div>
    </div>

    <div class="row mb-3 align-items-center">
      <div class="col-6 pe-2">
        <label for="phoneValue">
          聯絡電話 <span class="text-danger">*</span>
        </label>
        <div class="mt-2">
          <input type="tel" class="form-control" id="phoneCode" placeholder="請輸入聯絡電話" required>
        </div>
      </div>
      <div class="col-6 ps-2">
        <label for="emailValue">
          電子信箱 <span class="text-danger">*</span>
        </label>
        <div class="mt-2">
          <input type="email" class="form-control" id="emailValue" placeholder="請輸入 E-mail" required>
        </div>

        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
      <!-- <div class="mt-2 col-sm-4">
        <select id="countryCode" class="form-select">
          <option selected>選擇國碼</option>
        </select>
      </div>
      <div class="mt-3 mt-sm-2 col-sm-8">
        <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
      </div> -->
    </div>

    <!-- <div class="mb-3 align-items-center">
      <label for="emailValue">
        電子信箱 <span class="text-danger">*</span>
      </label>
      <div class="mt-2">
        <input type="email" class="form-control" id="emailValue" placeholder="請輸入 E-mail" required>
      </div>

      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div> -->

    <!-- <div class="mb-4 align-items-center">
      <label for="dateValue">
        預計執行日期 <span class="text-danger">*</span>
      </label>
      <div class="mt-2 d-flex align-items-center">
        <input type="date" id="dateValue" name="dateValue" class="px-2"
          style="border:1px solid #ced4da; border-radius: 3px;" required />
      </div>
    </div> -->

    <div class="mb-3 align-items-center">
      <label for="captionValue">
        需求說明 <span class="text-danger">*</span>
      </label>
      <div class="mt-2">
        <textarea class="form-control" id="captionValue" rows="2" placeholder="請簡述說明" required></textarea>
      </div>
    </div>

    <!-- <div class="mb-4 align-items-center">
      <label for="companyValue">
        公司名稱 (非必填)
      </label>
      <div class="mt-2">
        <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
      </div>
    </div> -->

    <!-- <div class="mb-4 align-items-center">
      <label for="lineidValue">
        LINE ID (非必填)
      </label>
      <div class="mt-2">
        <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
      </div>
    </div> -->

    <!-- <div class="mt-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="agreeValue">
        <label class="form-check-label w-100" for="agreeValue">
          是否同意集仕多搜集資料
        </label>
      </div>
    </div> -->

    <div style="height: 15px;">
      <span class="error-text text-danger">尚有欄位未填寫</span>
    </div>

    <div class="d-flex justify-content-center">

      <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 src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

<script type="module">
  import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

  const supabase = createClient('http://172.105.241.163:8000', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q');

  // 電話國碼
  // const countryCodes = [
  //   '+1',   // 美國
  //   '+7',   // 俄羅斯
  //   '+33',  // 法國
  //   '+39',  // 義大利
  //   '+44',  // 英國
  //   '+46',  // 瑞典
  //   '+47',  // 挪威
  //   '+49',  // 德國
  //   '+52',  // 墨西哥
  //   '+60',  // 馬來西亞
  //   '+61',  // 澳大利亞
  //   '+62',  // 印尼
  //   '+64',  // 紐西蘭
  //   '+65',  // 新加坡
  //   '+66',  // 泰國
  //   '+81',  // 日本
  //   '+82',  // 南韓
  //   '+86',  // 中國大陸
  //   '+91',  // 印度
  //   '+353', // 愛爾蘭
  //   '+852', // 香港
  //   '+853', // 澳門
  //   '+886', // 台灣
  // ];

  // console.log(countryCodes);
  // const countryCode = document.getElementById('countryCode');
  // countryCodes.forEach(code => {
  //   const option = document.createElement('option');
  //   option.value = code;
  //   option.text = code;
  //   countryCode.appendChild(option);
  // });


  // $('.error-text').hide();
  $('.loading-btn').hide();
  const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';


  async function send() {
    console.log('addEventListener');
    let name = document.querySelector('#nameValue').value; // 聯絡人
    let phone = document.querySelector('#phoneCode').value; // 聯絡電話
    // let company = document.querySelector('#companyValue').value; // 公司名稱
    let email = document.querySelector('#emailValue').value; // 電子信箱
    // let demand; // 需求目的
    let caption = document.querySelector('#captionValue').value; // 需求說明
    // let lineid = document.querySelector('#lineidValue').value; // LINE ID
    // let date = document.querySelector('#dateValue').value; // 預計活動需求日
    let agree; // 搜集資料
    let time; // 填單時間

    // 取得當下時間
    const now = new Date();
    const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
    time = now.toLocaleString('zh-TW', options);
    console.log('time', time);

    // 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;
    // }

    // let countryCode = document.querySelector('#countryCode').value; // 國碼
    // let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼

    // phone = `${countryCode} ${phoneCode}`;

    $.ajax({
      url: scriptURL,
      method: "post",
      data: {
        "name": name,
        "phone": phone,
        "email": email,
        "caption": caption,
        "time": time
        // "company": company,
        // "lineid": lineid,
        // "date": date,
        // "agree": agree,
      },
      success: function (response) {
        if (response == "成功") {
          $('.loading-btn').hide();
          alert("成功送出！");
          return;
        }
      },
    });
  }

  $('button').on('click', function (e) {
    e.preventDefault();

    // let countryCode = document.querySelector('#countryCode').value;

    // let demand = ""; // 需求目的
    // if (document.querySelector('input[name="demandValue"]:checked')) {
    //   demand = document.querySelector('input[name="demandValue"]:checked').value;
    // }

    // if (demand === "其他") {
    //   demand = document.querySelector('#otherText').value;
    // }

    // 手動觸發表單送出
    let form = $(this).closest('form');
    form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示

    // if (countryCode === "選擇國碼") {
    //   console.log('表單未通過驗證');
    //   $('.error-text').show();
    //   return;
    // }

    if (form[0].reportValidity()) {
      $('.loading-btn').show();
      $('.error-text').hide();
      send();
    }
  });
</script>