วิธีเพิ่มป้ายกำกับแบบลอยตัวลงในช่องแบบฟอร์มใน Divi

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

https://youtu.be/j1m14XFztdc

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การเพิ่ม Floating Labels ให้กับ Form Fields ใน Divi

การสร้างแบบฟอร์ม Optin อีเมล

เพิ่มแถวหนึ่งคอลัมน์ไปยังส่วนเริ่มต้นใน Divi Builder

เพิ่มแบบฟอร์ม Email Optin ลงในคอลัมน์

เปิดโมดอลการตั้งค่าอีเมล Optin ใต้แท็บเนื้อหา ให้อัปเดตข้อความชื่อและลบข้อความเนื้อหา

อย่าลืมเชื่อมโยงผู้ให้บริการบัญชีอีเมลของคุณ มิฉะนั้น อีเมล optin จะไม่ปรากฏบนหน้าสด

ถัดไป เพิ่มสีพื้นหลังต่อไปนี้ในอีเมล optin:

• สีพื้นหลัง: #1f4b74

ใต้แท็บออกแบบ อัปเดตเค้าโครงของแบบฟอร์ม:

• เลย์เอาต์: ร่างกายอยู่ด้านบน แบบฟอร์มอยู่ด้านล่าง

จากนั้นอัปเดตสไตล์ฟิลด์ดังนี้:

• ฟิลด์ สีพื้นหลัง: โปร่งใส
• สีข้อความของฟิลด์: #ffffff
• Fields Margin: 1.5em ด้านบน
• ช่องว่างภายใน: 0.5em ด้านบน, 0.5em ด้านล่าง, 1em ซ้าย, 1em right
• ขนาดข้อความของฟิลด์: 1.2em
• ฟิลด์ ความสูงของบรรทัด: 2em

ถัดไป อัปเดตสไตล์เส้นขอบของฟิลด์:

• ฟิลด์ มุมโค้งมน: 0px
• ฟิลด์ ความกว้างของเส้นขอบด้านล่าง: 2px
• ฟิลด์ขอบด้านล่างสี: #ffffff

มาอัปเดตรูปแบบแบบอักษรของชื่อเรื่องด้วย:

• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: TT
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center

และตอนนี้ ไปข้างหน้าและจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #1f4b74
• สีพื้นหลังของปุ่ม: #ffffff
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.1em
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT

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

• ความกว้างสูงสุด: 500px
• เบาะ: 5% บน 5% ล่าง 3% ซ้าย 3% ขวา

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

การเพิ่มรหัสที่กำหนดเอง

หากต้องการเพิ่ม CSS และ JQuery ที่กำหนดเอง ให้เพิ่มโมดูลโค้ดภายใต้โมดูลแบบฟอร์มการเลือกรับอีเมล

CSS

ในกล่องเนื้อหาของโค้ด ให้วาง CSS ต่อไปนี้เพื่อให้แน่ใจว่าได้ใส่ CSS ในแท็กรูปแบบที่จำเป็นแล้ว:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQuery

ใต้แท็กสไตล์สิ้นสุด ให้วาง JQuery ต่อไปนี้แล้วห่อด้วยแท็กสคริปต์ที่จำเป็น

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

ทำลายรหัส

เกี่ยวกับ CSS

อันดับแรก เรากำหนดเป้าหมายฟิลด์และกำหนดตำแหน่งสัมพัทธ์เพื่อให้เราสามารถกำหนดตำแหน่งที่แน่นอนภายในฟิลด์ (หรือองค์ประกอบ p) ให้กับองค์ประกอบฉลากได้

.et-float-labels p {
  position: relative !important;
}

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

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

จากนั้น เราจะแสดง ปรับขนาด และแปล (ย้าย) ป้ายกำกับด้วยภาพเคลื่อนไหวสไลด์ขึ้นเมื่อได้รับคลาส "ใช้งานอยู่" ที่ควบคุมโดย JQeury

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

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

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

เกี่ยวกับ JQuery

ขั้นแรก เรากำหนดตัวแปร $floatLabelInput เป็นองค์ประกอบอินพุตในแต่ละฟิลด์แบบฟอร์ม

  var $floatLabelInput = $(".et-float-labels .input");

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

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

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

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของป้ายกำกับแบบลอยของเราบนฟิลด์แบบฟอร์มในแบบฟอร์มตัวเลือกอีเมล Divi

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!