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

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

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

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

สนุก.

นี่คือตัวอย่างหน้าตาของแบบฟอร์มการติดต่อแบบอินไลน์

แนวคิดและแรงบันดาลใจ

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

การใช้การออกแบบด้วย Divi

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

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

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

ตัวเลือกเนื้อหา

สีพื้นหลัง: #006ea5

บันทึกการตั้งค่า

ตอนนี้ เราสามารถเพิ่มโมดูลแบบฟอร์มการติดต่อของเราลงในแถวได้แล้ว

อัปเดตการ ตั้งค่าแบบฟอร์มการติดต่อ ดังนี้:

ตัวเลือกเนื้อหา

ส่งข้อความปุ่ม: “รับใบเสนอราคา”
อีเมล: [ป้อนที่อยู่อีเมลที่ควรส่งข้อความ]
แสดงแคปต์ชา: NO
สีพื้นหลังของแบบฟอร์ม: rgba(255,255,255,0)

ตัวเลือกการออกแบบ

แบบอักษรของฟิลด์แบบฟอร์ม: Lato
ขนาดตัวอักษรของฟิลด์แบบฟอร์ม: 24px
สีข้อความของฟิลด์แบบฟอร์ม: #ffffff
รัศมีเส้นขอบอินพุต: 3px
ใช้เส้นขอบ: ใช่
สีเส้นขอบ: #ffffff
ความกว้างของเส้นขอบ: 1px
ขนาดข้อความของปุ่ม: เดสก์ท็อป 24px, แท็บเล็ต 20px, สมาร์ทโฟน 20px
สีข้อความของปุ่ม: #0c71c3
สีพื้นหลังของปุ่ม: #f4f11f
ความกว้างของขอบปุ่ม: 3px
รัศมีเส้นขอบของปุ่ม: 3

บันทึกการตั้งค่า

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

อัปเดตการ ตั้งค่าฟิลด์ ดังนี้:

ตัวเลือกเนื้อหา

รหัสฟิลด์: “โทรศัพท์”
ชื่อเรื่อง: Phone

ตัวเลือกการออกแบบ

ทำให้เต็มความกว้าง: NO
สัญลักษณ์ที่อนุญาต: ตัวเลขเท่านั้น (0-9)

ตัวเลือกขั้นสูง

ป้อน CSS ที่กำหนดเอง ต่อไปนี้ในกล่อง องค์ประกอบหลัก :

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

บันทึกการตั้งค่า

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

อัปเดตการ ตั้งค่าฟิลด์ ดังนี้:

ตัวเลือกเนื้อหา

รหัสฟิลด์: “ซิป”
ชื่อเรื่อง: Zip Code

ตัวเลือกขั้นสูง

ป้อน CSS ที่กำหนดเอง ต่อไปนี้ในกล่อง องค์ประกอบหลัก :

Max-width: 17%;
Margin-top: -1.5%;

บันทึกการตั้งค่า

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

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

Max-width: 20%;
Margin-top: -1.5%;

บันทึกการตั้งค่า

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

Max-width: 20%;
Margin-top: -1.5%;

บันทึกการตั้งค่า

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

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

ช่องว่างภายในที่กำหนดเอง: บน 12px, ด้านล่าง 14px

บันทึกการตั้งค่า

ไปที่ Row Settings ใต้ แท็บ Design และอัปเดตสิ่งต่อไปนี้:

ช่องว่างภายในที่กำหนดเอง: บน 48px, 0px ขวา, 0px ด้านล่าง, 0px ซ้าย

บันทึกการตั้งค่า

ทำให้ตอบสนอง

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

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

นี่คือวิธีที่แบบฟอร์มตอบสนองต่อขนาดหน้าจอต่างๆ

การสร้างแบบฟอร์มการติดต่อแบบอินไลน์สามช่อง

เมื่อคุณได้สร้างฟอร์มอินไลน์ที่มีสี่ฟิลด์แล้ว คุณสามารถแปลงเป็นฟิลด์ฟอร์มสามฟิลด์ได้อย่างง่ายดายโดยอัปเดตตัวเลือกสองสามอย่าง นี่คือขั้นตอน:

1. แก้ไขแบบฟอร์มอินไลน์ที่คุณเพิ่งสร้างหรือทำซ้ำแบบฟอร์ม
2. ลบฟิลด์รหัสไปรษณีย์ (ตอนนี้คุณมีเพียงสามฟิลด์เท่านั้น)
3. อัปเดตการตั้งค่าฟิลด์โทรศัพท์ (หรือฟิลด์ที่สาม) ใต้แท็บขั้นสูงด้วย CSS ที่กำหนดเองต่อไปนี้ใน

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. อัปเดตการตั้งค่าฟิลด์อีเมล (หรือฟิลด์ที่สอง) ใต้แท็บขั้นสูงด้วย CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

   max-width: 25%;
   margin-top: -1.5%;

5. อัปเดตการตั้งค่าฟิลด์ชื่อ (หรือฟิลด์ใดๆ ก็ตามที่เป็นฟิลด์แรก) ใต้แท็บขั้นสูงด้วย CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

   max-width: 25%;
   margin-top: -1.5%;

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

การสร้างแบบฟอร์มการติดต่อแบบอินไลน์สองช่อง

คุณยังสามารถแปลงฟอร์มอินไลน์ของคุณเป็นฟอร์มสองฟิลด์ได้ด้วยการอัพเดตตัวเลือกสองสามอย่าง นี่คือขั้นตอน:

1. แก้ไขแบบฟอร์มอินไลน์ที่คุณเพิ่งสร้างหรือทำซ้ำแบบฟอร์ม
2. ลบฟิลด์รหัสไปรษณีย์และฟิลด์โทรศัพท์เพื่อให้คุณมีเพียงสองฟิลด์ (ชื่อและอีเมล)
3. อัปเดตการตั้งค่าฟิลด์ชื่อ (หรือฟิลด์ใดๆ ก็ตามที่เป็นฟิลด์แรก) ใต้แท็บขั้นสูงด้วย CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

   max-width: 37%;
   margin-top: -1.5%;

4. อัปเดตการตั้งค่าฟิลด์อีเมล (หรือฟิลด์ที่สอง) ใต้แท็บขั้นสูงด้วย CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

การเพิ่มประเภทฟิลด์อื่นๆ

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

นี่คือลักษณะของฟิลด์แบบหล่นลง...

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

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

รอคอยที่จะได้ยินจากคุณในความคิดเห็น