การสร้างแบบฟอร์มการติดต่อที่กำหนดเป้าหมายหลายรายการบน Hover ในการออกแบบเดียวด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงแบบฟอร์มการติดต่อที่กำหนดเป้าหมายได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตรา #1

เปิดหน้าใหม่หรือหน้าที่มีอยู่แล้วเพิ่มส่วนปกติใหม่

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

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

เพิ่มเนื้อหา H2

เพิ่มโมดูลข้อความลงในคอลัมน์ด้วยเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H2 ตามลำดับ:

• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษรของหัวเรื่อง 2: ตัวพิมพ์ใหญ่
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ: 6vw
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -0.4vw
• ส่วนหัว 2 ความสูงของบรรทัด: 0.8em

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองด้วย

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw

เพิ่มส่วน #2

พื้นหลังไล่โทนสี

เพิ่มส่วนอื่นด้านล่างของส่วนก่อนหน้าและใช้พื้นหลังไล่ระดับสีต่อไปนี้ (หรือพื้นหลังไล่ระดับสีที่คุณเลือก):

• สี 1: #30fff1
• สี 2: #4635ff
• ทิศทางการไล่ระดับสี: 110deg
• ตำแหน่งสุดท้าย: 85%

ตัวแบ่งด้านบน

ไปที่แท็บออกแบบและเพิ่มตัวแบ่งด้านบน

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ตัวแบ่งด้านล่าง

เพิ่มตัวแบ่งด้านล่างด้วย

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• การจัดเรียงตัวแบ่ง: ใต้เนื้อหาส่วน

ขนาด

เปลี่ยนความสูงในการตั้งค่าการปรับขนาดถัดไป

• ส่วนสูง: 200px

ระยะห่าง

เพิ่มการตั้งค่าการเว้นวรรคแบบกำหนดเองต่อไป

• ขอบล่าง: 30vw (เดสก์ท็อป), 45vw (แท็บเล็ต), 200vw (โทรศัพท์)
• ช่องว่างภายในด้านบน: 0vw
• ช่องว่างภายใน: 0vw

CSS Class

ต่อมาในโพสต์ เราจะเพิ่มโค้ด CSS เพื่อให้เอฟเฟกต์ทำงาน ในการเตรียมตัว เราจะเพิ่มคลาส CSS ในส่วน

• CSS Class: contact-section

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ล้น

เปิดการตั้งค่าแถวและซ่อนโอเวอร์โฟลว์

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การเปลี่ยนผ่าน

ลบระยะเวลาการเปลี่ยนเช่นกัน

• ระยะเวลาการเปลี่ยนภาพ: 0ms

เพิ่มโมดูล Blurb

เพิ่มชื่อเรื่องในกล่องเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูล Blurb และป้อนชื่อที่คุณเลือกซึ่งแสดงถึงหนึ่งในบริการของคุณ

เลือกไอคอน

เลือกไอคอนถัดไป

สีพื้นหลังเริ่มต้น

ดำเนินการต่อโดยเพิ่มสีพื้นหลังเริ่มต้น

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

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังบนโฮเวอร์

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

การตั้งค่าไอคอนเริ่มต้น

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าไอคอนตามลำดับ:

• ไอคอนสี: #000000
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2.5vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

การตั้งค่าไอคอนโฮเวอร์

แก้ไขสีไอคอนเมื่อวางเมาส์ไว้

• สีไอคอน: #ffffff

การตั้งค่าข้อความชื่อเริ่มต้น

เปิดการตั้งค่าข้อความชื่อเรื่องถัดไป และใช้การเปลี่ยนแปลงต่อไปนี้:

• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความชื่อเรื่อง: Center
• ชื่อข้อความสี: #000000
• ขนาดข้อความชื่อเรื่อง: 0.9vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)

วางเมาส์เหนือการตั้งค่าข้อความ

เปลี่ยนสีข้อความชื่อเรื่องเมื่อวางเมาส์เหนือ

• สีข้อความของชื่อเรื่อง: #ffffff

ขนาด

ปรับเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ ต่อไป

• ความกว้าง: 10vw (เดสก์ท็อป), 17vw (แท็บเล็ต), 30vw (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มค่าระยะขอบและช่องว่างภายในแบบกำหนดเองลงในการตั้งค่าระยะห่าง

• อัตรากำไรขั้นต้น: 4vw
• ระยะขอบล่าง: 4vw
• ด้านบน: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 6vw (โทรศัพท์)

ชายแดน

เรากำลังเปลี่ยนโมดูลให้เป็นวงกลมด้วยการเพิ่ม '50vw' ในแต่ละมุมในการตั้งค่าเส้นขอบ

กล่องเงา

เพิ่มเงากล่องด้วย

มาตราส่วนการแปลงเริ่มต้น

ไปที่การตั้งค่าการแปลงและตรวจสอบให้แน่ใจว่าค่ามาตราส่วนการแปลงเริ่มต้นยังคงเป็น '100%'

โฮเวอร์แปลงมาตราส่วน

เปลี่ยนค่าเหล่านี้เมื่อวางเมาส์เหนือ

• ด้านล่าง: 120%
• ขวา: 120%

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

สร้างฟิลด์ชื่อและอีเมลแบบเต็มความกว้าง

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

• ทำให้เต็มความกว้าง: ใช่

ลบฟิลด์ข้อความ & แทรกสามฟิลด์อินพุตสำหรับคำถามเฉพาะบริการ

เพิ่มคำถามสามข้อที่นำไปใช้กับบริการเฉพาะนั้นต่อไป

ปิดการใช้งาน Captcha

ปิดการใช้งานตัวเลือก captcha ด้วย

• แสดงแคปต์ชา: ไม่

การตั้งค่าฟิลด์

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าฟิลด์ตามลำดับ:

• เขตข้อมูลด้านบน: 0.6vw (เดสก์ท็อป), 0.9vw (แท็บเล็ต), 1.5vw (โทรศัพท์)
• ช่องว่างด้านล่าง: 0.6vw (เดสก์ท็อป), 0.9vw (แท็บเล็ต), 1.5vw (โทรศัพท์)
• ขนาดข้อความของฟิลด์: 0.8vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.3vw (โทรศัพท์)

การตั้งค่าปุ่ม

เปลี่ยนลักษณะที่ปรากฏของปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• น้ำหนักแบบอักษรของปุ่ม: Ultra Bold
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มค่าช่องว่างภายในด้วย

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw
• ช่องว่างภายในด้านซ้าย: 2vw
• ช่องว่างภายในด้านขวา: 2vw

การตั้งค่าเส้นขอบ

สุดท้ายแต่ไม่ท้ายสุด ไปที่การตั้งค่าเส้นขอบและเพิ่ม '10px' ในแต่ละมุม

โคลนแถวสามครั้ง

เมื่อคุณทำแถวแรกเสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนได้สามครั้ง

เปลี่ยนเนื้อหาและไอคอน Blurb สำหรับแต่ละแถวที่ซ้ำกัน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนชื่อประกาศและไอคอนสำหรับแต่ละรายการที่ซ้ำกัน

เปลี่ยนคำถามเฉพาะบริการสำหรับแต่ละแถวที่ซ้ำกัน

แก้ไขคำถามเฉพาะของแบบฟอร์มการติดต่อด้วย

การตั้งค่าแถวเพิ่มเติม

ความสูงเริ่มต้น

เปิดการตั้งค่าของแถวแรกอีกครั้ง ไปที่การตั้งค่าขนาด และเปลี่ยนความสูงในขนาดหน้าจอต่างๆ

• ความสูง: 18vw (เดสก์ท็อป), 27vw (แท็บเล็ต), 38vw (โทรศัพท์)

ความสูงโฮเวอร์

นำความสูงกลับมาเป็นอัตโนมัติเมื่อโฮเวอร์

• ส่วนสูง: auto

ขยายการตั้งค่าการปรับขนาดแถวเป็นแถวทั้งหมดใน Section

เมื่อคุณแก้ไขการตั้งค่าการปรับขนาดสำหรับแถวแรกแล้ว คุณสามารถขยายการตั้งค่าไปยังแถวทั้งหมดได้ตลอดทั้งส่วน

วางแถวข้างๆ กันบนเดสก์ท็อปและแท็บเล็ต

เปิดการตั้งค่าหน้า

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

แทรก CSS ที่กำหนดเอง

ไปที่กล่อง CSS ที่กำหนดเองและเพิ่มโค้ด CSS ต่อไปนี้:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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