วิธีรวมแบบฟอร์มติดต่อในส่วนท้าย Divi ของคุณ

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

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

ดูตัวอย่าง

แบบฟอร์มการติดต่อส่วนท้ายของเดสก์ท็อป Divi ตัวอย่างที่หนึ่ง

แบบฟอร์มการติดต่อส่วนท้ายโทรศัพท์ Divi ตัวอย่างที่หนึ่ง

แบบฟอร์มการติดต่อส่วนท้ายของเดสก์ท็อป Divi ตัวอย่างที่สอง

แบบฟอร์มการติดต่อส่วนท้ายโทรศัพท์ Divi ตัวอย่างที่สอง

เกี่ยวกับแบบฟอร์มการติดต่อในส่วนท้าย Divi ของคุณ

เหตุใดจึงรวมแบบฟอร์มการติดต่อไว้ในส่วนท้าย Divi ของคุณ

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

จะเพิ่มแบบฟอร์มการติดต่อได้ที่ไหน

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

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

ตัวอย่างด้านล่างมาจาก เทมเพลตส่วนหัวและส่วนท้ายฟรีสำหรับ Divi's Stone Factory Layout Pack นี่เป็นตัวอย่างที่ดีของวิธีการใช้แบบฟอร์มติดต่อในส่วนท้าย เค้าโครงนี้ประกอบด้วยแบบฟอร์มติดต่อและแบบฟอร์มอีเมล แบบฟอร์มการติดต่อจะถูกวางไว้พร้อมกับข้อมูลการติดต่อในแถวที่แตกต่างจากลิงก์และแบบฟอร์มอีเมล นอกจากนี้ยังเป็นสีที่แตกต่างจากแบบฟอร์มอีเมลและมีป้ายกำกับที่ดี ดังนั้นผู้เข้าชมจะทราบได้อย่างรวดเร็วว่าเป็นแบบฟอร์มใด

วิธีรวมแบบฟอร์มการติดต่อในส่วนท้าย Divi ของคุณ

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

นำเข้าเค้าโครงส่วนท้าย Divi ของคุณ

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

เลือกไอคอน การพกพา ที่มุมขวาบนของ Theme Builder ไป ที่เทมเพลตส่วนหัวและส่วนท้ายของคุณบนคอมพิวเตอร์ของคุณ เลือก เทมเพลต แล้วคลิก นำเข้าเทมเพลตตัวสร้างธีม Divi บันทึก การเปลี่ยนแปลงของคุณ

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

วิธีเพิ่มแบบฟอร์มการติดต่อส่วนท้ายของ Divi

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

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

ย้ายข้อมูลการติดต่อ

ขั้นแรก ให้ลากและวาง Text Modules ไปที่คอลัมน์ด้านขวา วางซ้อนกันเพื่อแสดงอีเมลที่ด้านบน Office ตรงกลาง และโทรศัพท์ที่ด้านล่าง

ปรับแถว

ถัดไป ปรับ แถว เพื่อแสดงสองคอลัมน์แทนสาม

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

สุดท้าย เพิ่ม โมดูลแบบฟอร์มการติดต่อ ในคอลัมน์ด้านซ้าย

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

วิธีจัดรูปแบบแบบฟอร์มการติดต่อส่วนท้ายของ Divi

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

แบบฟอร์มติดต่อส่วนท้าย Divi ตัวอย่างที่ 1

สำหรับอันนี้ เราจะจัดรูปแบบที่เราเพิ่มในส่วนที่แล้ว

ข้อความ

เปิด การตั้งค่า โมดูลแบบฟอร์มการติดต่อ ป้อนข้อความสำหรับ ชื่อเรื่อง และปุ่มส่ง

• ชื่อเรื่อง: ติดต่อเราเลย
• ปุ่มส่ง: ติดต่อ

เขตข้อมูล

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

• สีพื้นหลัง: #ffba52
• สีข้อความ: #0f1154

ถัดไป เปลี่ยน ฟอนต์ของฟิลด์ เป็นมอนต์เซอร์รัต ตั้งค่า น้ำหนัก เป็นตัวหนาและ ขนาด เป็น 16px

• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนัก: ตัวหนา
• ขนาด: 16px

ข้อความชื่อเรื่อง

ถัดไป เลื่อนลงไปที่ ข้อความชื่อเรื่อง เลือก H3 สำหรับ ระดับหัวเรื่อง ชื่อเรื่องของส่วนนี้ใช้ H2 ดังนั้นการเลือก H3 จะสร้างโครงสร้างหน้าที่เหมาะสม เลือก Montserrat สำหรับ แบบอักษร เลือกตัวหนาสำหรับ น้ำหนัก และเปลี่ยน สี เป็น #1d4eff

• ระดับหัวเรื่อง: H3
• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนัก: ตัวหนา
• สี: #1d4eff

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

ถัดไป เลื่อนลงไปที่ ข้อความแคปต์ชา เราจะทำการเปลี่ยนแปลงข้อความแคปต์ชาในการตั้งค่านี้ แต่เราจะเพิ่ม CSS เพื่อเปลี่ยนสีฟิลด์ด้วย เปลี่ยน ฟอนต์ เป็น Roboto น้ำหนัก เป็น Medium และ สี เป็น #1d4eff เราจะเพิ่ม CSS ในตอนท้าย

• แบบอักษร: Roboto
• น้ำหนัก: ปานกลาง
• สี: #1d4eff

ปุ่ม

ถัดไป เลื่อนลงไปที่ Button และเปิดใช้งาน Use Custom Styles for Button เปลี่ยน ขนาดตัวอักษร เป็น 16px สีตัวอักษร เป็นสีขาว และ สีพื้นหลัง เป็น #1d4eff

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาด: 16px
• สีข้อความ: #ffffff
• สีพื้นหลัง: #1d4eff

ตั้งค่า ความกว้างของเส้นขอบ และ รัศมีของเส้นขอบ เป็น 0px สำหรับทั้งคู่ เปลี่ยน ฟอนต์ เป็น Roboto และ น้ำหนัก เป็น Medium

• รัศมีเส้นขอบ: 0px
• ความกว้างของเส้นขอบ: 0px
• แบบอักษร: Roboto
• น้ำหนัก: ปานกลาง

ถัดไป เลื่อนลงไปที่ การเติมปุ่ม ป้อน 14px สำหรับช่องว่างภายในด้านบนและด้านล่าง และ 24px สำหรับช่องว่างภายในด้านซ้ายและขวา

• ช่องว่างภายใน: ด้านบนและด้านล่าง 14px, ซ้ายและขวา 24px

พื้นหลังแคปต์ชา

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

• CSS ฟิลด์แคปต์ชา:

  background-color:rgba(255,186,82,0.2)

แบบฟอร์มติดต่อส่วนท้าย Divi ตัวอย่างที่สอง

ลองดูตัวอย่างอื่น ฉันใช้ส่วนท้ายส่วนกลางจาก Header & Footer ฟรี สำหรับ Divi's Podcaster Layout Pack เราจะแทนที่อีเมลติดต่อด้วยแบบฟอร์มติดต่อ

ลบโมดูลข้อความอีเมล

ก่อนอื่น ให้ลบ โมดูลข้อความติดต่อเราและอีเมล เราจะแทนที่ชื่อเรื่องด้วยชื่อจากโมดูลแบบฟอร์มการติดต่อ

เปลี่ยนความกว้างของคอลัมน์แถว

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

ปรับคอลัมน์

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

เลื่อนลงไปที่ พื้นหลัง แล้วเลือกแท็บ การไล่ระดับสีพื้นหลัง ตั้งค่าสีของ Gradient Stop แรกเป็น #f52791 และปล่อยไว้ที่ตำแหน่ง 0% ตั้งค่าสีของ Gradient Stop ที่สองเป็น #3742fb และปล่อยให้ตำแหน่งอยู่ที่ 100% เปลี่ยน ทิศทาง เป็น 120 องศา

• การไล่ระดับสีแรก: #f52791, 0%
• การไล่ระดับสีครั้งที่สอง: #3742fb, 100%
• ทิศทาง: 120deg

จากนั้นไปที่แท็บ ออกแบบ เปลี่ยน ช่องว่าง ภายในด้านบนและด้านล่างเป็น 40px และ ช่องว่างภายใน ด้านซ้ายและขวาเป็น 30px

• ช่องว่างภายใน: 40px บนและล่าง, 30px ซ้ายและขวา

ถัดไป เลื่อนลงไปที่ เส้นขอบ และปรับ มุมโค้งมน ตั้งค่าซ้ายบนเป็น 0px ขวาบนเป็น 15px ซ้ายล่างเป็น 15px และขวาล่างเป็น 0px ปิดการตั้งค่าคอลัมน์และแถว

มุมโค้งมน:

• บนซ้าย: 0px
• บนขวา: 15px
• ล่างซ้าย: 15px
• ด้านล่างขวา: 0px

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

ถัดไป เพิ่ม โมดูลแบบฟอร์มการติดต่อ แทนที่โมดูลข้อความ

แบบฟอร์มติดต่อ เนื้อหา

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

• ชื่อเรื่อง: ติดต่อเรา

การป้องกันสแปม

เลื่อนลงไปที่ การป้องกันสแปม และปิดใช้งาน

• ใช้ Captcha พื้นฐาน: ไม่

เขตข้อมูล

ไปที่แท็บ ออกแบบ เปลี่ยน สีพื้นหลังของฟิลด์ เป็น rgba(255,255,255,0.12) และเปลี่ยน สีข้อความ เป็นสีขาว

• สีพื้นหลังของฟิลด์: rgba(255,255,255,0.12)
• สีข้อความของฟิลด์: #ffffff

เปลี่ยน แบบอักษรของฟิลด์ เป็น Sarabun ตั้งค่า น้ำหนัก เป็นตัวหนา สไตล์ เป็น TT และ ระยะห่างตัวอักษร เป็น 2px

• แบบอักษรของฟิลด์: Sarabun
• น้ำหนัก: ตัวหนา
• สไตล์: TT
• ระยะห่างระหว่างตัวอักษร: 2px

ข้อความชื่อเรื่อง

ถัดไป เลื่อนลงไปที่ ข้อความชื่อเรื่อง เปลี่ยน ฟอนต์ชื่อเรื่อง เป็น Sarabun น้ำหนัก เป็นตัวหนา สไตล์ เป็น TT และ สี เป็นสีขาว

• ระดับหัวเรื่อง: H3
• แบบอักษรของฟิลด์: Sarabun
• น้ำหนัก: ตัวหนา
• สไตล์: TT
• สี: #ffffff

ปุ่ม

ถัดไป เลื่อนลงไปที่ Button และเปิดใช้งาน Use Custom Styles for Button เปลี่ยน ขนาดตัวอักษร เป็น 14px สีตัวอักษร เป็นสีขาว และ สีพื้นหลัง เป็นสีดำ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาด: 14px
• สีข้อความ: #ffffff
• สีพื้นหลัง: #000000

เปลี่ยน ความกว้างของเส้นขอบ เป็น 0px และ รัศมีของเส้นขอบ เป็น 50px ตั้ง ค่าระยะห่างตัวอักษร เป็น 2px ฟอนต์ เป็น Sarabun น้ำหนัก เป็นตัวหนา และ สไตล์ เป็น TT

• ความกว้างของเส้นขอบ: 0px
• รัศมีเส้นขอบ: 50px
• ระยะห่างระหว่างตัวอักษร: 2px
• Font:สารบรรณ
• น้ำหนัก: ตัวหนา
• สไตล์: TT

ถัดไป เลื่อนลงไปที่ การเติมปุ่ม ป้อน 15px สำหรับช่องว่างภายในด้านบนและด้านล่าง และ 45px สำหรับช่องว่างภายในด้านซ้ายและขวา ปิดโมดูลและบันทึกการตั้งค่าของคุณ

• ช่องว่างภายใน: ด้านบนและด้านล่าง 15px, ซ้ายและขวา 45px

ผลลัพธ์

แบบฟอร์มการติดต่อส่วนท้ายของเดสก์ท็อป Divi ตัวอย่างที่หนึ่ง

แบบฟอร์มการติดต่อส่วนท้ายโทรศัพท์ Divi ตัวอย่างที่หนึ่ง

แบบฟอร์มการติดต่อส่วนท้ายของเดสก์ท็อป Divi ตัวอย่างที่สอง

แบบฟอร์มการติดต่อส่วนท้ายโทรศัพท์ Divi ตัวอย่างที่สอง

สิ้นสุดความคิด

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

เราต้องการได้ยินจากคุณ คุณใส่แบบฟอร์มการติดต่อในส่วนท้าย Divi ของคุณหรือไม่? แจ้งให้เราทราบในความคิดเห็น.