Đăng bởi Huy Tập lúc 28/10/2016 6

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>
Ví dụ:
view link copy đoạn code FORM
view link copy đoạn code 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 class='nut-gui-form-di'>
                <input onclick='myFunction()' type='submit' value='Đăng ký ngay' />
            </div>
        </form>
    </div>
</div>
<script>
function myFunction() {
//Thông báo gửi form thành công
    alert(&quot;Yêu cầu đã được gửi đi, Cảm ơn bạn đã gửi tin nhắn.&quot;);
//Link chuyển tiếp đăng ký thành công
window.location.assign(&quot;http://www.share123.vn/p/dang-ky-thanh-cong.html&quot;);
}
</script>
Ví dụ mình làm thay 1 form hoàn chỉnh như sau và có thêm thuộc tính placeholder="Họ Và Tê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='https://docs.google.com/forms/d/e/11FAIpQLScMYuLcratWxmO_U0gwlHKHSzxb_JK3lS20HcZpKvmcYHc6Tg/formResponse' id='t_form_1' method='POST' target='hidden_iframe'>
            <div class="truong-thong-tin-form">
                <input aria-describedby="i.desc.1427599021 i.err.1427599021" aria-label="Họ và tên" autocomplete="off" class="quantumWizTextinputPaperinputInput exportInput" data-initial-dir="auto" data-initial-value="" dir="auto" jsname="YPqjbf" name="entry.101427024" placeholder="Họ Và Tên*" required="" tabindex="0" type="text" value="" />
            </div>
            <div class="truong-thong-tin-form">
                <input aria-describedby="i.desc.1306331882 i.err.1306331882" aria-label="Số điện thoại" autocomplete="off" class="quantumWizTextinputPaperinputInput exportInput" data-initial-dir="auto" data-initial-value="" dir="auto" jsname="YPqjbf" name="entry.30402608" placeholder="Số điện thoại*" required="" tabindex="0" type="text" value="" />
            </div>
            <div class="truong-thong-tin-form">
                <input aria-describedby="i.desc.519146870 i.err.519146870" aria-label="Email" autocomplete="off" class="quantumWizTextinputPaperinputInput exportInput" data-initial-dir="auto" data-initial-value="" dir="auto" jsname="YPqjbf" name="entry.1953032118" placeholder="Địa chỉ email" tabindex="0" type="text" value="" />
            </div>
            <div class='nut-gui-form-di'>
                <input onclick='myFunction()' type='submit' value='Đăng ký ngay' />
            </div>
        </form>
    </div>
</div>
<script>
function myFunction() {
//Thông báo gửi form thành công
    alert(&quot;Yêu cầu đã được gửi đi, Cảm ơn bạn đã gửi tin nhắn.&quot;);
    //Link chuyển tiếp thông báo đăng ký form thành công
window.location.assign(&quot;http://www.share123.vn/p/dang-ky-thanh-cong.html&quot;);
}
</script>
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{background:#eee;padding:10px;border-radius:5px}
#form-bieu-mau-blogdep input{padding:8px;margin:5px 0;width:100%;border:1px solid #ccc}
.nut-gui-form-di input{border-color:#ffd147;background-color:#ffd147;text-transform:uppercase;color:#222;font-weight:600;max-width:200px}
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.
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

Tags:

6 nhận xét:

  1. Trả lời
    1. Blog của bạn là gì, mình qua hỗ trợ

      Xóa
  2. 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
  3. 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

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

Đó 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