วิธีลบฟิลด์ชื่อของโมดูล Optin อีเมล Divi

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

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

ผลลัพธ์

หากคุณทำตามโพสต์นี้ทีละขั้นตอน คุณจะได้ผลลัพธ์ดังต่อไปนี้:

ทำไมคุณถึงต้องการลบฟิลด์ชื่อของโมดูล Optin อีเมล

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

เพื่อประหยัดเวลาของผู้มาเยี่ยมของคุณ

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

เพื่อทำให้สิ่งกีดขวางเล็กลง/พึ่งพาพฤติกรรมที่ฉับไว

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

วิธีลบฟิลด์ชื่อของโมดูล Optin อีเมล Divi

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

มาทำให้งานนี้สำเร็จโดยไม่ชักช้า

เพิ่มหน้าใหม่

สิ่งแรกที่คุณต้องทำคือเพิ่มหน้าใหม่หรือเปิดหน้าที่คุณต้องการวาง Email Optin Module ด้วยฟิลด์อีเมลเท่านั้น

เพิ่มโมดูล Optin อีเมล

เมื่อคุณอยู่ในหน้านั้นแล้ว ให้เพิ่มโมดูล Email Optin ทุกที่ที่คุณต้องการให้พอดี เมื่อคุณดูตัวอย่างหน้าด้วย Email Optin Module คุณจะเห็นว่าหน้าตาจะเป็นดังนี้:

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

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

เพิ่มโค้ด CSS

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

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

เพิ่มโค้ด CSS ลงในหนึ่งหน้าโดยเฉพาะ

หากต้องการเพิ่มโค้ด CSS ในหน้าใดหน้าหนึ่งโดยเฉพาะ ให้คลิกไอคอนต่อไปนี้ภายในหน้าที่คุณกำลังดำเนินการอยู่:

ภายในหน้าจอที่ปรากฏขึ้น ให้คัดลอกและวางโค้ด CSS ต่อไปนี้:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

เพิ่มโค้ด CSS ให้กับตัวเลือกธีม

ในการเพิ่มโค้ด CSS ให้กับเว็บไซต์ทั้งหมด ไปที่ WordPress Dashboard > Divi > Theme Options > เลื่อนลงไปที่แท็บ General และเพิ่มโค้ด CSS ต่อไปนี้ลงในฟิลด์ Custom CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

เพิ่มรหัส jQuery

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

เพิ่มรหัส jQuery ลงในหนึ่งหน้าโดยเฉพาะ (โมดูลรหัส)

หากต้องการเพิ่มโค้ด jQuery ลงในหน้าใดหน้าหนึ่งโดยเฉพาะ ให้เพิ่ม Code Module ด้านล่างของ Email Optin Module เปิด Code Module และวางบรรทัดต่อไปนี้ของรหัส jQuery ลงไป:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

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

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

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

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

ผลลัพธ์

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

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

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

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

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