Customize Google Forms Style

Google Form là một công cụ giúp người dùng có thể tạo ra các bảng khảo sát để thu thập ý kiến khách hàng hoặc dùng để tạo form liên hệ, đăng kí một sản phẩm, dịch vụ nào đó. Google Form thực sự dễ dàng sử dụng, dễ dàng chia sẻ. Trong bài viết này, tôi muốn nói đến việc sử dụng Google Form trong trang web của bạn. Rõ ràng, việc Nhúng (sử dụng iframe) không phải là một ý hay, bởi nó sẽ phá vỡ layout trang web, và bạn cũng không thể tuỳ chỉnh giao diện form có sẵn của Google Form. Làm theo các bước dưới đây, bạn có thể:

• Tuỳ chỉnh Google Form cho phù hợp với giao diện trang web của bạn
• Thay thế trang xác nhận (confirmation/thank you page) theo ý muốn

Bước 1. Tạo form

Bạn đăng nhập tài khoản Google và tạo form. Hoàn tất, bạn sẽ có 1 form trông như thế này Xem ví dụ

Bước 2. Lấy markup

Click chuột phải, chọn Inspect hoặc View Page Source. Bạn copy toàn bộ đoạn mã bên trong cặp thẻ <form></form> rồi dán chúng vào 1 file html

<form action="https://docs.google.com/forms/d/e/1FAIpQLSfORxG9boBFUuelYRutEzF-EiTcCKBa0S3ZHUESuZsYDVuBrw/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">Contact form</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="617523359"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.617523359">Name</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.617523359" 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"><div class="quantumWizTextinputPaperinputInputArea"><input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Name" aria-describedby="i.desc.617523359 i.err.617523359" name="entry.663538939" 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.617523359" role="alert"></div></div><div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,vwKRrd;" data-item-id="577906866"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.577906866">Phone</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.577906866" 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"><div class="quantumWizTextinputPaperinputInputArea"><input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Phone" aria-describedby="i.desc.577906866 i.err.577906866" name="entry.2141733698" 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.577906866" role="alert"></div></div><div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,vwKRrd;" data-item-id="1673815445"><div class="freebirdFormviewerViewItemsItemItemHeader"><div class="freebirdFormviewerViewItemsItemItemTitleContainer"><div class="freebirdFormviewerViewItemsItemItemTitle" dir="auto" role="heading" aria-level="2" aria-describedby="i.desc.1673815445">Email</div><div class="freebirdFormviewerViewItemsItemItemHelpText" id="i.desc.1673815445" 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"><div class="quantumWizTextinputPaperinputInputArea"><input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Email" aria-describedby="i.desc.1673815445 i.err.1673815445" name="entry.981424193" 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.1673815445" role="alert"></div></div></div><div class="freebirdFormviewerViewNavigationNavControls" jscontroller="lSvzH" jsaction="rcuQ6b:npT2md;JIbuQc:V3upec(GeGHKb),HiUbje(M2UYVd),NPBnCf(OCpkoe)" data-shuffle-seed="6883442652680585522"><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;6883442652680585522&quot;]
"><input type="hidden" name="pageHistory" value="0"><input type="hidden" name="fbzx" value="6883442652680585522"></div></div>
</form>

Bạn còn phải thay thế nút submit nữa. Tìm đến đoạn <div role="button" ...></div>

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

và thay thế bằng:

<input type="submit" name="submit" value="Gửi">

Bây giờ, bạn đã có 1 form có thể gửi được thông tin, và dữ liệu lưu tại Google Sheets

Bước 3. Style cho form

Mặc dù form đã gửi/nhận được, tuy nhiên chưa có style. Hãy thêm css để form hiển thị theo ý của bạn.

Bước 4. Thay thế trang xác nhận mặc định của Google Form

Bạn submit và được đưa đến 1 trang xác nhận, vẫn theo style của Google.

Bạn cần thêm 1 chút javascript để chuyển hướng trang xác nhận này đến 1 trang tuỳ ý. Thay thế

<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="POST">

Thành:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='http://YOUR-THANK-YOU-PAGE-URL';}"></iframe>
<form action="YOUR-EMBEDDED-GOOGLE-SPREADSHEET-LINK" method="post" target="hidden_iframe" onsubmit="submitted=true;">

Đến đây, công việc đã hoàn tất.

Tham khảo

https://morningstudio.com.au/blog/2013/06/how-to-style-google-forms/