วิธีปรับแต่ง Form จาก Google Docs

ต่อเนื่องจากบทความ Google Docs : ตัวอย่างการสร้าง form สั่งซื้อสินค้า มีหลายคนสอบถามมาว่าการปรับแต่ง Google docs form มี่ได้สร้างเอาไว้ให้สามารถติดตั้งบน blogger ให้มีรูปแบบสวยงามนั้นทำอย่างไร?

สอนทำบล็อก สร้างบล็อก วิธีสร้าง blog blogger blogspot

ตามวิธีที่ได้นำเสนอไปแล้วมี 2 วิธีคือ
1. ใช้วิธี Link ไปหา Form ที่ได้สร้างเอาไว้
วิธีนี้หลายคนอาจจะยังไม่ชอบเพราะว่าต้องลิงค์ออกไปที่อื่น แต่โดยความเห็นผมก็เป็นวิธีที่ง่าย และใช้งานได้ดี

2. ส่วนอีกวิธีหนึ่งคือ นำโค้ด แบบ iframe จาก Google docs มาฝังลงใน blog โดยตรง
วิธีนี้เป็นวิธีที่ติดตั้งได้ไม่ยาก แต่ข้อเสียของการใช้ iframe คือไม่สามารถปรับแต่งรูปแบบให้กลมกลืนกับ Template ของบล็อกได้

ดังนั้นวิธีที่ได้กล่าวไว้ในบทความที่แล้ว

4.3 ใช้วิธี ดัดแปลง code ของ Form ที่สร้างขึ้นให้มีความสวยงามและสามารถติดตั้งในแม่แบบของ Blogger ได้อย่างกลมกลืน
เนื่องจากถ้าผมอธิบายวิธีนี้ต่อจะทำให้บทความมี ความยาวมากเกินไป สำหรับท่านที่สนใจสามารถติดตามอ่านได้ในบทความถัดไปของผมครับ
บทความนี้จึงเป็นอีกวิธีหนึ่งในการนำ form จาก Google docs มาติดตั้งบน blogger โดยวิธีนี้จะมีจุดเด่นกว่าวิธีอื่น ๆ ตรงที่สามารถปรับแต่งรูปแบบให้กลมกลืนกับแม่แบบได้ และสำหรับวิธีการทำก็ดำเนินการได้ดังขั้นตอนต่อไปนี้

ขั้นตอนการปรับแต่ง Google Documents Form และติดตั้งบน Blogger


ขั้นที่ 1 สร้าง Form จาก Google Document
โดยทำตามขั้นตอนที่ได้สอนไว้ในบทความ Google Docs : ตัวอย่างการสร้าง form สั่งซื้อสินค้า

ขั้นที่ 2 รับโค้ดของ Form เพื่อนำไปปรับแต่ง
เมื่อได้สร้าง form เสร็จเรียบร้อยแล้วให้คุณไปที่หน้าแบบฟอร์มที่สร้างขึ้น จากนั้นให้คุณใช้เมนูของ Browser ดู Source (ซอร์สโค้ด) ของหน้าดังกล่าว

Facook ทำบล็อก แต่งบล็อก SEO

เมื่อเห็นโค้ดของหน้าแล้วให้คุณค้นหาโค้ด <form action=  และคัดลอกโค้ดตั้งแต่ <form action= จนกระทั่งจบ tag </form>
<form action=
ตรงนี้โค้ดของแต่ละคนไม่เหมือนกัน
</form>

รูปตัวอย่างการคัดลอกโค้ด
Linkwheel สอนสร้างบล็อก สอนเขียนบล็อก

ในขั้นนี้คุณอาจจะวางโค้ดไว้ที่โปรแกรม Notepad หรือ Wordpad ในคอมพิวเตอร์ของคุณ เพื่อเก็บโค้ดเอาไว้ก่อน

ขั้นที่ 3 ปรับแต่งโค้ดของ Form ก่อนนำไปติดตั้งบน blogger

ในขั้นที่ 2 คุณจะได้โค้ดที่มีลักษณะดังนี้
<form action="https://spreadsheets.google.com/formResponse?formkey=dFloT0h3UFlNaDR6bWdEOFVYT1F5amc6MQ&amp;theme=0AX42CRMsmRFbUy01MTkyYWE1NC04ZjI2LTQzM2EtYTIwYi02YjdmMDgxMjI4MWQ&amp;ifq" method="POST" id="ss-form">
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">&#3594;&#3639;&#3656;&#3629;-&#3609;&#3634;&#3617;&#3626;&#3585;&#3640;&#3621;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_0">&#3648;&#3594;&#3656;&#3609; &#3609;&#3634;&#3618;&#3649;&#3630;&#3585; &#3618;&#3641;&#3610;&#3621;&#3655;&#3629;&#3585;</label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_7">email &#3586;&#3629;&#3591;&#3588;&#3640;&#3603;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_7">&#3648;&#3594;&#3656;&#3609; hackublog@gmail.com</label>
<input type="text" name="entry.7.single" value="" class="ss-q-short" id="entry_7"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_9">&#3619;&#3627;&#3633;&#3626;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_9">&#3648;&#3594;&#3656;&#3609; 123456</label>
<input type="text" name="entry.9.single" value="" class="ss-q-short" id="entry_9"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-radio"><div class="ss-form-entry"><label class="ss-q-title" for="entry_6">&#3623;&#3636;&#3608;&#3637;&#3594;&#3635;&#3619;&#3632;&#3588;&#3656;&#3634;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_6">&#3648;&#3621;&#3639;&#3629;&#3585;&#3648;&#3614;&#3637;&#3618;&#3591;&#3623;&#3636;&#3608;&#3637;&#3648;&#3604;&#3637;&#3618;&#3623;</label>
<ul class="ss-choices"><li class="ss-choice-item"><input type="radio" name="entry.6.group" value="Paypal" class="ss-q-radio" id="group_6_1">
<label class="ss-choice-label" for="group_6_1">Paypal</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3652;&#3607;&#3618;&#3614;&#3634;&#3609;&#3636;&#3594;&#3618;&#3660;" class="ss-q-radio" id="group_6_2">
<label class="ss-choice-label" for="group_6_2">&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3652;&#3607;&#3618;&#3614;&#3634;&#3609;&#3636;&#3594;&#3618;&#3660;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3608;&#3609;&#3634;&#3588;&#3634;&#3619;&#3585;&#3619;&#3640;&#3591;&#3648;&#3607;&#3614;" class="ss-q-radio" id="group_6_3">
<label class="ss-choice-label" for="group_6_3">&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3608;&#3609;&#3634;&#3588;&#3634;&#3619;&#3585;&#3619;&#3640;&#3591;&#3648;&#3607;&#3614;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3610;&#3633;&#3605;&#3619;&#3648;&#3588;&#3619;&#3604;&#3636;&#3605;" class="ss-q-radio" id="group_6_4">
<label class="ss-choice-label" for="group_6_4">&#3610;&#3633;&#3605;&#3619;&#3648;&#3588;&#3619;&#3604;&#3636;&#3605;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3608;&#3603;&#3634;&#3609;&#3633;&#3605;&#3636;" class="ss-q-radio" id="group_6_5">
<label class="ss-choice-label" for="group_6_5">&#3608;&#3603;&#3634;&#3609;&#3633;&#3605;&#3636;</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-checkbox"><div class="ss-form-entry"><label class="ss-q-title" for="entry_11">&#3623;&#3636;&#3608;&#3637;&#3619;&#3633;&#3610;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_11">&#3648;&#3621;&#3639;&#3629;&#3585;&#3648;&#3614;&#3637;&#3618;&#3591;&#3623;&#3636;&#3608;&#3637;&#3648;&#3604;&#3637;&#3618;&#3623;</label>
<ul class="ss-choices"><li class="ss-choice-item"><input type="checkbox" name="entry.11.group" value="&#3614;&#3633;&#3626;&#3604;&#3640;" class="ss-q-checkbox" id="group_11_1">
<label for="group_11_1">&#3614;&#3633;&#3626;&#3604;&#3640;</label></li> <li class="ss-choice-item"><input type="checkbox" name="entry.11.group" value="&#3619;&#3633;&#3610;&#3607;&#3637;&#3656;&#3619;&#3657;&#3634;&#3609;&#3650;&#3604;&#3618;&#3605;&#3619;&#3591;" class="ss-q-checkbox" id="group_11_2">
<label for="group_11_2">&#3619;&#3633;&#3610;&#3607;&#3637;&#3656;&#3619;&#3657;&#3634;&#3609;&#3650;&#3604;&#3618;&#3605;&#3619;&#3591;</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_13">&#3607;&#3637;&#3656;&#3629;&#3618;&#3641;&#3656;&#3648;&#3614;&#3639;&#3656;&#3629;&#3619;&#3633;&#3610;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_13">&#3585;&#3619;&#3640;&#3603;&#3634;&#3605;&#3619;&#3623;&#3592;&#3626;&#3629;&#3610;&#3651;&#3627;&#3657;&#3606;&#3641;&#3585;&#3605;&#3657;&#3629;&#3591;</label>
<textarea name="entry.13.single" rows="8" cols="75" class="ss-q-long" id="entry_13"></textarea></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="&#3626;&#3656;&#3591;"></div></div></form>

ให้คุณเติมโค้ดสีแดงลงไปให้ครบตามตำแหน่งในตัวอย่างด้านล่างนี้
<style type='text/css'>
#google-form li{list-style-type:none;}
#google-form ul li{list-style-type:none;}
#google-form .ss-q-title{font-weight:bold;font-size:18px;}
</style>
<div id="google-form">

<form action="https://spreadsheets.google.com/formResponse?formkey=dFloT0h3UFlNaDR6bWdEOFVYT1F5amc6MQ&amp;theme=0AX42CRMsmRFbUy01MTkyYWE1NC04ZjI2LTQzM2EtYTIwYi02YjdmMDgxMjI4MWQ&amp;ifq" method="POST" id="ss-form" target="_blank">
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">&#3594;&#3639;&#3656;&#3629;-&#3609;&#3634;&#3617;&#3626;&#3585;&#3640;&#3621;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_0">&#3648;&#3594;&#3656;&#3609; &#3609;&#3634;&#3618;&#3649;&#3630;&#3585; &#3618;&#3641;&#3610;&#3621;&#3655;&#3629;&#3585;</label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_7">email &#3586;&#3629;&#3591;&#3588;&#3640;&#3603;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_7">&#3648;&#3594;&#3656;&#3609; hackublog@gmail.com</label>
<input type="text" name="entry.7.single" value="" class="ss-q-short" id="entry_7"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_9">&#3619;&#3627;&#3633;&#3626;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_9">&#3648;&#3594;&#3656;&#3609; 123456</label>
<input type="text" name="entry.9.single" value="" class="ss-q-short" id="entry_9"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-radio"><div class="ss-form-entry"><label class="ss-q-title" for="entry_6">&#3623;&#3636;&#3608;&#3637;&#3594;&#3635;&#3619;&#3632;&#3588;&#3656;&#3634;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_6">&#3648;&#3621;&#3639;&#3629;&#3585;&#3648;&#3614;&#3637;&#3618;&#3591;&#3623;&#3636;&#3608;&#3637;&#3648;&#3604;&#3637;&#3618;&#3623;</label>
<ul class="ss-choices"><li class="ss-choice-item"><input type="radio" name="entry.6.group" value="Paypal" class="ss-q-radio" id="group_6_1">
<label class="ss-choice-label" for="group_6_1">Paypal</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3652;&#3607;&#3618;&#3614;&#3634;&#3609;&#3636;&#3594;&#3618;&#3660;" class="ss-q-radio" id="group_6_2">
<label class="ss-choice-label" for="group_6_2">&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3652;&#3607;&#3618;&#3614;&#3634;&#3609;&#3636;&#3594;&#3618;&#3660;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3608;&#3609;&#3634;&#3588;&#3634;&#3619;&#3585;&#3619;&#3640;&#3591;&#3648;&#3607;&#3614;" class="ss-q-radio" id="group_6_3">
<label class="ss-choice-label" for="group_6_3">&#3650;&#3629;&#3609;&#3648;&#3586;&#3657;&#3634;&#3610;&#3633;&#3597;&#3594;&#3637;&#3608;&#3609;&#3634;&#3588;&#3634;&#3619;&#3585;&#3619;&#3640;&#3591;&#3648;&#3607;&#3614;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3610;&#3633;&#3605;&#3619;&#3648;&#3588;&#3619;&#3604;&#3636;&#3605;" class="ss-q-radio" id="group_6_4">
<label class="ss-choice-label" for="group_6_4">&#3610;&#3633;&#3605;&#3619;&#3648;&#3588;&#3619;&#3604;&#3636;&#3605;</label></li> <li class="ss-choice-item"><input type="radio" name="entry.6.group" value="&#3608;&#3603;&#3634;&#3609;&#3633;&#3605;&#3636;" class="ss-q-radio" id="group_6_5">
<label class="ss-choice-label" for="group_6_5">&#3608;&#3603;&#3634;&#3609;&#3633;&#3605;&#3636;</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-checkbox"><div class="ss-form-entry"><label class="ss-q-title" for="entry_11">&#3623;&#3636;&#3608;&#3637;&#3619;&#3633;&#3610;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_11">&#3648;&#3621;&#3639;&#3629;&#3585;&#3648;&#3614;&#3637;&#3618;&#3591;&#3623;&#3636;&#3608;&#3637;&#3648;&#3604;&#3637;&#3618;&#3623;</label>
<ul class="ss-choices"><li class="ss-choice-item"><input type="checkbox" name="entry.11.group" value="&#3614;&#3633;&#3626;&#3604;&#3640;" class="ss-q-checkbox" id="group_11_1">
<label for="group_11_1">&#3614;&#3633;&#3626;&#3604;&#3640;</label></li> <li class="ss-choice-item"><input type="checkbox" name="entry.11.group" value="&#3619;&#3633;&#3610;&#3607;&#3637;&#3656;&#3619;&#3657;&#3634;&#3609;&#3650;&#3604;&#3618;&#3605;&#3619;&#3591;" class="ss-q-checkbox" id="group_11_2">
<label for="group_11_2">&#3619;&#3633;&#3610;&#3607;&#3637;&#3656;&#3619;&#3657;&#3634;&#3609;&#3650;&#3604;&#3618;&#3605;&#3619;&#3591;</label></li>
</ul></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_13">&#3607;&#3637;&#3656;&#3629;&#3618;&#3641;&#3656;&#3648;&#3614;&#3639;&#3656;&#3629;&#3619;&#3633;&#3610;&#3626;&#3636;&#3609;&#3588;&#3657;&#3634;
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_13">&#3585;&#3619;&#3640;&#3603;&#3634;&#3605;&#3619;&#3623;&#3592;&#3626;&#3629;&#3610;&#3651;&#3627;&#3657;&#3606;&#3641;&#3585;&#3605;&#3657;&#3629;&#3591;</label>
<textarea name="entry.13.single" rows="8" cols="75" class="ss-q-long" id="entry_13"></textarea></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="&#3626;&#3656;&#3591;"></div></div></form>
</div>

ขั้นที่ 4 สร้างหน้าเว็บบน blogger ขึ้นมาและวางโค้ดที่ปรับแต่งแล้วในขั้นที่ 3 ลงไป

Login เข้าไปที่ blogger และสร้างหน้าเว็บขึ้นมาและวางโค้ดที่ปรับแต่งแล้วในขั้นที่ 3 ลงไป และบันทึก คุณก็จะได้แบบฟอร์มที่ต้องการบน blog ของคุณแล้วครับ
ทำ blog สร้าง blog ทำ SEO ให้บล็อก

ในการวางผลลัพธ์อาจจะมีการตกบรรทัดบ้าง คุณสามารถใช้วิธีลบช่องว่างเพื่อให้โค้ดหรือข้อความมาอยู่ในบรรทัดเดียวกันได้ และเมื่อดูตัวอย่างผลลัพธ์เป็นที่น่าพอใจแล้วก็บันทึก

สอนสร้างบล็อก สอนแต่งบล็อก สอนเขียนบล็อก สร้างบล็อกฟรี

ตัวอย่างแบบฟอร์มสั่งสินค้าที่ปรับแต่งแล้ว





















จบขั้นตอนครับ  หวังว่าบทความนี้คงเป็นประโยชน์นะครับ และขออภัยสมาชิกบางท่านที่ปล่อยให้รอนาน เพราะว่าช่วงนี้งานประจำกำลังยุ่งครับ สวัสดีครับ

ตอนนี้มีความคิดเห็น : 8 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. เอาบรรทัดสุดท้ายออกน่าเกลียดไม๊

    "Powered by Google Docs Report Abuse - Terms of Service - Additional Terms"

  1. @ Apornpit : ตอนที่ submit เราก็ไปที่หน้าของ google อยู่แล้ว อันนี้ไม่ได้บังคับทำครับ ตามความสมัครใจครับ

  1. @ 9amnuay : จะสื่อว่าอะไรครับ บล็อกของคุณก็คงไม่อยากได้คอมเมนต์แบบนี้ใช่ไหมครับ

  1. ขอบคุณครับ ยอดเยี่ยมเลยครับ
    แต่ติดปัญหาขอถามหน่อยครับ
    เมื่อเวลาเราคลิ๊ก ส่ง หรือ submit สามารถให้ลิงก์ไปที่หน้าแรกของเว็บเราได้หรือไม่ หรือให้ขึ้นข้อความว่า ขอบคุณที่ใช้บริการ

  1. ไม่มีแบบ browse อัพรูปหรอครับ อยากได้อะ

  1. แก้ไขได้แล้วคะ พอมาลองทดสอบ กรอกข้อมูล กดส่ง จะมี formResponse ขึ้นมา พอกดส่งคำตอบอีกมันก็กลับไปยัง formเดิมอะคะ ^^ ช่วยด้วยน๊าคะ งานนี้จิงจังมากมาย

  1. ดันให้ครับ บทความดีมีประโยชน์
    ฝากเวบด้วยครับ ถ้ารบกวนก็ลบออกได้ครับ

    http://www.minibuspattaya.com/
    http://www.taxipattaya.org/

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel