วิธีสร้างแบบฟอร์มการติดต่อเมื่อคลิกด้วย Divi

ในบทช่วยสอน Divi นี้ เราจะแสดงให้คุณเห็นถึงวิธีสร้างแบบฟอร์มการติดต่อที่ปรากฏขึ้นหลังจากคลิกปุ่ม (เป็นแบบซ้อนทับ) โดยใช้อะไรอย่างอื่นนอกจาก Divi, โค้ด jQuery และโค้ด CSS

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

ด้านล่างนี้ คุณสามารถดูภาพรวมคร่าวๆ เกี่ยวกับสิ่งที่เรากำลังจะสร้างขึ้น จากนั้นเข้าสู่บทช่วยสอน!

ผลลัพธ์บนเดสก์ท็อป

ผลลัพธ์บนโทรศัพท์ & แท็บเล็ต

แรงบันดาลใจ

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

สร้างส่วนด้วยโมดูลปุ่ม

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

ตกลง มาเข้าสู่บทช่วยสอนนี้กันเถอะ!

สมัครสมาชิกช่อง Youtube ของเรา

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

คุณสามารถจัดรูปแบบปุ่มได้ตามที่คุณต้องการ แต่คุณต้องแน่ใจว่า URL ของปุ่มขึ้นต้นด้วย '#' ตามด้วยอย่างอื่น คุณไม่สามารถเว้นว่างหรือใช้อักขระ '#' เท่านั้น การเพิ่ม '#' และข้อความบางส่วน หน้าจะไม่ย้ายเมื่อคุณคลิกที่ปุ่ม หากคุณเว้นว่างไว้ หน้าจะรีเฟรชเมื่อคลิก และถ้าคุณใช้แค่ '#' คุณจะถูกนำไปที่ด้านบนสุดของหน้า

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

สร้างแบบฟอร์มติดต่อเดสก์ท็อปบน Click

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

โดยทั่วไปคุณสามารถสร้างการออกแบบใดก็ได้ที่คุณต้องการภายในแถวและทำให้ปรากฏเป็นป๊อปอัปหากคุณใช้วิธีนี้ เราแค่จะให้คุณได้ลิ้มรสของสิ่งที่คุณสามารถทำได้โดยแสดงวิธีสร้างตัวอย่างต่อไปนี้:

เพิ่มมาตรามาตรฐานใหม่

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐานใหม่ในหน้าที่คุณกำลังทำงานอยู่ ไปที่แท็บขั้นสูงของส่วนที่คุณเพิ่งเพิ่มและเพิ่ม 'ป๊อปอัป' ลงในฟิลด์ CSS Class เลื่อนลงไปที่แท็บเดียวกันและวางโค้ด CSS ต่อไปนี้ลงในช่อง Before ของหมวดหมู่ย่อย CSS ที่กำหนดเอง:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

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

display: none;

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

เพิ่มแถวสองคอลัมน์

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

เลื่อนลงไปที่แท็บ Design และใช้ '30px' สำหรับช่องว่างด้านบน ด้านซ้าย และด้านขวาของทั้งสองคอลัมน์ภายในหมวดย่อย Spacing

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

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

เพิ่มโมดูลข้อความแรก

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

• การวางแนวข้อความ: ศูนย์
• แบบอักษรของข้อความ: กุ้งมังกร
• รูปแบบตัวอักษร: ตัวหนา
• ขนาดตัวอักษรข้อความ: 37
• สีข้อความ: #002282
• ความสูงของบรรทัดข้อความ: 1.7em

เพิ่มโมดูลข้อความที่สอง

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

• การวางแนวข้อความ: ศูนย์
• แบบอักษรของข้อความ: Arial
• ขนาดตัวอักษรของข้อความ: 13
• สีข้อความ: #002282
• ความสูงของบรรทัดข้อความ: 1.7em

เพิ่มโมดูลติดตามโซเชียลมีเดีย

ต่อไป เราจะเพิ่ม Social Media Follow Module ในคอลัมน์แรกด้วย ในกรณีนี้ เราได้เลือกไอคอนโซเชียลสามไอคอน เฟสบุ๊ค ทวิตเตอร์ และอินสตาแกรม เมื่อคุณเพิ่มไอคอนโซเชียลเหล่านี้ในแท็บเนื้อหาแล้ว ให้เปลี่ยนรูปร่างลิงก์เป็น 'วงกลม' ในหมวดหมู่ย่อยไอคอน

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

padding-left: 40%;

เพิ่มโมดูลแบบฟอร์มการติดต่อ

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

• ขนาดตัวอักษรของฟิลด์แบบฟอร์ม: 15
• แบบฟอร์ม ฟิลด์ สีข้อความ: #002282
• ความสูงของเส้นฟิลด์แบบฟอร์ม: 1.7em

ภายในแท็บเดียวกันนั้น ทำการเปลี่ยนแปลงต่อไปนี้นำไปใช้กับหมวดหมู่ย่อยของปุ่ม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20
• สีข้อความของปุ่ม: #FFFFFF
• สีพื้นหลังของปุ่ม: #0086c4
• ความกว้างของขอบปุ่ม: 2
• รัศมีปุ่ม: 3

ไปที่แท็บขั้นสูงและเพิ่มช่องว่างภายในด้านบน 5%

เพิ่มโมดูล Blurb

อีกอย่างที่เราจะต้องเพิ่มในคอลัมน์ที่สองคือ Blurb Module สิ่งเดียวที่เราต้องการโมดูลนี้คือไอคอนทางออกที่ด้านบนขวาของป๊อปอัป เลือกไอคอนต่อไปนี้ในรายการไอคอน และเว้นว่างไว้ทั้งหมด

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

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

ใช้พื้นหลังไล่ระดับสีกับแถว

สุดท้ายแต่ไม่ท้ายสุด เราจะเพิ่มพื้นหลังไล่ระดับที่ดูดีให้กับแถว เปิดการตั้งค่าและทำการเปลี่ยนแปลงต่อไปนี้กับตัวเลือกพื้นหลังการไล่ระดับสี:

• สีไล่ระดับสีแรก: #FFFFFF
• สีไล่ระดับที่สอง: #0c71c3
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 124deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

สร้างแบบฟอร์มติดต่อแท็บเล็ตและโทรศัพท์บน Click

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

เพิ่มมาตรามาตรฐานใหม่

เริ่มต้นด้วยการเพิ่มส่วนมาตรฐานอื่น ส่วนนี้จะต้องมีการตั้งค่าเหมือนกับส่วนที่เราได้สร้างไว้ก่อนหน้านี้ เพิ่ม 'ป๊อปอัป' ในคลาส CSS และเพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ลงในฟิลด์ Before:

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

เพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ในองค์ประกอบหลักด้วย:

display: none;

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

เพิ่มแถวหนึ่งคอลัมน์

สำหรับป๊อปอัปของโทรศัพท์และแท็บเล็ต เราจำเป็นต้องมีคอลัมน์เดียวเท่านั้น สำหรับแถวนี้ เราจะไม่ใช้ความกว้างที่กำหนดเอง อย่างไรก็ตาม เราจะใช้การเติมแบบกำหนดเองเหมือนกับที่เราทำกับเวอร์ชันเดสก์ท็อป 30px สำหรับการเติมด้านบน ซ้ายและขวาของคอลัมน์

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

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

โคลนข้อความ การติดตามโซเชียลมีเดีย & โมดูลแบบฟอร์มการติดต่อ

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

โคลนโมดูล Blurb & เปลี่ยนโค้ด CSS ในแท็บขั้นสูง

คุณยังสามารถโคลนโมดูล Blurb ที่ใช้สำหรับเวอร์ชันเดสก์ท็อปได้ แต่ต้องมีการเปลี่ยนแปลงโค้ด CSS เล็กน้อย แทนที่จะใช้รหัสสำหรับเดสก์ท็อป ให้ใช้สิ่งต่อไปนี้แทน:

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

ตรวจสอบให้แน่ใจว่าคลาส CSS 'ปิด' ใช้สำหรับโมดูล Blurb ด้วย

ใช้พื้นหลังไล่ระดับสีกับแถว

สำหรับรุ่นมือถือ เราใช้การตั้งค่าต่างๆ สำหรับพื้นหลังไล่ระดับของแถว:

• สีไล่ระดับสีแรก: #FFFFFF
• สีไล่ระดับที่สอง: #0c71c3
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

เพิ่มรหัส jQuery ให้กับตัวเลือกธีม

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

โดยไปที่ แดชบอร์ด WordPress > Divi > Theme Options > Integration > และวางโค้ด jQuery ต่อไปนี้ในส่วนหัวของเว็บไซต์ของคุณ:

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

ผลลัพธ์

หากคุณติดตามโพสต์ ทีละขั้นตอน คุณควรจะสามารถบรรลุผลลัพธ์ต่อไปนี้บนเดสก์ท็อป:

และผลลัพธ์ต่อไปนี้บนแท็บเล็ตและโทรศัพท์:

ความคิดสุดท้าย

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย La1n / shutterstock.com