Tùy chỉnh Giao diện Google Form để nhúng vào website của bạn

How To Customize Your Google Forms With Themes?

Google Form là một công cụ tuyệt vời để bạn thu thập dữ liệu từ khách hàng, người tham gia khảo sát... Nó có rất nhiều các tùy chọn câu hỏi từ Trắc nghiệm, Hộp kiểm đến Ngày, Giờ, Phạm vi tuyến tính... Tuy nhiên Google Form có một nhược điểm là khả năng tùy biến về giao diện khá yếu, chỉ đơn giản là đổi màu hay thêm ảnh bìa cho biểu mẫu.

Bài viết sau đây của Iris Tips sẽ hướng dẫn cho các bạn từng bước cách thêm CSS và HTML tùy chỉnh vào Google Form giúp cho biểu mẫu trở nên đầy màu sắc và chuyên nghiệp hơn.

Cách thực hiện

1Đầu tiên các bạn vào Blogger >> Trang >> Trang mới và dán phần CSS và HTML dưới đây để tạo Theme và bộ khung cho biểu mẫu.

.wrapper{width:85%;margin:0 auto}
h1{font-size:48px;font-family:'Libre Baskerville',serif;margin-bottom:10px}
form p{font-family:'Libre Baskerville',serif;font-size:18px;margin:50px 0 20px;line-height:1.6}
form p,label[for="short-answer"],label[for="paragraph"]{padding-bottom:6px;border-bottom:2.5px solid #00BF8F}
header{position:relative;padding:180px 0 30px;color:#fff;background:linear-gradient(to bottom,rgba(43,38,96,0) 0%,rgba(0,0,0,0.9) 70%,rgba(0,0,0,1) 100%),url(https://lh3.googleusercontent.com/qCZZVhXJoOyjtWU58471UwXUspmN7jVnXICa38SLb7XQX8ZfiJZNh6L8fSOfXnsRzzrctZiVBw=w1200) no-repeat;background-size:cover;background-position:bottom}
section{background:#fff;padding:20px 0}
.input-wrap{margin-bottom:10px}
select{display:block;margin-bottom:50px}
input[type="checkbox"],input[type="radio"]{margin-right:5px}
label[for="short-answer"],label[for="paragraph"]{display:block;margin-bottom:20px;font-family:'Libre Baskerville',serif;font-size:18px;line-height:1.6}
input[type="text"],input[type="email"],textarea{width:80%;padding:6px;font-size:16px;border:1px solid #00BF8F;background:#DAEAE6;margin-bottom:20px}
input[type="text"],input[type="email"]{width:50%}
.input-wrap.select-box{border:1px solid #00BF8F;background:#DAEAE6;width:50%;height:34px;padding:0 10px;margin-bottom:50px;color:#111}
input[type="date"],input[type="time"]{border:none;border:1px solid #00BF8F;background:#DAEAE6;font-family:'Lato',sans-serif;letter-spacing:0.5px;height:34px;padding:0 10px;margin-bottom:50px;width:50%}
.input-wrap.select-box:hover{background:#00BF8F}
.input-wrap.select-box:select{color:#111}
textarea{min-height:100px}
select{border:none;background:transparent;font-family:'Lato',sans-serif;letter-spacing:0.5px;height:34px;width:100%}
select:hover{cursor:pointer}
input[type="submit"]{display:block;margin:20px auto 50px;height:34px;width:125px;font-family:'Lato',sans-serif;letter-spacing:0.5px;background:#008463;border:0 solid;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1.25px}
input[type="submit"]:hover{background:#00BF8F;cursor:pointer}
input[type="range"]{position:relative;margin:0 100px}
input[type="range"]:before,input[type="range"]:after{position:absolute;font-family:'Lato',sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:0.5px;top:-2px;color:#008463}
input[type="range"]{-webkit-appearance:none!important;display:inline-block;height:10px;width:250px;margin:20px;background:#DAEAE6;border:1px solid #00BF8F;border-radius:10px}
input[type="range"]:focus{outline:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#008463;height:15px;width:15px;border:4px solid #00BF8F;border-radius:20px;box-shadow:0 0 0 1px #00BF8F,0 0 8px #008463 inset;box-sizing:border-box;cursor:pointer;transition:all 0.15s}
input[type="range"]::-webkit-slider-thumb:hover,input[type="range"]::-webkit-slider-thumb:active{height:20px;width:20px;border:6px solid #008463;background:#fff;box-shadow:0 0 0 0 #00BF8F,0 0 8px #00BF8F inset}

<header>
<div class="wrapper">
<h1>Iris Tips Survey</h1>
<h4>Khảo sát mức độ hài lòng khi truy cập website</h4>
</div>
</header>

<section>
<div class="wrapper">
<script type="text/javascript">
var submitted=false;
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){window.location='https://iris-tips.blogspot.com/p/survey-success.html';}" style="display: none;"></iframe><br />
<form action="https://docs.google.com/forms/d/XXXXX/formResponse" method="POST" onsubmit="submitted=true;" target="hidden_iframe">



<!-- Nội dung các câu hỏi đặt ở đây -->



<input class="button" name="submit" type="submit" value="Submit">
</form>
</div>
</section>

Chỉnh sửa: XXXX trong https://docs.google.com/forms/d/XXXXX/formResponse lại thành ID Google của bạn.

Lưu ý: Thay https://iris-tips.blogspot.com/p/survey-success.html lại thành liên kết page của bạn sẽ tạo ở bước 5.

2Tiếp theo tất nhiên chúng ta cần Tạo một biểu mẫu trên Google Form và Xuất bản nó. Chúng ta cùng lướt qua các loại câu hỏi của Google Form.

3Tùy thuộc vào từng loại câu hỏi chúng ta sẽ có các đoạn code khác nhau tương ứng.

3aCheckboxes

<p>1. Đây là lần đầu tiên bạn truy cập Iris Tips?</p>
<div class="input-wrap"><input type="radio" name="entry.xxx" required="" id="e1" value="Đúng"/>
<label for="e1">Đúng</label></div>
<div class="input-wrap"><input type="radio" name="entry.xxx" required="" id="e2" value="Sai"/>
<label for="e2">Sai</label></div>

3bMultiple Choice

<p>5. Bạn thích Iris Tips viết bài về chủ đề nào hơn?</p>
<div class="input-wrap"><input type="checkbox" name="entry.xxx" id="a1" value="Thủ thuật Blogger"/>
<label for="a1">Thủ thuật Blogger</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.xxx" id="a2" value="SEO"/>
<label for="a2">SEO</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.xxx" id="a3" value="Thủ thuật Windows, máy tính"/>
<label for="a3">Thủ thuật Windows, máy tính</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.xxx" id="a4" value="Các Serries bài viết."/>
<label for="a4">Các Serries bài viết</label></div>
<div class="input-wrap"><input type="checkbox" name="entry.xxx" id="a5" value="Khác"/>
<label for="a5">Khác</label></div> 

3cShort Answer

<label for="short-answer">4. Bạn đang tìm kiếm thông tin gì mà Iris Tips đã hoặc không giúp được bạn vậy?</label>
<input name="entry.xxx" type="text" id="short-answer"/>

3dParagraph

<label for="paragraph">12. Iris Tips rất vui khi nhận được những góp ý quý báu từ bạn. Nếu bạn có bất kỳ chia sẻ nào nhằm giúp làm phong phú hơn lượng thông tin hay giao diện và các tính năng trên website dễ sử dụng hơn, xin vui lòng gửi cho chúng tôi vào ô bên dưới?</label>
<textarea name="entry.xxx" type="text" required="" id="paragraph"></textarea><br/>

3eLinear Scale

<label for="paragraph">10. Đánh giá của bạn về giao diện website?</label>
Xấu, khó sử dụng<input name="entry.xxx" type="range" min="1" max="10" step="1" required="">Đẹp, dễ sử dụng

3fDrop-down

<p>11. Bạn có muốn tiếp tục quay trở lại ghé thăm website của chúng tôi?</p>
<div class="input-wrap select-box">
<select name="entry.xxx">
<option selected disabled>Lựa chọn</option>
<option value="Rất muốn">Rất muốn</option>
<option value="Muốn">Muốn</option>
<option value="Không chắc">Không chắc</option>
<option value="Ít muốn">Ít muốn</option>
<option value="Không muốn">Không muốn</option>
</select>
</div>

3gDate

<label for="paragraph">Bạn biết đến Iris Tips từ khi nào vậy?</label>
<input name="entry.xxx" type="date">

3hTime

<label for="paragraph">Bạn thường truy cập Iris Tips trong khoảng thời gian là...</label>
 <input name="entry.xxx" type="time">

Note: Còn 3 loại còn lại là Tải lên tập tin, Lưới trắc nghiệm và Lưới hộp kiểm đoạn code này có vẻ như không hoạt động đúng, các bạn không tạo câu hỏi thuộc 3 dạng này nhé.

4Tiếp theo là bước bạn cần chú ý vì chúng ta sẽ thay các entry.xxx thành các entry với ID đúng với thực tế Google Form của bạn. Bước này phải tuyệt đối chính xác 100% vì chỉ cần sai một entry biểu mẫu sẽ không thể hoạt động. Để thay các entry các bạn trở lại Google và nhấn chuột phải chọn Xem nguồn trang (Ctrl+U).

Cuộn xuống gần cuối trang các bạn sẽ thấy danh sách các câu hỏi. Các bạn chú ý trước mỗi câu hỏi và các đáp án lựa chọn sẽ có một dãy số, chúng ta sẽ chỉ chú ý dãy số trước các đáp án lựa chọn thôi vì đây là trường chúng ta cần thu thập thông tin. Các bạn sẽ thay dãy số đó vào entry.xxx trong các đoạn code trên. Ví dụ như trong hình Câu số 1 dãy số là 1945647586 nên sẽ thay thành entry.1945647586

5Tiếp theo chúng ta cần tạo Trang cảm ơn khi bấm Submit xong sẽ được chuyển hướng đến trang đó. Các bạn vào Trang >> Tạo tiếp 1 Trang mới, ví dụ như theo đoạn code mẫu ở bước 1 là Survey Success chẳng hạn.

Lưu ý: Quay về bước 1, thay dòng https://iris-tips.blogspot.com/p/survey-success.html trong HTML code thành địa chỉ trang bạn vừa tạo xong. Ví dụ https://diachiwebsitecuaban.blogspot.com/p/survey-success.html

6Thêm 1 chút CSS và HTML cho Trang cảm ơn.

h4{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.5em;line-height:1.5em;letter-spacing:-0.05em;margin-bottom:20px;padding:.1em 0;color:#444;position:relative;overflow:hidden;white-space:nowrap;text-align:center}
h4:before,h4:after{content:"";position:relative;display:inline-block;width:50%;height:1px;vertical-align:middle;background:#f0f0f0}
h4:before{left:-.5em;margin:0 0 0 -50%}
h4:after{left:.5em;margin:0 -50% 0 0}
h4 > span{display:inline-block;vertical-align:middle;white-space:normal}
p{display:block;font-size:1.35em;line-height:1.5em;margin-bottom:22px;text-align:center}
.notify{display:block;background:#fff;padding:12px 18px;max-width:500px;margin:0 auto;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-bottom:20px;box-shadow:rgba(0,0,0,0.3) 0 1px 2px 0}
.notify h4{margin-bottom:6px}
.successbox h4{color:#678361}
.successbox h4:before,.successbox h4:after{background:#cad8a9}
.notify .alerticon{display:block;text-align:center;margin-bottom:10px}

<div class="notify successbox"> <h4>Success!</h4> <span class="alerticon"><i class="fa fa-check fa-3x"></i></span> <p>Câu trả lời đã được ghi nhận lại. <br/>Cảm ơn bạn đã tham gia khảo sát của Iris Tips.</p> </div>

Lưu ý: Để trang Survey và Thankful được full width các bạn có thể tham khảo bài viết dưới đây.

Xem thêm: Cách ẩn Widget Sidebar để tạo Trang hoặc Bài viết full width 100%

7Và đây là thành quả một biểu mẫu khảo sát hoàn chỉnh.

• DEMO

Nếu tinh ý các bạn sẽ thấy đây là thủ thuật tạo nên tiện ích mà các bạn yêu cầu Iris Tips chia sẻ khá nhiều trong năm qua đấy :)
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Về việc tích hợp chức năng Upload File đính kèm, hiện tại Google Form không khả dụng với tính năng này. Bạn có thể khắc phục bằng cách:
1Tạo thêm 1 trường với định dạng input hoặc textarea để độc giả dán link file vào đó.
2Sử dụng Google App Script.
3Đổi sang ứng dụng của bên khác. Bạn có thể tham khảo thêm tại liên kết bên dưới.

Xem thêm: Tạo Biểu mẫu Online với Upload File và Sale Order

Created by Codepen Blog/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm