Hướng dẫn tạo form biểu mẫu google cài đặt trên blogspot

Hướng dẫn tạo Form liên hệ từ google biểu mẫu:
Form biểu mẫu google hiện nay được các bạn làm blogger sử dụng khá nhiều làm form liên hệ, form thông tin nhận tài liệu khách hàng , ...



Sau đây mình hướng dẫn qua cho  những bạn chưa biết tạo biểu mẫu google:
Đầu tiên các bạn vào https://drive.google.com/drive/my-drive => Đăng nhập tài khoản Google => Làm theo các bước sau:

Tạo Form liên hệ từ google biểu mẫu

Bước tiếp theo sẽ hiển thị ra 1 cửa sổ để bạn tạo các trường như họ tên, số điện thoại, email, ... theo ý các bạn:

tạo các trường như họ tên, số điện thoại, email  trong google biểu mẫu

Tiếp theo bạn click vào Gửi để hoàn tất việc tạo form liên hệ

Hoàn tất tạo form liên hệ từ google biểu mẫu

Ở đây các bạn chú ý đến 3 cách chia sẻ mà google tạo ra cho chúng ta:

1. Gửi mail cho 1 người cụ thể
2. Chia sẻ link form liên hệ
3. Tạo ra mã nhúng để dán trực tiếp vào vị trí muốn hiển thị form liên hệ trong blog các bạn

<div class='noi-dung-form-blogdep'>
    <iframe id='hidden_iframe' name='hidden_iframe' onload='if(submitted){};' style='display:none;'></iframe>
    <div class='thong-tin-form-blogdep'>
        <form action='Thay link form google của bạn ở trên' id='t_form_1' method='POST' target='hidden_iframe'>
            <div class='truong-thong-tin-form'>
                Thay đoạn Input 1 hoặc Textarea 1 màu đỏ của form bạn vào đây
            </div>
            <div class='truong-thong-tin-form'>
                Thay đoạn Input 2 hoặc Textarea 2 màu đỏ của form bạn vào đây
            </div>
            <div class='truong-thong-tin-form'>
                Thay tương tự các đoạn Input hoặc Textarea màu đỏ còn lại
            </div>
            </div>
             <div class='nut-gui-form-di'>
                <input class="button" id="ss-submit" name="submit" type='submit' value='TẢI VỀ'/>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
  $("#ss-submit").click(function () {
       alert("Cảm ơn bạn đã gửi tin nhắn, tin nhắn đã được gửi đi");
window.location.assign("/");
   });
 </script>
Bạn có thể thêm thuộc tính placeholder="Họ Và Tên*" để gợi ý trong các trường Input

Như vậy là bạn đã tạo thành công form biểu mẫu google dành cho blogspot, ở đây mình cũng khắc phục luôn việc bị chuyển hướng về trang https://docs.google.com/ sau  khi đăng ký thành công.
Để đẹp hơn, bạn có thể sử dụng 1 đoạn CSS cơ bản mình đã code sẵn cho form này như sau: .thong-tin-form-blogdep{margin:auto;max-width:600px;background:#c4b483;padding:15px 10px;border-radius:6px}
.thong-tin-form-blogdep input{width:98%;padding:7px;margin:3px 1%;border-radius:4px;border:1px solid #ccc}
#ss-submit{width:150px;background:#ff6000;color:#fff;font-size:16px;font-weight:700} Việc cuối cùng là bạn chỉ việc vào form biểu mẫu google bạn đã tạo, tạo 1 bảng tính và bật tính năng gửi về email của bạn là xong.

Cài đặt gửi câu trả lời từ form google docs về gmail:

Ấn vào xem câu trả lời ➜ Tạo ➜ biểu mẫu sẽ tử gửi câu trả lời vào 1 bảng Ex cho bạn ở googe drive. Bây giờ nhiệm vụ là chuyển thông tin đó thông báo vào mail.

Bảng tính Form biểu mẫu