บันทึกการทำ Website Feedback ด้วย Google Form pre-filled • MoreMeng.in.th

Updated: 18 January 2023

ระบบการจัดเก็บ feedback มีมาช้านานแล้ว บางคนก็ทำระบบขึ้นมาเอง บางคนก็ใช้ third party หรือ web survey สำหรับจัดเก็บข้อมูล ซึ่งในวันนี้ผมจะแนะนำวิธีที่ผมใช้อยู่ คือการเก็บข้อมูลด้วย Google Form แต่ด้วยความขี้เกียจ ไม่อยากสร้างหลาย ๆ form เพราะอยากรู้ว่าแต่ละ service/product มี feedback อย่างไรบ้าง จึงทำ Choice ให้เลือก ว่าจะแสดงความคิดเห็นให้กับ product/service อันไหน แต่เพื่อป้องกันผู้ใช้งานเลือกข้อมูลที่ไม่ตรงกับ product/service นั้น ๆ จึงใช้ pre filled เพื่ออำนวยความสะดวกแก่ผู้ใช้ด้วย โดยการเติมข้อมูลไว้ให้แล้ว

Jump to Contents

1 Create google form
2 Get pre-filled link
3 Feedback Code
4 Show Case
5 Additional
6 สรุป

Create google form

สร้าง Form ตามใจชอบเลย https://docs.google.com/forms โดยหัวข้อที่ใช้ก็มี

สินค้าหรือบริการ : เป็นแบบ dropdown เช่น member, meeting, salary
ระดับความพึงพอใจ : เป็นแบบ multiple choice เช่น ชอบมาก ชอบ เฉยๆ ควรปรับปรุง
ข้อเสนอแนะอื่นๆ : เป็นแบบ paragraph

Get pre-filled link

หลังจากสร้างฟอร์มเสร็จแล้ว ให้กดไปที่ ⁝ จากนั้นเลือกที่ Get pre-filled link เพื่อสร้างข้อมูลสำเร็จรูป

จากนั้นเติมข้อมูลให้เรียบร้อยแล้วกด Get link จากนั้นกด COPY LINK

รูปแบบ LINK จะเป็นแบบนี้ ถ้าข้อมูลที่เติมเป็นภาษาไทย ก็จะถูกแปลงเป็น HTML ASCII ทำให้ URL ค่อนข้างยาว ก็เอาไปย่อให้สั้นด้วย URL shortener เช่น Bitly, Tiny URL

https://docs.google.com/forms/d/e/1FAIpQLSdgQJjTDARQmP_mTLAUgPgz-NonuDn3-hZeP4Yp_bllZ60czw/viewform?usp=pp_url&entry.395154920=ATH+CSCDAR+%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%95%E0%B8%A3%E0%B8%A7%E0%B8%88%E0%B8%AA%E0%B8%AD%E0%B8%9A%E0%B8%9A%E0%B8%B1%E0%B8%8D%E0%B8%8A%E0%B8%B5%E0%B8%A5%E0%B8%B9%E0%B8%81%E0%B8%AB%E0%B8%99%E0%B8%B5%E0%B9%89+%E0%B8%9C%E0%B8%B9%E0%B9%89%E0%B8%9B%E0%B9%88%E0%B8%A7%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%81+%E0%B8%AA%E0%B8%B4%E0%B8%97%E0%B8%98%E0%B8%B4%E0%B9%8C%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3

Feedback Code

สุดท้ายเราก็สร้าง Link สำหรับส่ง feedback ไว้ยังหน้าเว็บไซต์ ที่ผมสร้างไว้จะทำเป็นเหมือนแถบ sticky note ไว้ด้านซ้าย ตรงกลางของหน้า page โดยแสดงผลแบบจางๆ แต่เมื่อ mouse over แล้ว สีก็จะชัดขึ้น

<!-- Feedback -->
<div class="feedback">
  <a href="https://bit.ly/3kxxymN" 
    target="_blank" 
    data-toggle="tooltip" 
    data-placement="right"  
    title="ส่งความคิดเห็น ข้อเสนอแนะ">
    <i class="fas fa-comments"></i> Feedback
  </a>
</div>
<!-- //Feedback -->

.feedback{
    position: fixed;
    top: 50%;
    left: -50px;
    width: 200px;
    height: 0px;
    text-align:right;
    z-index:9999;
    margin-top:-15px;
    a {
        transform: rotate(-90deg);
        display: block;
        background: #F80;
        text-align:center;
        height: 40px;
        width: 140px;
        padding: 8px 16px;
        color: #fff;
        font-size: 18px;
        text-decoration: none;
        border-bottom: solid 1px #fff;
        border-left: solid 1px #fff;
        border-right: solid 1px #fff;
        box-shadow: -2px 2px 5px rgba(0,0,0,.4);
        opacity: .6;
        &:hover {
            opacity: 1;
        }
    }
}

Show Case

Additional

ซึ่งใน Google Form ที่ทำนั้น เราก็ยังสามารถเพิ่มการแจ้งเตือนใน LINE ได้ หากมีคนมาแสดงความคิดเห็น วิธีการตามตัวอย่างนี้

วิธีใช้ Google Form ส่งข้อความเข้า LINE Notify

สรุป

เป็นอีกช่องทางที่สะดวก และประหยัด ข้อมูลที่ได้ก็แสดงผลเป็น Graph ให้ดูได้ทันทีในหน้า Response ของ Google Form และหากมีการส่งแจ้งเตือนใน LINE ก็ยิ่งทำให้ทราบ feedback ได้ทันท่วงที หาต้องการเก็บข้อมูลอื่นๆ เพิ่มเติมก็แค่แก้ไข form เท่านั้น

Cover Vector: Business vector created by freepik – www.freepik.com