วิธีสร้างแบบฟอร์มใบเสนอราคาด้วยโมดูลแบบฟอร์มติดต่อของ Divi

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

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

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

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

การนำการออกแบบไปใช้ Divi

การสร้างส่วนหัวแบบเต็มหน้าจอ

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

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

ใช้ Visual Builder เพิ่มส่วนเต็มความกว้างและโมดูลส่วนหัวเต็มความกว้างที่ด้านบนสุดของหน้าของคุณ

อัปเดตการตั้งค่าส่วนหัวแบบเต็มความกว้างดังนี้:

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

ชื่อเรื่อง: [ป้อนชื่อ; พยายามเป็นส่วนตัวมากกว่าชื่อที่น่าเบื่อเช่น “แบบฟอร์มใบเสนอราคา”]
ข้อความหัวข้อย่อย: [ป้อนข้อความหัวข้อย่อย]

ปุ่ม #1 ข้อความ: [ป้อนข้อความปุ่ม; บางอย่างเช่น "แสดงให้ฉันดู" หรือ "มาทำสิ่งนี้กันเถอะ"]
ปุ่ม #1 URL: #quote (ใช้สำหรับ anchor CSS ID ที่จะเลื่อนไปที่ส่วนที่มีแบบฟอร์มด้านล่าง)
URL รูปภาพโลโก้: [ป้อนรูปภาพโลโก้]
การวางซ้อนพื้นหลัง: rgba(0,0,0,0.7)
ภาพพื้นหลัง: [อัปโหลดภาพพื้นหลัง 1920 x 1080 ของคุณ]

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

การวางแนวข้อความและโลโก้: ศูนย์
ทำให้เต็มหน้าจอ: ใช่
แสดงปุ่มเลื่อนลง: ใช่
ไอคอน: [เลือกไอคอน]
เลื่อนลงไอคอนสี: #999999
สีข้อความ: เบา
แบบอักษรของชื่อเรื่อง: Ubuntu
ขนาดตัวอักษรของชื่อเรื่อง: 36px
แบบอักษรของหัวเรื่องย่อย: Ubuntu
ขนาดตัวอักษรของหัวเรื่องย่อย: 22px
ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
ขนาดข้อความปุ่มเดียว: 20px
สีข้อความปุ่มเดียว: #ffffff
สีพื้นหลังปุ่มเดียว: #e09900;
ปุ่มสีขอบหนึ่ง: #e09900
ปุ่มหนึ่งตัวอักษรเว้นวรรค: 1px
แบบอักษรปุ่มเดียว: Ubuntu

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

การสร้างแบบฟอร์มใบเสนอราคา

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

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

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

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

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

แบบอักษรของชื่อเรื่อง: Ubuntu
ขนาดตัวอักษรของชื่อเรื่อง: 30px
ระยะห่างของตัวอักษรชื่อเรื่อง: 1px
แบบอักษรของฟิลด์แบบฟอร์ม: Ubuntu
ขนาดตัวอักษรของฟิลด์แบบฟอร์ม: 24px
สีข้อความของช่องแบบฟอร์ม: #e09900
รัศมีเส้นขอบอินพุต: 5px
ใช้เส้นขอบ: ใช่
สีขอบ: #999999
ความกว้างของเส้นขอบ: 1px
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 24px
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #e09900;
สีเส้นขอบของปุ่ม: #e09900
ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
แบบอักษรของปุ่ม: Ubuntu

ตัวเลือกขั้นสูง (CSS ที่กำหนดเอง)

สนามแคปต์ชา:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

ข้อความแคปต์ชา:

Font-size: 24px

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

การเพิ่มฟิลด์แบบฟอร์มใบเสนอราคา

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

สาขาบริษัท

ภายใต้ฟิลด์ "อีเมล" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : บริษัท
Title : ชื่อบริษัทของคุณคืออะไร?
ฟิลด์บังคับ : ใช่

สนามบริการ

ภายใต้ฟิลด์ "บริษัท" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : บริการ
หัวข้อ : วันนี้เราจะช่วยคุณได้อย่างไร?
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• การผลิตเว็บไซต์
• การพัฒนาแอพ
• ทางศิลปะ
• การสร้างวิดีโอ

ฟิลด์บังคับ : ใช่

สาขาวิชาศิลปะ

ภายใต้ฟิลด์ "บริการ" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : art_purpose
Title : ต้องการทิศทางศิลปะแบบไหน?
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• ออกแบบกราฟิก
• การโฆษณา
• การสร้างแบรนด์
• บรรจุภัณฑ์

ฟิลด์บังคับ : ใช่
เปิดใช้งานลอจิกแบบมีเงื่อนไข
ความสัมพันธ์ : ANY
กฎ : วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > ทิศทางศิลปะ

หมายเหตุ : ตรรกะนี้จะแสดงฟิลด์นี้เมื่อใดก็ตามที่ผู้ใช้เลือก "Art Direction" จากคำถามก่อนหน้า

เขตข้อมูลวัตถุประสงค์ของเว็บ

ใต้ฟิลด์ "art_purpose" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : web_purpose
Title : ต้องการเว็บไซต์แบบไหน?
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• อีคอมเมิร์ซ
• บล็อก
• เว็บแอป
• หน้า Landing Page

ฟิลด์บังคับ : ใช่
เปิดใช้งานลอจิกแบบมีเงื่อนไข
ความสัมพันธ์ : ANY
กฎ : วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การผลิตเว็บไซต์

หมายเหตุ : ลอจิกนี้จะแสดงฟิลด์นี้เมื่อใดก็ตามที่ผู้ใช้เลือก "Web Production" จากคำถามก่อนหน้านี้

ช่องวิดีโอ

ภายใต้ฟิลด์ “web_purpose” ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : วิดีโอ
ชื่อเรื่อง : คุณต้องการให้วิดีโอแสดงบนอุปกรณ์ใด?
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• โทรศัพท์มือถือ
• ยาเม็ด
• มอนิเตอร์หรือทีวี
• โปรเจ็กเตอร์

ฟิลด์บังคับ : ใช่
เปิดใช้งานลอจิกแบบมีเงื่อนไข
ความสัมพันธ์ : ANY
กฎ : วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การสร้างวิดีโอ

หมายเหตุ : ตรรกะนี้จะแสดงฟิลด์นี้เมื่อใดก็ตามที่ผู้ใช้เลือก “การสร้างวิดีโอ” จากคำถามก่อนหน้า

ฟิลด์แพลตฟอร์มแอพ

ใต้ฟิลด์ "วิดีโอ" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

รหัสฟิลด์ : app_platform
หัวข้อ : คุณต้องการให้แอพพัฒนาบนแพลตฟอร์มใด
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• iOS
• Android
• Windows
• แบล็กเบอร์รี่

ฟิลด์บังคับ : ใช่
เปิดใช้งานลอจิกแบบมีเงื่อนไข
ความสัมพันธ์ : ANY
กฎ : วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การพัฒนาแอพ

หมายเหตุ : ตรรกะนี้แสดงฟิลด์นี้เมื่อใดก็ตามที่ผู้ใช้เลือก “การพัฒนาแอพ” จากคำถามก่อนหน้า

สาขางบประมาณ

ภายใต้ฟิลด์ "app_platform" ให้เพิ่มฟิลด์ใหม่และอัปเดตการตั้งค่าภายใต้ตัวเลือกเนื้อหาดังนี้:

Field ID : งบประมาณ
หัวข้อ : หากคุณมีงบประมาณในใจ แจ้งให้เราทราบ
ประเภท : ปุ่มตัวเลือก
ตัวเลือก :

• น้อยกว่า $1k
• ประมาณ $5k
• มากกว่า $10k

ฟิลด์บังคับ : NO
เปิดใช้งาน ลอจิกแบบมีเงื่อนไข
ความสัมพันธ์ : ANY
กฎ :
วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การพัฒนาแอพ
วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การสร้างวิดีโอ
วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > การผลิตเว็บไซต์
วันนี้เราจะช่วยคุณได้อย่างไร? > เท่ากับ > ทิศทางศิลปะ

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

เพิ่ม Anchor CSS ID

ย้อนกลับและแก้ไขการตั้งค่าส่วนสำหรับส่วนที่มีแบบฟอร์ม ใต้แท็บขั้นสูง ให้ป้อน CSS ID “quote”

ซึ่งจะสอดคล้องกับ URL ของปุ่มในส่วนหัวแบบเต็ม เพื่อให้ปุ่มเลื่อนไปที่ส่วนนั้นเมื่อคลิก

กำหนดความกว้างที่กำหนดเองสำหรับคอลัมน์แบบฟอร์มใบเสนอราคา

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

ใช้ความกว้างที่กำหนดเอง: ใช่
กำหนดความกว้าง: 556px

การปรับแต่งการออกแบบเพิ่มเติม

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

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

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

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

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

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

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

แค่นั้นแหละ.

ชำระเงินผลลัพธ์สุดท้าย:

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

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

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