Giao diện người dùng và trải nghiệm người dùng là những phần quan trọng nhất của trang web. Giả sử khách truy cập muốn liên lạc với bạn và sẵn sàng chia sẻ phản hồi. Hoặc Bạn điều hành một doanh nghiệp và

Trang “Liên hệ với chúng tôi” là một thành phần quan trọng của bất kỳ trang web nào. Nó cung cấp một đường dây liên lạc trực tiếp giữa bạn và khách truy cập, khách hàng hoặc khách hàng tiềm năng. Cho dù bạn đang điều hành một blog, một cửa hàng trực tuyến, một tổ chức phi lợi nhuận hay bất kỳ loại trang web nào khác, trang “Liên hệ với chúng tôi” cho phép khán giả liên hệ với bạn khi có câu hỏi, phản hồi hoặc cơ hội của họ.

Tuy nhiên, việc thiết lập trang “Liên hệ với chúng tôi” có vẻ khó khăn, đặc biệt nếu bạn muốn lưu trữ và quản lý các tin nhắn bạn nhận được một cách có tổ chức. Đó chính là lúc hướng dẫn này xuất hiện. Chúng tôi sẽ chỉ cho bạn cách tạo trang “Liên hệ với chúng tôi” bằng cách sử dụng HTML và CSS cho giao diện người dùng cũng như Google Trang tính và Google Apps Script cho giao diện phụ trợ. Điều này sẽ cho phép bạn thu thập tin nhắn từ người dùng và lưu trữ chúng trực tiếp vào Trang tính Google, giúp bạn dễ dàng quản lý và trả lời tin nhắn của mình.

Bước 1: Tạo biểu mẫu HTML

Đầu tiên, hãy tạo biểu mẫu HTML mà người dùng sẽ điền vào. Chúng tôi sẽ bao gồm các trường cho tên, email và tin nhắn của người dùng. Chúng tôi cũng sẽ thêm nút gửi. Đây là mã:

<form id="submit-to-google-sheet" name="submit-to-google-sheet">
    <label for="name">Name:</label>
    <input type="text" id="name-sn-1" name="name" required><br>
    <label for="email">Email:</label>
    <input type="email" id="email-sn" name="email" required><br>
    <label for="message">Message:</label>
    <textarea cols="25" id="message-sn" name="message" required></textarea><br>
    <button id="submit-button-sn" type="submit" value="Send">Send</button>
</form>

<div id="sending-message" style="display: none;">Please wait, Your message is being sent...</div>
<div id="success-message" style="display: none;">Your message has been sent. Thank you!</div>

Bước 2: Tạo kiểu cho biểu mẫu bằng CSS

Tiếp theo, chúng ta sẽ thêm một số CSS để làm cho biểu mẫu của chúng ta trông đẹp mắt. Chúng ta sẽ tạo kiểu cho biểu mẫu, nhãn, trường nhập, nút và thông báo. Đây là mã CSS:

<style>#submit-to-google-sheet{ width: auto; max-width: 600px; margin: 0 auto; padding: 20px 50px 20px 23px; background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;} #submit-to-google-sheet:hover{ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);} #submit-to-google-sheet label{ display: block; margin-bottom: 5px; font-weight: bold; color: #333; font-size: 1.1em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 3px; font-size: 1em; transition: border 0.3s ease;} #submit-to-google-sheet input:focus, #submit-to-google-sheet textarea:focus{ border-color: #007BFF; outline: none;} #submit-to-google-sheet button{ padding: 10px 20px; background-color: #007BFF; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease;} #submit-to-google-sheet button:hover{ background-color: #0056b3;} #sending-message, #success-message{ padding: 10px; border-radius: 3px; margin-bottom: 20px; transition: all 0.3s ease;} #sending-message{ background-color: #ffcc00; color: #333;} #success-message{ background-color: #28a745; color: #fff;} @media (max-width: 600px){ #submit-to-google-sheet{ box-shadow: none; border: none;} #submit-to-google-sheet label{ font-size: 0.9em;} #submit-to-google-sheet input, #submit-to-google-sheet textarea{ font-size: 0.8em;} #submit-to-google-sheet button{ font-size: 0.8em;}} </style>

Điều này sẽ

Bước 3: Thiết lập Google Trang tính và Tập lệnh Google Apps

Bước này bao gồm việc tạo tài liệu Google Trang tính mới, viết Tập lệnh Google Apps để xử lý việc gửi biểu mẫu và triển khai tập lệnh dưới dạng ứng dụng web.

3.1 Tạo tài liệu Google Trang tính mới

Trước tiên, bạn cần tạo một tài liệu Google Trang tính mới để lưu trữ tin nhắn. Đây là cách thực hiện:

1. Truy cập Google Trang tính (sheet.google.com).
2. Nhấp vào “+ Bảng tính mới” để tạo tài liệu mới.
3. Đặt tên cho bảng tính giống như “Phản hồi biểu mẫu liên hệ”.

3.2 Viết tập lệnh Google Apps

Tiếp theo, bạn sẽ viết Tập lệnh Google Apps để xử lý việc gửi biểu mẫu. Tập lệnh này sẽ được kích hoạt bất cứ khi nào người dùng gửi biểu mẫu trên trang “Liên hệ với chúng tôi” của bạn.

Đây là cách tạo tập lệnh:

1. Từ tài liệu Google Trang tính của bạn, hãy nhấp vào “Tiện ích mở rộng” > “Tập lệnh ứng dụng”.
2. Xóa bất kỳ mã nào trong trình chỉnh sửa tập lệnh và thay thế bằng mã sau:

function doPost(e) {
    var params = e.parameter;
    var name = params.name;
    var email = params.email;
    var message = params.message;
  
    // Get current date and time
    var now = new Date();
    var timestamp = Utilities.formatDate(now, "IST", "yyyy-MM-dd HH:mm:ss");
  
    // Store data in Google Sheet
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.appendRow([timestamp, name, email, message]);
  
    // Send email - Comment out lines below to send email
    // var emailBody = 'You received a new message from ' + name + ' (' + email + ') at ' + timestamp + ':\n\n' + message;
    // MailApp.sendEmail({
    //   to: 'Provide_YOUR_EMAIL_ADDRESS', 
    //   subject: 'New message',
    //   body: emailBody,
    // });
  
    return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
  }

3. Nhấp vào “Tệp” > “Lưu” và đặt tên cho dự án của bạn giống như “Kịch bản biểu mẫu liên hệ”.

3.3 Thiết lập trình kích hoạt

1. Nhấp vào biểu tượng đồng hồ từ trình chỉnh sửa Apps Script, đại diện cho “Trình kích hoạt”. Thao tác này sẽ mở trang “Trình kích hoạt dự án”.
2. Nhấp vào “+ Thêm trình kích hoạt” ở dưới cùng bên phải của trang.
3. Trong “Chọn chức năng nào để chạy”, chọn doPost từ menu thả xuống.
4. Trong “Chọn loại sự kiện”, hãy chọn “Khi gửi biểu mẫu”.
5. Click “Save”.

Bạn sẽ được nhắc cấp phép tập lệnh bằng tài khoản Google của mình. Điều này là cần thiết vì tập lệnh cần có quyền nối các hàng vào tài liệu Google Trang tính của bạn và gửi email thay mặt bạn.

Đây là cách ủy quyền cho tập lệnh:

1. Một hộp thoại sẽ xuất hiện với nội dung “Yêu cầu ủy quyền”. Nhấp vào “Xem lại quyền”.
2. Chọn tài khoản Google của bạn.
3. Một thông báo sẽ bật lên trên màn hình máy tính của bạn: “Ứng dụng này chưa được xác minh”. Nhấp vào “Nâng cao” và sau đó “Chuyển đến Tên dự án (không an toàn)”.
4. Nhấp vào “Cho phép” để cấp cho tập lệnh các quyền cần thiết.

Giờ đây, bất cứ khi nào người dùng gửi biểu mẫu trên trang “Liên hệ với chúng tôi” của bạn, chức năng doPost sẽ được kích hoạt và thông báo của người dùng sẽ được lưu trữ trong tài liệu Google Trang tính của bạn.

Sau khi thiết lập trình kích hoạt và ủy quyền tập lệnh, bạn có thể tiến hành triển khai tập lệnh dưới dạng ứng dụng web, như được mô tả trong thông báo trước đó.

3.4 Triển khai tập lệnh dưới dạng ứng dụng web

Cuối cùng, bạn sẽ triển khai tập lệnh của mình dưới dạng ứng dụng web. Điều này sẽ cung cấp cho bạn một URL mà bạn có thể sử dụng để kích hoạt tập lệnh.

Đây là cách triển khai tập lệnh:

1. Từ trình chỉnh sửa Apps Script, nhấp vào “Xuất bản” > “Triển khai dưới dạng ứng dụng web”.
2. Trong “Phiên bản dự án”, chọn “Mới” và viết mô tả phiên bản như “Phiên bản ban đầu”.
3. Trong “Thực thi ứng dụng dưới dạng”, hãy chọn “Tôi (email của bạn)”.
4. Trong “Ai có quyền truy cập vào ứng dụng”, hãy chọn “Bất kỳ ai, thậm chí ẩn danh”. Điều này cho phép người dùng chưa đăng nhập vào tài khoản Google gửi biểu mẫu.
5. Nhấp vào “Triển khai”.
6. Bạn sẽ thấy thông báo có nội dung “Yêu cầu ủy quyền”. Nhấp vào “Xem lại quyền”, chọn tài khoản của bạn và cấp các quyền cần thiết.
7. Sau đó, bạn sẽ thấy thông báo cho biết “Ứng dụng này chưa được xác minh”. Nhấp vào “Nâng cao” và sau đó “Chuyển đến Tập lệnh biểu mẫu liên hệ (không an toàn)”.
8. Nhấp vào “Cho phép” để cấp các quyền cần thiết.
9. Sau đó, bạn sẽ thấy một hộp thoại có URL của ứng dụng web của bạn. Sao chép URL này và lưu nó ở đâu đó – bạn sẽ cần nó trong bước tiếp theo.

Và thế là xong! Bây giờ bạn đã thiết lập Google Trang tính và Google Apps Script để xử lý việc gửi biểu mẫu từ trang “Liên hệ với chúng tôi” của bạn.

Bước 4: Kết nối Biểu mẫu HTML với Google Trang tính

Cuối cùng, chúng ta sẽ sử dụng JavaScript để kết nối biểu mẫu HTML với Google Trang tính. Khi biểu mẫu được gửi, chúng tôi sẽ gửi yêu cầu POST tới ứng dụng web Apps Script của chúng tôi, sau đó ứng dụng này sẽ lưu trữ dữ liệu trong Google Trang tính. Đây là mã JavaScript:

<script>
    var scriptURL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec'
    var form = document.forms['submit-to-google-sheet']
    var successMessage = document.getElementById('success-message');
    var sendingMessage = document.getElementById('sending-message');

    form.addEventListener('submit', function(e) {
        e.preventDefault()
        form.style.display = 'none'; // hide the form immediately
        sendingMessage.style.display = 'block'; // show the sending message
        fetch(scriptURL, { method: 'POST', body: new FormData(form) })
            .then(function(response) {
                console.log('Success!', response)
                sendingMessage.style.display = 'none'; // hide the sending message
                successMessage.style.display = 'block'; // show the success message
            })
            .catch(function(error) {
                console.error('Error!', error.message)
                form.style.display = 'block'; // show the form again in case of error
                sendingMessage.style.display = 'none'; // hide the sending message
            })
    })
</script>

Và thế là xong! Giờ đây, bạn có trang “Liên hệ với chúng tôi” thu thập tin nhắn của người dùng và lưu trữ chúng trực tiếp vào Trang tính Google. Chúc mừng mã hóa!

Xin lưu ý rằng bạn sẽ cần phải thay thế 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec' bằng URL của ứng dụng web Apps Script của riêng bạn.

Write a Review

Submit Review