วิธีสร้าง jQuery Popup Boxes และประยุกต์ใช้สร้าง Email Contact

สวัสดีสมาชิกทุกคนครับผมหายไป 2-3 เพราะงานช่วงนี้กำลังยุ่งครับ ตอนนี้อยากเขียนก็เลยเจียดเวลามาเขียนได้สัก 1 บทความก่อนนอน

เข้าเรื่องกันเลยครับ บทความนี้เป็นการผสมผสาน 2 Trick เข้าด้วยกัน คือ

1. การสร้าง Popup Box โดยใช้ jQuery
2. ส่วนอีก 1 Trick ก็คือการ สร้าง form ของ email contact

ซึ่งผมคิดว่าเมื่อรวมทั้ง 2 trick นี้เข้าด้วยกันก็น่าจะเป็นประโยชน์มากกว่า อย่างไรก็ตามหากใครสนใจเพียงอย่างใดอย่างหนึ่งก็ให้เลือกศึกษาเพียงตอนใดตอนหนึ่งตามความสนใจได้ครับ

image

สำหรับการสอนของผมก็จะแบ่งออกเป็น 2 ตอน ได้แก่

ตอนที่ 1 การทำ Popup Box ด้วย jQuery

ตอนที่ 2 การสร้าง form ของ email contact เพื่อให้ผู้อ่านหรือสมาชิกติดต่อเราทาง Email ได้


สำหรับตัวอย่างก็ไม่ต้องดูอื่นไกลครับ สามารถดูได้จากหน้าแรกของบล็อกนี้นั่นเองครับ


image




ตอนที่ 1 สร้าง Popup Box


ไปที่แผงควบคุม >> รูปแบบ >>แก้ไข HTML >> ไม่ต้องคลิกขยายแม่แบบเครื่องมือ


image

1.1 ขั้นนี้คือการติดตั้ง CSS โค้ดเพื่อกำหนดลักษณะต่างๆ ทำได้โดย

ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว


/*POPUP BOX HACK BY HACKUBLOG*/
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:350px; /*ปรับความสูงได้ตามความต้องการ*/
width:500px; /*ปรับความกว้างได้ตามความต้องการ*/
background:#EDEEEF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h3{
text-align:left;
color:#920000;
font-size:12px;
font-weight:bold;
border-bottom:1px dotted #ffffff;
padding-bottom:2px;
margin-bottom:20px;
text-shadow:0.5px 0.5px 0.5px #ffffff
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#AD0000;
font-weight:bold;
display:block;
}
#button{
text-align:center;
float:center;
margin:5px;
}


เมื่อจบขั้นนี้ยังไม่ต้องบันทึกแม่แบบให้ดำเนินการต่อในขั้นที่ 1.2


1.2 ต่อไปติดตั้ง JAVA Script ทำได้โดย

ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้า

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/popup.js' type='text/javascript'/>


จากนั้นก็บันทึกแม่แบบได้เลยครับ


1.3 ต่อไปเป็นขั้นตอนการวางตำแหน่งของปุ่ม ซึ่งระบุด้วย HTML เพื่อให้คลิกแล้วแสดง Popup ขึ้นมา

image

ไปที่แผงควบคุม >> รูปแบบ >>องค์ประกอบของหน้า >> Add Gadget ชนิด HTML/จาวาสคริปต์ ในตำแหน่งที่ต้องการของ templates  แล้ววางโค้ดด้านล่างนี้ลงไป


<div id="button"><input type="submit" value="ตั้งชื่อปุ่ม" /></div>
<div id="popupContact">
<a id="popupContactClose">ข้อความสั่งปิดหน้าต่าง popup</a>
<h3>หัวเรื่องของหน้าต่าง popup ที่แสดงขึ้นมา</h3>
<p id="contactArea">

ใสโค้ด/รูปภาพ/วีดีโอ/ข้อความ ที่ต้องการที่นี่

</p>
</div>
<div id="backgroundPopup"></div>



แก้ไขโค้ดสีแดงตามที่อธิบายแล้วบันทึก ก็ถือว่าเป็นการจบขั้นตอนการสร้างหน้าต่าง popup แล้วครับ


หมายเหตุ หากท่านใดมีความชำนาญในการแก้ไข HTML ของ Template ก็สามารถวางโค้ดในข้อ 1.3 ไว้ที่ตำแหน่งอื่นก็ได้ เช่น วางในตำแหน่งใต้บทความ หรือในตำแหน่งของเมนูบาร์เป็นต้น












ตอนที่ 2 การสร้าง Form Email Contact เพื่อใช้งานร่วมกับ Popup Box ที่สร้างไว้ในตอนที่ 1

2.1 ไปที่ http://www.emailmeform.com และทำการสมัครสมาชิก  โดยให้ใช้ email จริง ในการสมัคร


image

และสำหรับขั้นตอนการสมัครให้ทำด้วยตัวเองครับ ขอข้ามการอธิบายไป (หากสังสัยสามารถสอบถามได้ครับ)

2.2 เมื่อสมัครเสร็จแล้วให้ทุกคน Login เข้าไปครับ (ต้องยืนยันการสมัครผ่าน email ด้วยนะครับ)

image 

image

2.3 จากนั้นมองที่ CONTROL PANEL ทางขวามือ และคลิก Create a New Form ดังรูป 

การสร้าง Form จะมีทั้งสิ้น 7 Step ด้วยกันดังนี้

image

2.3.1 ตั้งค่า email ที่จะรับข้อความ (email ของเรา) และหากเรามีบทความหรือหน้าที่จะแสดงความขอบคุณผู้ที่ส่งข้อความก็ให้กรอกลงไป เสร็จแล้วให้กด next ครับ

image

2.3.2 ต่อมาสร้างหัวข้อของฟอร์มและเลือกประเภทครับ ตามปกติ ฟอร์มจะตั้งค่าอยู่แล้วสามารถกด next ได้เลย แต่หากต้องการต้องการเปลี่ยนค่าเป็นอย่างอื่น ก็ลองศึกษา และเลือกตามต้องการครับ

image

2.3.3 ขั้นที่ 3 ตั้งค่าความกว้างของ text area ของ Form ในแต่ละข้อ ค่าเดิมที่ตั้งไว้เป็นค่าที่ค่อนข้างเหมาะสมไม่ใหญ่หรือเล็กจนเกินไป หากไม่ต้องการขนาดพิเศษมากกว่านี้ก็ทำต่อขั้นตอนที่ 4 ครับ

image

2.3.4 ขั้นที่ 4 เป็นขั้นที่ ตั้งค่าหน้าตาต่าง ๆ ของ ฟอร์ม ส่วนใดที่เป็นการตั้งค่าขั้นสูงก็ให้ข้ามหรือเว้นไปบ้างครับ แต่สิ่งที่ควรตัดสินใจคือเราต้องการให้มีการสะกดคำก่อนส่ง email หรือไม่ สำหรับรูปข้างล่างนี้ไม่ต้องการให้มีการสะกดคำ (หากใครกลัวพวก Spam ก็เลือกให้มีครับ)

image

2.3.5 ขั้นที่ 5 ตั้งค่ารายละเอียดการส่งอีกนิดหน่อย (เอาแบบเดิม ๆ ก็ได้ครับ)

image

2.3.6 ขั้นก่อนจบเป็นการให้เราดูตัวอย่างว่า พึงพอใจหรือไม่ ถ้าหากไม่เราก็สามารถกลับไปแก้ไขได้เสมอ โดยกดปุ่ม Back กลับไปยังขั้นตอนก่อนหน้านี้  และถ้าหากพอใจแล้วกด Finish เพื่อรับโค้ดครับ

  image


2.3.7 ขั้นตอนสุดท้ายคือการรับโค้ดของ Form ที่เราสร้างขึ้นมาครับ

image
image


2.4 เมื่อจบ 2.3 แล้วอย่างเพิ่งเหนื่อยครับ ทำต่ออีกนิดเดียว โดยเราจะต้องนำ HTML code ที่ได้ใน 2.3 ไปแปลงให้เป็น XHTML code โดยไปที่  http://www.cruto.com/resources/code-generators/code-converters/html-to-xhtml.asp  แล้วแปลงโค้ดให้เรียบร้อย

image

2.5 เมื่อได้ XHTML code มาแล้วก็เอาไปใช้ร่วมกับตอนที่ 1 ในขั้นที่ 1.3 ซึ่งถ้าแทนโค้ด ใน 1.3 แล้วจะได้เป็น ( ตัวอย่างเท่านั้นครับเอาไปใช้ไม่ได้นะครับ )

<div id="button"><input value="CONTACT ME" type="submit"/></div>
<div id="popupContact">
<a id="popupContactClose">ปิดตรงนี้ครับ</a>
<h3>CONTACT ME</h3>
<p id="contactArea">
<form enctype="multipart/form-data" action="http://www.emailmeform.com/fid.php?formid=542828" method="post" accept-charset="UTF-8"><table border="0" cellpadding="2" cellspacing="0" bgcolor="#EDEEEF"><tr><td><font face="Verdana" color="#000000" size="2"></font> <div id="mainmsg" style=""> </div></td></tr></table><br/><table border="0" cellpadding="2" cellspacing="0" bgcolor="#EDEEEF"><tr valign="top"> <td nowrap><font face="Verdana" color="#000000" size="2">Name</font></td> <td><input name="FieldData0" size="30" type="text"/> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" color="#000000" size="2">Email </font></td> <td><input name="FieldData1" size="30" type="text"/> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" color="#000000" size="2">Subject</font></td> <td><input name="FieldData2" size="30" type="text"/> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" color="#000000" size="2">Message</font></td> <td><textarea rows="10" cols="60" name="FieldData3"></textarea><br/> </td></tr><tr> <td colspan="2"></td></tr><tr> <td> </td> <td align="middle"><input maxlength="100" style="display : none;" value="" name="hida2" size="3" type="text"/><input class="btn" value="Send email" name="Submit" type="submit"/>    <input class="btn" value="  Clear  " name="Clear" type="reset"/></td></tr><tr><td colspan="2" align="center"><br/></td></tr></table></form>
</p>
</div>
<div id="backgroundPopup"></div>



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

เครดิต jQury : marcgrabanski.com
เครดิต Form : emailmeform.com
Hack to Blogger : Hackublog

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

  1. ถ้าจะประยุกต์ไปใช้ตรง menu ด้านบนจะทำได้ไหมครับ

  1. วิธีหนึ่งที่ทำได้คือ
    1. ใช้เฉพาะการทำตอนที่ 2 ครับ
    2. แล้วสร้างบทความขึ้นมาใหม่ 1 บทความ
    3. วางโค้ด ของ form e-mail ลงไป บันทึกบทความ
    4. ทำลิงค์จากเมนูบาร์มาที่บทความนี้ โดยอาจจะตั้งชื่อว่า contact me อะไรทำนองนี้ครับ

    ปล. จะใส่รูป + ประวัติไว้ที่บทความนั้นด้วยก็ได้ครับ

  1. จะสร้าง form จากที่นี่ก็ ง่ายครับ ไม่ต้องสมัคร ทำได้เลยครับ

    http://www.foxyform.com

  1. ขอบคุณครับ

  1. ผมทำตามขั้นตอนที่ 1
    แต่ผลที่ได้ หน้าเว็บถูกปกคลุมให้เป็นมืดๆครึ้มๆ ไม่มีหน้าต่าง Popup เลยอะคับ
    เป็นเพราะอะไรหรอคับ

  1. @ dekBc52 : ในขั้นที่ 1.3 คุณได้เพิ่มเติมโค้ดเข้าไปหรือยังครับ น่าจะผิดพลาดกับโค้ดที่ใส่เข้าไปครับ

  1. ขอโทษนะครับผมขอถามอะไรหน่อยนะครับคือบล็อกของผมมันมีปัญหามันแสดงบทความในหน้าแรกแค่บทเดียว แล้วมันก็มีข้อความนี้ Normal 0 false false false EN-US X-NONE X-NONE ...ขึ้นมาอ่ะครับ รบกวนช่วยตอบด้วยนะครับ เศร้าเลย

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

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

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