15:18
Phát Triển PTI
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 , ...
Đầ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 |
 |
| Hoàn tất tạo form liên hệ từ google biểu mẫu |
- Gửi mail cho 1 người cụ thể
- Chia sẻ link form liên hệ
- 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,"-1959971160883091811"] "><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 InputNhư 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. |
| 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.
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.
NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP PHÁT TRIỂN WEBDESIGN - HOSTING - DOMAIN Website: Phattrien.net - Phattrien.info - Trangvangdichvu.com - Trangvangmuaban.com Hotline: 0931 435 998 Zalo: @PhatTriennet CỬA HÀNG CAMERA Chuyên: Camera IP WiFi, Camera IP, Camera CVI, Camera AHD, Camera Analog, Đầu ghi Camera, Máy Bộ Đàm, Bộ camera quan sát Địa chỉ: 537 Đường Phan Văn Trị, P.Kim Dinh, Tp. Bà Rịa, BR-VT Hotline: 0931 435 998 Zalo: @WinTech Website: CuaHangCamera.com - CửaHàngCamera.vn - Nhaphanphoicamera.net - CareCam.Pro
0 nhận xét :
Đăng nhận xét