วิธีทำให้แบบฟอร์มการเลือกใช้ Bloom ปรากฏขึ้นเมื่อคลิกปุ่ม

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

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

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

เมื่อใดควรใช้แบบฟอร์มการเลือกใช้หลังจากคลิก

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

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

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

วิธีทำให้แบบฟอร์มการเลือกใช้ Bloom ปรากฏขึ้นเมื่อคลิกปุ่ม

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

สร้างแบบฟอร์มการเลือกใช้ของคุณ

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

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

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

เลือกประเภทแบบฟอร์มการเลือกรับ

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

ตั้งค่า Tab

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

แท็บออกแบบ

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

แท็บการตั้งค่าการแสดงผล

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

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

มาเริ่มกันเลย

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

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

เชื่อมต่อโมดูลปุ่มกับป๊อปอัปแบบฟอร์มการเลือกใช้

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

เรามาเริ่มสร้างทริกเกอร์การคลิกสำหรับปุ่มกันดีกว่า เรามีสองวิธีในการทำเช่นนี้ โดยใช้คลาส CSS หรือโดยการสร้าง CSS ID ที่กำหนดให้กับโมดูล

โดยใช้ CSS Class

เปิดหน้าหรือสร้างหน้าที่คุณต้องการให้ทริกเกอร์การคลิกทำงาน ถัดไป เพิ่มโมดูลปุ่มหรือเปิดการตั้งค่าโมดูลปุ่มของปุ่มที่คุณต้องการให้ทำงาน

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

จากนั้นไปที่แท็บการตั้งค่าการแสดงผลของแบบฟอร์มการเลือกใช้ที่คุณกำลังสร้าง ในส่วนที่แล้ว เราได้แสดงให้คุณเห็นแล้วว่าเวทมนตร์จะเกิดขึ้นที่ไหน เราเปิดใช้งาน 'Trigger On Click' และปิดการใช้งานความเป็นไปได้อื่น ๆ ทั้งหมดที่กล่าวถึง ด้านล่าง 'Trick On Click' คุณจะต้องวางบรรทัดต่อไปนี้:

*.et_pb_button_0.et_pb_button.et_pb_module

อย่างที่คุณเห็น มันเป็นเพียงสัญลักษณ์ '*' ตามด้วยชั้นเรียนที่คุณคัดลอกไว้ก่อนหน้าขั้นตอนนี้

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

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

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

โดยใช้ CSS ID

วิธีที่สองคือการใช้ CSS ID เปิดโมดูลปุ่ม ไปที่แท็บขั้นสูง และระบุ CSS ID ในกรณีนี้ เราจะใช้ 'ป๊อปอัป'

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

ดำเนินการต่อ กลับไปที่การตั้งค่าแบบฟอร์มการเลือกใช้ และเพิ่ม "a#popup" ลงในช่องทริกเกอร์เมื่อคลิก คุณควรเขียน “a#” ตามด้วย CSS ID ที่คุณกำหนดให้กับโมดูลปุ่มเสมอ

a#popup

เชื่อมต่อปุ่มส่วนหัวแบบเต็มความกว้างกับแบบฟอร์มการเลือกใช้

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

โดยใช้ CSS Class

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

จากนั้นไปที่แท็บเนื้อหาและพิมพ์สัญลักษณ์ "#" ตามด้วยอะไรก็ได้ในฟิลด์ URL ของปุ่ม #1

สุดท้าย ไปที่แท็บการตั้งค่าการแสดงผลของการเลือกใช้ของคุณและพิมพ์สัญลักษณ์ "*" ตามด้วยคลาสที่คุณคัดลอกไปยังปุ่ม

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

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

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

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

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