จะสร้างแบบฟอร์มการติดต่อในธีม Divi ได้อย่างไร? (ตัวอย่างแบบฟอร์มในวิดีโอ)

เผยแพร่แล้ว: 2023-03-20
สร้างแบบฟอร์มการติดต่อใน divi

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

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

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

การสร้างแบบฟอร์มการติดต่อแบบมืออาชีพในไม่กี่นาทีไม่ใช่วิทยาศาสตร์ที่เร่งรีบหากคุณใช้ธีม Divi สำหรับไซต์ WordPress ของคุณ มีอะไรอีก? คุณยังสามารถปรับแต่งแบบฟอร์มเหล่านี้เพื่อให้เป็นเอกลักษณ์เฉพาะสำหรับไซต์ของคุณ

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

ประโยชน์ของการมีแบบฟอร์มติดต่อที่ออกแบบมาอย่างดี

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

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

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

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

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

คำแนะนำทีละขั้นตอนในการสร้างแบบฟอร์มการติดต่อ Divi

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

เริ่มเพิ่มแบบฟอร์มการติดต่อในธีม Divi ติดตามเราทีละขั้นตอนเพื่อกำหนดค่าอย่างมืออาชีพ!

ขั้นตอนที่ 1: สร้างหน้าใหม่ในบัญชี WordPress Dashboard ของคุณและคุณสามารถบันทึกเป็นหน้าติดต่อได้

คลิก “ ใช้ตัวสร้าง Divi “; มันจะเปลี่ยนเส้นทางคุณไปยังหน้าเครื่องมือสร้างภาพ Divi

divi-builder-add-contact-form

ขั้นตอนที่ 2: ตัดสินใจเลือกรูปลักษณ์ของหน้าติดต่อของคุณ เมื่อคุณเห็นหน้าว่างของแบบฟอร์มติดต่อของคุณในธีม Divi ให้คลิกไอคอน "+" ซึ่งจะแจ้งให้คุณทราบสามตัวเลือก – สร้างจากศูนย์ ใช้เค้าโครงที่สร้างไว้ล่วงหน้า หรือลอกแบบเค้าโครงที่มีอยู่ เลือก “ สร้างตั้งแต่เริ่มต้น

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

เลือกหารคอลัมน์เดียว

ขั้นตอนที่ 3: คุณสามารถแทรกโมดูลโดยแตะที่แถว พิมพ์ แบบฟอร์มการติดต่อ และมีโมดูลเฉพาะในธีม Divi เราไม่ได้บอกคุณเหรอว่าธีม Divi มีทุกอย่างอยู่ในนั้น?

Divi-ติดต่อแบบฟอร์มโมดูล

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

divi-แบบฟอร์มเขตข้อมูล

เริ่มปรับแต่งแต่ละฟิลด์เพื่อตั้งค่าแบบฟอร์มติดต่อ Divi ของคุณ ทำซ้ำจนกว่าคุณจะทำเสร็จ

ขั้นตอนที่ 5: หากคุณต้องการเพิ่มฟิลด์พิเศษ เช่น หมายเลขโทรศัพท์ ให้คลิก “ เพิ่มฟิลด์ใหม่ ” (ดูตัวเลือกในภาพหน้าจอด้านบน) ป้อนข้อมูลฟิลด์ จากนั้นลากและวางฟิลด์ใหม่เพื่อให้แน่ใจว่าถูกต้อง ตัวอย่างเช่น คุณอาจต้องการขอหมายเลขโทรศัพท์ก่อน แล้วจึงไปยังที่อยู่อีเมล ลากฟิลด์ตามนั้น

เพิ่มฟิลด์ใหม่ divi แบบฟอร์มการติดต่อ

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

หมายเหตุ: รายละเอียดทั้งหมดที่ป้อนในแบบฟอร์มและส่งโดยผู้ใช้จะถูกส่งไปยังที่อยู่อีเมลนี้

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

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

พิมพ์ข้อความแสดงความสำเร็จ จากนั้นเปลี่ยนชื่อปุ่มส่ง หากจำเป็น

Divi-รูปแบบข้อความสำเร็จ

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

Divi-ติดต่อแบบฟอร์มเผยแพร่

ตอนนี้เปิดแบบฟอร์มติดต่อบนเว็บไซต์ของคุณ: websitename.com/contact ตรวจสอบให้แน่ใจว่าทุกฟิลด์และฟังก์ชันการทำงานของแบบฟอร์มก่อนที่คุณจะเผยแพร่ไปยังเว็บ

โบนัส: เลื่อนลงไปที่ส่วนการป้องกันสแปมในการตั้งค่าแบบฟอร์มการติดต่อ Divi คุณสามารถเปิด/ปิด captcha พื้นฐานในแบบฟอร์มการติดต่อสื่อสารของคุณ การเพิ่ม captcha ในแบบฟอร์มติดต่อของคุณในธีม Divi ช่วยลดมัลแวร์และสแปม แนะนำให้เปิดใช้!

divi-แบบฟอร์มแคปต์ชา

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

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

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

บทสรุป

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

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

แบบฝึกหัดธีม Divi อื่น ๆ

แก้ไขส่วนท้ายของธีม Divi

เพิ่ม Google Maps ใน Divi

ลบแถบด้านข้างในธีม Divi

เพิ่มแบบอักษรที่กำหนดเองใน Divi

เพิ่ม/เปลี่ยนโลโก้ใน Divi

เพิ่มรหัสย่อในธีม Divi