update

layouts/partials/form-main.html

@@ -1,10 +1,10 @@
 <div class="news-form">
-  <div class="text-center title">
+  <div class="text-center mb-4 title">
     <h4>線上諮詢</h4>
-    <p>與我們合作，馬上展開全新的創作里程碑</p>
+    <small>與我們合作，馬上展開全新的創作里程碑</small>
   </div>
   <form>
-    <div class="mb-4 align-items-center">
+    <div class="mb-3 align-items-center">
       <label for="nameValue">
         聯絡人／公司名稱 <span class="text-danger">*</span>
       </label>
@@ -13,12 +13,26 @@
       </div>
     </div>
 
-    <div class="row mb-4 align-items-center">
-      <label for="phoneValue">
-        聯絡電話 <span class="text-danger">*</span>
-      </label>
-      <div class="mt-2">
-        <input type="tel" class="form-control" id="phoneCode" placeholder="請輸入手機或公司電話" required>
+    <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">
@@ -30,7 +44,7 @@
       </div> -->
     </div>
 
-    <div class="mb-4 align-items-center">
+    <!-- <div class="mb-3 align-items-center">
       <label for="emailValue">
         電子信箱 <span class="text-danger">*</span>
       </label>
@@ -41,7 +55,7 @@
       <div class="invalid-feedback">
         Please choose a username.
       </div>
-    </div>
+    </div> -->
 
     <!-- <div class="mb-4 align-items-center">
       <label for="dateValue">
@@ -53,12 +67,12 @@
       </div>
     </div> -->
 
-    <div class="mb-4 align-items-center">
+    <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="3" placeholder="請簡述說明" required></textarea>
+        <textarea class="form-control" id="captionValue" rows="2" placeholder="請簡述說明" required></textarea>
       </div>
     </div>
 
@@ -80,14 +94,14 @@
       </div>
     </div> -->
 
-    <div class="mt-2">
+    <!-- <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> -->
 
     <div style="height: 15px;">
       <span class="error-text text-danger">尚有欄位未填寫</span>
@@ -174,11 +188,11 @@
     time = now.toLocaleString('zh-TW', options);
     console.log('time', time);
 
-    if (document.querySelector('input[id="agreeValue"]:checked')) {
-      agree = "同意";
-    } else {
-      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;
@@ -192,21 +206,21 @@
     // let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
 
     // phone = `${countryCode} ${phoneCode}`;
-    
+
     $.ajax({
       url: scriptURL,
       method: "post",
       data: {
-      "name": name,
-      "phone": phone,
-      "email": email,
-      "caption": caption,
-      "agree": agree,
-      "time": time
-      // "company": company,
-      // "lineid": lineid,
-      // "date": date,
-    },
+        "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();

layouts/shortcodes/form-main.html

@@ -1,10 +1,10 @@
 <div class="news-form">
-  <div class="text-center title">
+  <div class="text-center mb-4 title">
     <h4>線上諮詢</h4>
-    <p>與我們合作，馬上展開全新的創作里程碑</p>
+    <small>與我們合作，馬上展開全新的創作里程碑</small>
   </div>
   <form>
-    <div class="mb-4 align-items-center">
+    <div class="mb-3 align-items-center">
       <label for="nameValue">
         聯絡人／公司名稱 <span class="text-danger">*</span>
       </label>
@@ -13,12 +13,26 @@
       </div>
     </div>
 
-    <div class="row mb-4 align-items-center">
-      <label for="phoneValue">
-        聯絡電話 <span class="text-danger">*</span>
-      </label>
-      <div class="mt-2">
-        <input type="tel" class="form-control" id="phoneCode" placeholder="請輸入手機或公司電話" required>
+    <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">
@@ -30,7 +44,7 @@
       </div> -->
     </div>
 
-    <div class="mb-4 align-items-center">
+    <!-- <div class="mb-3 align-items-center">
       <label for="emailValue">
         電子信箱 <span class="text-danger">*</span>
       </label>
@@ -41,7 +55,7 @@
       <div class="invalid-feedback">
         Please choose a username.
       </div>
-    </div>
+    </div> -->
 
     <!-- <div class="mb-4 align-items-center">
       <label for="dateValue">
@@ -53,12 +67,12 @@
       </div>
     </div> -->
 
-    <div class="mb-4 align-items-center">
+    <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="3" placeholder="請簡述說明" required></textarea>
+        <textarea class="form-control" id="captionValue" rows="2" placeholder="請簡述說明" required></textarea>
       </div>
     </div>
 
@@ -80,14 +94,14 @@
       </div>
     </div> -->
 
-    <div class="mt-2">
+    <!-- <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> -->
 
     <div style="height: 15px;">
       <span class="error-text text-danger">尚有欄位未填寫</span>
@@ -174,11 +188,11 @@
     time = now.toLocaleString('zh-TW', options);
     console.log('time', time);
 
-    if (document.querySelector('input[id="agreeValue"]:checked')) {
-      agree = "同意";
-    } else {
-      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;
@@ -192,21 +206,21 @@
     // let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
 
     // phone = `${countryCode} ${phoneCode}`;
-    
+
     $.ajax({
       url: scriptURL,
       method: "post",
       data: {
-      "name": name,
-      "phone": phone,
-      "email": email,
-      "caption": caption,
-      "agree": agree,
-      "time": time
-      // "company": company,
-      // "lineid": lineid,
-      // "date": date,
-    },
+        "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();

static/css/custom.css

@@ -781,7 +781,7 @@
   margin-right: auto;
 }
 
-.box-simple .icon-feature > i {
+.box-simple .icon-feature>i {
   font-size: 4.5rem;
 }
 
@@ -1298,7 +1298,7 @@
   bottom: 5rem;
 }
 
-.sec06 > .container {
+.sec06>.container {
   box-shadow: 0px 0px 8px 2px rgb(212, 212, 212);
   transform: translateY(-12rem);
   background-color: white;
@@ -1446,7 +1446,7 @@
     height: 32vh;
   }
 
-  .sec-usecase .row > div {
+  .sec-usecase .row>div {
     width: 50%;
   }
 
@@ -1491,7 +1491,7 @@
     display: inline-block;
   }
 
-  .nav > li {
+  .nav>li {
     display: inline-block;
   }
 }
@@ -1544,7 +1544,7 @@
     max-width: 1200px;
   }
 
-  .sec-usecase .row > div {
+  .sec-usecase .row>div {
     width: 100%;
   }
 
@@ -1635,7 +1635,7 @@
     flex-direction: column;
   }
 
-  .container-footer > div {
+  .container-footer>div {
     margin-bottom: 1.5rem;
   }
 
@@ -1682,7 +1682,7 @@
   border: none;
 }
 
-.box-steps .icon > i {
+.box-steps .icon>i {
   font-size: 3.5rem;
 }
 
@@ -1742,7 +1742,7 @@
   min-height: 65px;
 }
 
-.navbar-brand > img {
+.navbar-brand>img {
   display: inline-block;
 }
 
@@ -2097,7 +2097,7 @@
 }
 
 @media (max-width: 765px) {
-  #vt-list .row > div {
+  #vt-list .row>div {
     padding-left: 0px;
   }
 }
@@ -2645,7 +2645,7 @@
 }
 
 #form .news-form {
-  padding: 25px 30px;
+  padding: 25px;
   margin-top: 0;
 }
 
@@ -2662,9 +2662,14 @@
 }
 
 #form .title h4 {
-  font-size: 28px;
+  font-size: 22px;
 }
 
-#form .submit-btn {
-  margin-top: 20px;
+#form {
+  font-size: 14px;
 }
+
+#form input::placeholder,
+textarea::placeholder {
+  font-size: 12px;
+}

static/css/style.css

@@ -5352,9 +5352,6 @@
 .news-form .title p {
   margin-bottom: 30px;
 }
-.news-form .submit-btn {
-  margin-top: 50px;
-}
 
 .submit-btn {
   padding: 5px 40px;
@@ -5366,6 +5363,7 @@
   text-decoration: none;
   transition: all 0.3s;
   font-size: 16px;
+  font-weight: bold;
 }
 .submit-btn:hover {
   opacity: 0.8;
@@ -5857,7 +5855,7 @@
   display: block;
   width: 93%;
   height: 0.6em;
-  background-color: #FFD679;
+  background-color: #ffd679;
   position: absolute;
   bottom: 8px;
   left: 30px;

static/css/style.scss

@@ -1952,7 +1952,6 @@
 }
 
 @media (max-width: 767px) {
-
   // .header {
   //   height: 70vh;
   // }
@@ -2739,7 +2738,7 @@
   }
 
   .card-content {
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -4070,7 +4069,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content>div {
+    .content > div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -4472,7 +4471,7 @@
     .row {
       padding: 0 5vw;
 
-      &>div {
+      & > div {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -6278,10 +6277,6 @@
       margin-bottom: 30px;
     }
   }
-
-  .submit-btn {
-    margin-top: 50px;
-  }
 }
 
 .submit-btn {
@@ -6294,6 +6289,7 @@
   text-decoration: none;
   transition: all 0.3s;
   font-size: 16px;
+  font-weight: bold;
 
   &:hover {
     opacity: 0.8;
@@ -6480,7 +6476,6 @@
 
 #video-editing,
 #ai-virtual-star {
-
   p,
   li {
     font-size: 1.25rem;
@@ -6783,7 +6778,6 @@
   }
 
   @keyframes animate-arrow-wave {
-
     0%,
     25%,
     50% {
@@ -6847,7 +6841,7 @@
       display: block;
       width: 93%;
       height: 0.6em;
-      background-color: #FFD679;
+      background-color: #ffd679;
       position: absolute;
       bottom: 8px;
       left: 30px;
@@ -7074,4 +7068,4 @@
       box-shadow: 0 0 0 0 rgba(255, 102, 40, 0);
     }
   }
-}
+}