Hướng dẫn tạo trang liên hệ với Google Form

Xem thêm

Xin chào anh em, hôm nay sau khi mình thực hiện việc loại bỏ js mặc định của blogger thì phát hiện ra 1 vấn đề, đó là cái form liên hệ được tích hợp sãn trong blogspot không hoạt động được nữa. Đúng là con đường tối ưu web lắm gian nan thật :(( hết bị cái này đến cái khác.

Để giải quyết tình trạng trên mình lại lên mạng tìm hiểu các cách khác nhau, và chốt lại mình quyết định thay thế form của blogspot sang form của Google biểu mẫu. Lý do mình đưa ra quyết định này là vì mình thấy form biểu mẫu khá hay ho.

Ưu điểm của nó chính là vẫn có thông báo về mail và thứ 2 chính là nó cho phép chúng ta lưu trữ lại tất cả thông tin (bao gồm: ngày giờ, tên người gửi, email và nội dung) về 1 Sheet để quản lý, cái này mình khá ưng.

Nhược điểm chính là việc setup lúc đầu sẽ hơi khó khăn cho các bạn mới. Nhưng anh em đừng lo vì biết không đơn giản nên mình mới có hướng dẫn này cho anh em đây :)).

Follow theo mình nhé! Ok, Let's go. Để thêm contact form anh em làm như sau:

Bước 1: Đăng nhập vào Gmail → Đi đến Google Drive

Bước 2: Thay thế [Link contract form] [Code 1] [Code 2] [Code 3] lần lượt cho các vị trí được tô đỏ ở đoạn code bên dưới

<b:if cond="data:blog.url == data:blog.homepageUrl path &quot;p/contract-me.html&quot;">
<style>
input.contract-email-gacontapcode,
input.contract-name-gacontapcode,
textarea.contract-about-gacontapcode {
  padding:13px;
  width:100%;
  transition:.3s;
  outline:0;
  border-radius:10px;
  border:1px solid #ccc;
}
input.contract-email-gacontapcode {
  margin-top:10px;
}
textarea.contract-about-gacontapcode {
  margin-top:10px;
  height:270px;
}
button.button-send-gacontapcode {
  margin-top:10px;
  border-radius:10pc;
  border:none;
  background:linear-gradient(to right,#1dc8e7,#20e6b9);
  color:#fff;
  padding:12px 25px 8px 25px;
  box-shadow:0 1px 3px 0 rgba(60,64,67,.302),0 4px 8px 0 rgba(60,64,67,.149);
}
.thong-tin-lien-he {
  display:flex;
}
button.button-send-gacontapcode:hover {
  background:linear-gradient(to bottom right,#c90a6d,#ff48a0);
  transform:scale(1.05);
  transition:all .5s ease-in-out;
}
.main article h1 {
  display:none;
}
</style>
<div class="form-gacontapcode"> 
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){};" style="display: none;"></iframe> 
<div class="thong-tin-form"> 
<form action="Your link form/formResponse" id="form-gacontapcode" method="POST" target="hidden_iframe"> 
<div class="thong-tin-lien-he"> 
<input class="contract-name-gacontapcode" name="entry.Code 1" placeholder="Tên" required="" type="text" value="" />
</div> 
<div class="thong-tin-lien-he"> 
<input class="contract-email-gacontapcode" name="entry.Code 2" required="" type="text" value="" placeholder="Email"/>
</div>
<div class="thong-tin-lien-he"> 
<textarea class="contract-about-gacontapcode" name="entry.Code 3" placeholder="Nội dung" required="" type="text" value=""></textarea>
</div>
<div class="thong-tin-lien-he"> 
<button class="button-send-gacontapcode" onclick="buttonsubbmitwebseo()"> <span style="position:relative;top:-2px;">SEND</span></button> 
</div> 
</form> 
</div> 
</div> 
<script> function buttonsubbmitwebseo() { alert("Thư của bạn đã được gửi!"); window.location.assign("/p/contract-me.html")} </script>
</b:if>

Bước 3: Copy toàn bộ đoạn code bên trên → Quay trở lại Blogger và tạo 1 trang mới đặt tên là "Contact me" → Chuyển trình soạn thảo văn bản sang Html và dán toàn bộ đoạn code vừa copy được vào mục soạn thảo sau đó nhấn "Đăng trang"

Bước 4: Anh em quay trở lại Google Drive → Chọn vào File biểu mẫu Contact form ta vừa tạo ban nãy và làm như sau để tạo bảng tính lưu trữ lại tất cả thông tin của những người đã liên hệ

Giờ anh em copy toàn bộ đoạn code bên dưới này và tiếp tục đi tới bước 5:

function guiBieuMau(e){
  // Thay thế bằng địa chỉ email của bạn
  var email = "tencuaban@gmail.com";
  // Tiêu đề của email được gửi về
  var subject = "Thông báo mới tại.....";
  var s = SpreadsheetApp.getActiveSheet();
  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0]; 
  var message = ""; 
  for ( var keys in columns ) {
    var key = columns[keys];
    if ( e.namedValues[key] && (e.namedValues[key] != "") ) {

      message += key + ' :: '+ e.namedValues[key] + "\n\n";
    }
  }
  MailApp.sendEmail(email, subject, message);
}

Bước 5: Để nhận được thông báo qua Email anh em quay lại Google Drive → Mở bảng tính ta vừa tạo ở Bước 4 và làm như sau:

Chọn tài khoản Gmail mà anh em đã dùng để tạo Contact Form và nhấn Next cho tới khi hoàn thành là được.

Bước 6: Giờ anh em mở trang "Contact me" ra và test thử đi, chúc anh em thành công. Xem Demo trang liên hệ sử dụng Google biểu mẫu

Để form được đẹp hơn anh em nên bổ sung thêm code Css