Đăng bởi Huy Tập lúc 28/10/2016 8
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
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
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
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
Ở đây để tùy biến form biểu mẫu liên hệ từ google form được đẹp mắt tôi sử dụng kiểu chia sẻ thứ 2 là link form liên hệ, xem tiếp ..

Tùy biến Form liên hệ từ Google biểu mẫu:
Như ở trên đã giới thiệu ở trên, google sẽ tạo ra 1 link liên hệ dạng:
https://docs.google.com/forms/d/e/1FAIpQLSe5QI7w9gMikwEpHFad8lB1ykCPtMufFL3ahfFNvFp8JF6AaQ/viewform
Để tùy biến chúng ta Ctrl +U để view code và Copy đoạn code có dạng sau:
<form .... đến chỗ </form>
Ở đây bạn chú ý những điểm ví dụ như sau: <form action="https://docs.google.com/forms/d/e/1FAIpQLSf9In5EKJT6_qv2BTDaMYt0lA7lx3QG2d5ep1QLS8mDMTt2Iw/formResponse" target="_self" method="POST" id="mG61Hd"><div class="freebirdFormviewerViewFormCard"><div class="freebirdFormviewerViewAccentBanner freebirdAccentBackground"></div><div class="freebirdFormviewerViewFormContent "><div class="freebirdFormviewerViewHeaderHeader"><div class="freebirdFormviewerViewHeaderTitleRow"><div class="freebirdFormviewerViewHeaderTitle" dir="auto" role="heading" aria-level="1">Test form liên hệ</div></div></div><div class=freebirdFormviewerViewItemList role="list"><div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,vwKRrd;" data-item-id="2120934285"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.2120934285">Họ và tên</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.2120934285" dir="auto"></div></div></div><div class="freebirdFormviewerViewItemsTextItemWrapper"><div class="quantumWizTextinputPaperinputEl freebirdFormviewerViewItemsTextShortText freebirdThemedInput" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow jsname="W85ice"><div class="quantumWizTextinputPaperinputMainContent exportContent"><div class="quantumWizTextinputPaperinputContentArea exportContentArea"><div class="quantumWizTextinputPaperinputInputArea"><input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Họ và tên" aria-describedby="i.desc.2120934285 i.err.2120934285" name="entry.1399004251" value="" dir="auto" data-initial-dir="auto" data-initial-value=""/><div jsname="LwH6nd" class="quantumWizTextinputPaperinputPlaceholder exportLabel" >Câu trả lời của bạn</div></div><div class="quantumWizTextinputPaperinputUnderline exportUnderline"></div><div jsname="XmnwAc" class="quantumWizTextinputPaperinputFocusUnderline exportFocusUnderline"></div></div></div><div class="quantumWizTextinputPaperinputCounterErrorHolder"><div jsname="ty6ygf" class="quantumWizTextinputPaperinputHint exportHint"></div></div></div></div><div class="freebirdFormviewerViewItemsItemGradingGradingBox freebirdFormviewerViewItemsItemGradingFeedbackBox" jsname="R7fTud"></div><div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.2120934285" role="alert"></div></div><div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,vwKRrd;" data-item-id="1109502173"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.1109502173">Số điện thoại</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.1109502173" dir="auto"></div></div></div><div class="freebirdFormviewerViewItemsTextItemWrapper"><div class="quantumWizTextinputPaperinputEl freebirdFormviewerViewItemsTextShortText freebirdThemedInput" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow jsname="W85ice"><div class="quantumWizTextinputPaperinputMainContent exportContent"><div class="quantumWizTextinputPaperinputContentArea exportContentArea"><div class="quantumWizTextinputPaperinputInputArea"><input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Số điện thoại" aria-describedby="i.desc.1109502173 i.err.1109502173" name="entry.1876135453" value="" dir="auto" data-initial-dir="auto" data-initial-value=""/><div jsname="LwH6nd" class="quantumWizTextinputPaperinputPlaceholder exportLabel" >Câu trả lời của bạn</div></div><div class="quantumWizTextinputPaperinputUnderline exportUnderline"></div><div jsname="XmnwAc" class="quantumWizTextinputPaperinputFocusUnderline exportFocusUnderline"></div></div></div><div class="quantumWizTextinputPaperinputCounterErrorHolder"><div jsname="ty6ygf" class="quantumWizTextinputPaperinputHint exportHint"></div></div></div></div><div class="freebirdFormviewerViewItemsItemGradingGradingBox freebirdFormviewerViewItemsItemGradingFeedbackBox" jsname="R7fTud"></div><div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.1109502173" role="alert"></div></div><div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,vwKRrd;" data-item-id="1984831351"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.1984831351">Nội dung</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.1984831351" dir="auto"></div></div></div><div class="quantumWizTextinputPapertextareaEl modeLight freebirdFormviewerViewItemsTextLongText freebirdThemedInput" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV;" jsshadow jsname="W85ice"><div class="quantumWizTextinputPapertextareaMainContent exportContent"><div class="quantumWizTextinputPapertextareaPlaceholder exportLabel"  jsname="LwH6nd">Câu trả lời của bạn</div><div class="quantumWizTextinputPapertextareaContentArea exportContentArea"><textarea class="quantumWizTextinputPapertextareaInput exportTextarea" jsname="YPqjbf" data-rows="1" tabindex="0" aria-label="Nội dung" jscontroller="gZjhIf" jsaction="input:Lg5SV;ti6hGc:XMgOHc;rcuQ6b:WYd;" name="entry.1134506999" dir="auto" data-initial-dir="auto" data-initial-value=""></textarea></div><div class="quantumWizTextinputPapertextareaUnderline exportUnderline"></div><div jsname="XmnwAc" class="quantumWizTextinputPapertextareaFocusUnderline exportFocusUnderline"></div></div><div class="quantumWizTextinputPapertextareaCounterErrorHolder"><div jsname="ty6ygf" class="quantumWizTextinputPapertextareaHint exportHint"></div></div></div><div class="freebirdFormviewerViewItemsItemGradingGradingBox freebirdFormviewerViewItemsItemGradingFeedbackBox" jsname="R7fTud"></div><div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.1984831351" role="alert"></div></div></div><div class="freebirdFormviewerViewNavigationNavControls" jscontroller="lSvzH" jsaction="rcuQ6b:npT2md;JIbuQc:Gl574d(QR6bsb),V3upec(GeGHKb),HiUbje(M2UYVd),NPBnCf(OCpkoe);" data-shuffle-seed="-1959971160883091811" data-should-execute-invisible-captcha-challenge="false" data-is-receipt-checked="false"><div class="freebirdFormviewerViewNavigationButtonsAndProgress"><div class="freebirdFormviewerViewNavigationButtons"><div role="button" class="quantumWizButtonPaperbuttonEl quantumWizButtonPaperbuttonFlat quantumWizButtonPaperbuttonDark quantumWizButtonPaperbutton2El2 freebirdFormviewerViewNavigationSubmitButton" jscontroller="VXdfxd" jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd;focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;" jsshadow jsname="M2UYVd" aria-disabled="false" tabindex="0" ><div class="quantumWizButtonPaperbuttonRipple exportInk" jsname="ksKsZd"></div><div class="quantumWizButtonPaperbuttonFocusOverlay exportOverlay"></div><content class="quantumWizButtonPaperbuttonContent"><span class="quantumWizButtonPaperbuttonLabel exportLabel">Gửi</span></content></div></div></div><div class="freebirdFormviewerViewNavigationPasswordWarning">Không bao giờ gửi mật khẩu thông qua Google Biểu mẫu.</div></div><input type="hidden" name="fvv" value="1"><input type="hidden" name="draftResponse" value="[null,null,&quot;-1959971160883091811&quot;] "><input type="hidden" name="pageHistory" value="0"><input type="hidden" name="fbzx" value="-1959971160883091811"></div></div></form>

Bạn chỉ cần chú ý đoạn link form https://docs.google.com/forms/d/... những trường thông tin Input, textarea mà bạn đã tạo trong quá trình tạo form biểu mẫu.

Tiếp theo bạn thay các trường thông tin đó vào form mặc định bên mình đã code sẵn như sau:
<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:

Sau khi bạn đã tạo xong form bạn mở form bảng tính câu trả lời 
Ấ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.
Hướng dẫn tạo form biểu mẫu google cài đặt trên blogspot
Bảng tính Form biểu mẫu

Tiếp theo bạn chọn Công cụ ➜ Trình chỉnh sửa tập lệnh ➜ Bạn thêm đoạn code như sau: 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 = "Đơn đặt hàng tại......";
  // Không rành thì đùng đụng vào code ở dưới nhé
  var s = SpreadsheetApp.getActiveSheet();
  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0]; 
  var message = ""; 
  // Lấy ra những thông tin nào có dữ liệu điền vào
  for ( var keys in columns ) {
    var key = columns[keys];
    if ( e.namedValues[key] && (e.namedValues[key] != "") ) {

      message += key + ' :: '+ e.namedValues[key] + "\n\n";
    }
  }
  // Dùng MailApp service của Google Apps Script để gửi về email của bạn.
  MailApp.sendEmail(email, subject, message);
}
Bạn sửa địa chỉ mail màu đỏ thành địa chỉ mail bạn muốn gửi. 

Bước 2: Kích hoạt

Vẫn trên tab đó trên thanh Điều hướng ➜ Chỉnh sửa ➜ Các kích hoạt của dự án hiện tại ➜ Click vào chưa kích hoạt nào được .... nhấn vào đây để thêm một kích hoạt ngay bây giờ.
Và thiết lập như hình dưới.
Hướng dẫn cài đặt form google drive gửi thông báo vào mail

Sau khi thiết lập xong ➜ Ấn lưu lại ➜ Xem xét các quyền (tiếp tục) ➜ Chấp nhận. Vậy là bạn đã cài đặt xong. Giờ ra test xem đã có thông báo về mail của các bạn chưa.
Chúc bạn thành công.
Share123.vn

Hướng dẫn cài đặt form Google cho Giỏ hàng blogspot bán hàng

Loading...
Tags:

8 nhận xét:

  1. Bị lỗi nhé Ad .Hổ trợ giúp mình
    http://tapchiduancanho.blogspot.com/p/lien-he.html

    Trả lờiXóa
    Trả lời
    1. bạn đang để thêm bước xác thực mã capcha, bỏ cái đó đi là dc nhé. Thêm cái placeholder nữa cho đẹp và dễ nhìn.

      Xóa
  2. Sau khi bấm GỬI nó nhảy ra trang "docs.google" . có cách nào để nó nhảy ra thông báo tùy chỉnh trên trang hiện hành của mình
    không em?.
    thanks em :)

    Trả lờiXóa
    Trả lời
    1. Đã update ở trên anh nhé, cứ theo hướng dẫn ở trên.

      Xóa
  3. Form này thông báo toàn bộ nội dung của khách hàng qua mail hay nó chỉ báo là có người đặt hàng vậy em? . Thanks em :)

    Trả lờiXóa
    Trả lời
    1. Khi anh setup thêm đoạn code trên, toàn bộ câu trả lời trên bảng tính sẽ gửi trực tiếp về mail của anh nhé.

      Xóa

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Loading...

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn