AI_Video_LP/layouts/shortcodes/form.html

<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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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>