วิธีจัดรูปแบบฟอร์ม Mailchimp ใน WordPress [2 วิธี!]

กำลังมองหารูปแบบ Mailchimp ใน WordPress หรือไม่? คู่มือนี้จะแสดงให้คุณเห็นว่าการจัดรูปแบบแบบฟอร์มลงทะเบียน Mailchimp นั้นเป็นเรื่องง่าย! นี่คือวิธีการทำ

เวลาอ่านโดยประมาณ : 5.5 นาที

เบื่อกับการพยายามหาวิธีง่ายๆ ในการจัดรูปแบบฟอร์ม Mailchimp ใน WordPress หรือไม่?

พวกเราเข้าใจ. คุณค้นหาและค้นหา แต่ไม่พบตัวเลือกมากมาย โดยเฉพาะอย่างยิ่งคนที่ไม่คาดหวังให้คุณรู้วิธีการเขียนโค้ด

และนั่นก็น่าผิดหวัง

แต่ไม่จำเป็นต้องเป็นเช่นนั้น อันที่จริงแล้ว การออกแบบสไตล์ของฟอร์ม Mailchimp นั้นเป็น เรื่องสนุก

ดังนั้น โพสต์นี้จะแสดงให้คุณเห็นสองวิธีในการจัดรูปแบบฟอร์มการฝัง Mailchimp ของคุณ: ด้วย Mailchimp และฟอร์มที่น่าเกรงขาม

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

วิธีการจัดรูปแบบ Mailchimp ใน WordPress

ฟอร์มของ Mailchimp ดูดีแต่ค่อนข้างธรรมดา

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

ดังนั้นจึงมีสามวิธีในการจัดรูปแบบฟอร์ม Mailchimp ของคุณใน WordPress:

1. ใช้สไตล์ Mailchimp
2. ใช้ตัวสร้างแบบฟอร์ม

เนื่องจากทั้งสองทำงาน เราจะแสดงวิธีการทำงานแต่ละอย่าง

1. วิธีจัดรูปแบบฟอร์มด้วย Mailchimp

การจัดแต่งทรงผมของ Mailchimp โดยใช้วิธีการอาจซับซ้อน

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

หากต้องการเริ่มปรับแต่งแบบฟอร์ม ให้ไปที่บัญชี Mailchimp ของคุณแล้วไปที่ Audience → Signup form → Embedded form

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

เมื่อเสร็จแล้ว ให้คลิก ดำเนินการต่อ

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

หากคุณต้องการปรับแต่งรูปลักษณ์ของแบบฟอร์มนี้ นั่นหมายถึงการปรับแต่งโค้ดของแบบฟอร์มของคุณ

แต่บางครั้งคุณต้องใช้ตะขอ CSS ของ Mailchimp และ Mailchimp มีมากกว่า 30 รายการ เช่น mc-embedded-subscribe-form หรือ mc-embed signup

หากคุณคุ้นเคยกับ CSS และใช้ hook เหล่านี้มากพอ คุณจะทำอะไรกับฟอร์มของคุณได้มากมาย

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

เปลี่ยนสีพื้นหลังของแบบฟอร์ม

หากต้องการเปลี่ยนพื้นหลังของแบบฟอร์ม คุณต้องกำหนดเป้าหมายโค้ด <div id=”mc_embed_signup”>

ดังนั้น ในส่วนสไตล์ของคุณ คุณจะเห็นโค้ดส่วนหนึ่ง:

คุณสามารถเปลี่ยนรหัสนี้เพื่อปรับพื้นหลังของแบบฟอร์ม ตัวอย่างเช่น คุณสามารถเปลี่ยน พื้นหลัง: #fff เป็น พื้นหลัง: #000 เพื่อเปลี่ยนพื้นหลังเป็นสีดำ

แต่ตอนนี้ข้อความไม่ปรากฏอีกต่อไป คุณสามารถเพิ่ม สี: #fff เพื่อเปลี่ยนเป็นสีขาว

ตอนนี้รูปร่างของคุณดูดียิ่งขึ้น!

อย่าลังเลที่จะลองปรับแต่งเพื่อดูว่าคุณสามารถจับคู่เว็บไซต์ WordPress ของคุณได้หรือไม่!

ปรับแต่งปุ่มส่งของคุณ

ตอนนี้ มาดูวิธีการเปลี่ยนปุ่มส่งของคุณ

ดังนั้น คุณต้องกำหนดเป้าหมาย <input type="submit"> แต่เราจะต้องทำให้แตกต่างจากพื้นหลังแบบฟอร์มของคุณ

ไปที่ส่วน <style> ของคุณ และเพิ่มโค้ดสำหรับการแทนที่สไตล์ฟอร์ม Mailchimp ของคุณ:

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

และตอนนี้ฟอร์มของคุณก็เริ่มเข้าที่เข้าทางแล้ว!

คุณสามารถปรับแต่งฟอร์มของคุณต่อได้โดยกำหนดเป้าหมาย CSS hooks เช่น mc-field-groups และโค้ด <input type=”email”>

แต่ถ้าคุณต้องการวิธีที่ง่ายกว่าในการจัดรูปแบบฟอร์ม Mailchimp ให้ลองดูวิธีการด้านล่าง

2. จัดรูปแบบฟอร์มของคุณด้วยเครื่องมือสร้างฟอร์ม

การใช้ CSS แบบกำหนดเองนั้นยอดเยี่ยมในการให้คุณควบคุมการออกแบบฟอร์มของคุณ

ถ้าคุณรู้วิธีการเขียนโค้ด

แต่ถ้าคุณต้องการตัวเลือกที่ง่ายกว่า เราขอแนะนำ ฟอร์มที่น่าเกรงขาม

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

นอกจากนี้ ด้วยการรวมเข้ากับ Mailchimp และ Visual Form Styler ที่ยอดเยี่ยม มันจึงเป็นเครื่องมือสร้างแบบฟอร์มติดต่อ Mailchimp ที่สมบูรณ์แบบ

ติดตั้งและเปิดใช้งาน Formidable จากนั้นเราจะเริ่มกันเลย

รับ Mailchimp Form Styler ของคุณ!

และมีเพียงไม่กี่ขั้นตอนในการทำให้เสร็จ:

1. เชื่อมต่อ Mailchimp และน่าเกรงขาม
2. สร้างแบบฟอร์มของคุณ
3. ปรับแต่งการออกแบบ
4. แสดงแบบฟอร์มของคุณ

1. เชื่อมต่อ Mailchimp และ Formidable

ในแดชบอร์ด WordPress ของคุณ ให้ไปที่ Formidable → Add-Ons ค้นหา Add-on ของ Mailchimp และติดตั้งและเปิดใช้งาน

จากนั้นไปที่ Formiable → Global Settings → Mailchimp

คุณสามารถป้อนรหัส Mailchimp API เพื่อเชื่อมต่อกับบัญชี Mailchimp ของคุณได้

เมื่อเชื่อมต่อบัญชี Mailchimp ของคุณแล้ว ก็ถึงเวลาสร้างแบบฟอร์มของคุณ!

2. สร้างแบบฟอร์มของคุณ

ในการเริ่มสร้างฟอร์มของคุณ ให้ไปที่ Formitable → Forms , แล้วคลิก เพิ่มใหม่

จากนั้น เลือกจากหนึ่งในเทมเพลตที่มีอยู่มากมายของ Formidable หรือ แบบฟอร์มเปล่า เพื่อเริ่มต้นใหม่ตั้งแต่ต้น

จากนั้น ตั้งชื่อแบบฟอร์มของคุณแล้วคลิก สร้าง

ปลั๊กอินจะนำคุณไปยังตัวสร้างฟอร์มแบบลากและวาง ซึ่งคุณสามารถเริ่มสร้างฟอร์มของคุณได้

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

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

การดำเนินการ Mailchimp จะปรากฏขึ้นด้านล่าง และคุณสามารถปรับแต่งการตั้งค่า Mailchimp ของคุณได้

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

ถึงเวลาปรับแต่งแบบฟอร์มของคุณแล้ว ไปที่แท็บ สไตล์ กันเถอะ

3. ปรับแต่งการออกแบบ

Visual Form Styler ของ Formidable ทำให้การปรับแต่งฟอร์มที่สวยงามเป็นเรื่องง่ายสำหรับ ทุกคน

ไม่จำเป็นต้องเขียนโค้ดหรือใช้ CSS Hooks เพียงคลิกและปรับการตั้งค่าในแถบด้านข้าง

ดังนั้น คุณจะเห็นตัวเลือกบางอย่างในแท็บสไตล์ของ Formidable

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

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

ใน Styler ของ Formidable คุณสามารถปรับแต่งแบบฟอร์มให้เหมาะกับความต้องการของคุณได้

เปลี่ยนขนาดฟอนต์ รัศมีเส้นขอบ สี — อะไรก็ได้ที่คุณเห็น คุณสามารถกำหนดเองได้

คุณสามารถสร้างสรรค์แบบฟอร์มของคุณและทำให้เป็นเอกลักษณ์เฉพาะสำหรับเว็บไซต์ของคุณ

ตัวอย่างเช่น นี่คือแบบฟอร์มที่เราสร้างขึ้นสำหรับเว็บไซต์ทดสอบที่เราใช้!

Styler ของ Formidable ช่วยให้คุณเป็นเรื่องง่าย ไม่ว่าจะเป็นมือใหม่หรือผู้เชี่ยวชาญ

ลองเล่นกับการตั้งค่าและสร้างแบบฟอร์มของคุณเอง

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

ตอนนี้มาแสดงแบบฟอร์มนั้นกันเถอะ

4. แสดงแบบฟอร์มของคุณ

ก่อนอื่น ให้ไปที่โพสต์หรือเพจที่คุณต้องการเพิ่มฟอร์ม Mailchimp

จากนั้นเพิ่มบล็อก WordPress ใหม่ จากนั้นค้นหาบล็อก แบบฟอร์มที่น่าเกรงขาม และเพิ่มเข้าไป

จากนั้น เลือกแบบฟอร์มของคุณจากเมนูแบบเลื่อนลง แล้วคุณจะเห็นแบบฟอร์มของคุณ

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

เราบอกคุณว่า Formidable ดีที่สุดสำหรับแบบฟอร์มง่าย ๆ สำหรับ Mailchimp!

ด้วยขั้นตอนง่ายๆ เพียงไม่กี่ขั้นตอน คุณก็เตรียมแบบฟอร์มที่กำหนดเองได้แล้ว

ไม่มีโค้ด ไม่ยุ่งยาก — สร้างแบบฟอร์มได้ง่ายๆ

รับ Mailchimp Form Styler ของคุณ!

คุณจะจัดรูปแบบ Mailchimp ใน WordPress อย่างไร

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

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

หากคุณยังสงสัยว่าเหตุใด Formidable จึงเป็นตัวเลือกที่ดีที่สุด ลองอ่านโพสต์นี้ว่าทำไมปลั๊กอิน WordPress ของ Mailchimp ถึงเป็นปลั๊กอิน WordPress ที่ดีที่สุด

คุณจะไม่ผิดหวัง

หากคุณพร้อมที่จะเริ่ม ให้ไปที่หน้าราคาของเราและเลือกหนึ่งในแผนที่ยอดเยี่ยมของเรา

สุดท้าย ติดตามเราบน Facebook, Twitter และ YouTube เพื่อรับคำแนะนำและเคล็ดลับดีๆ จาก Mailchimp!

อ่านเพิ่มเติมเกี่ยวกับ Mailchimp และน่าเกรงขาม!

• วิธีเพิ่ม Mailchimp Popup ลงใน WordPress [สองวิธีง่ายๆ!]
  อ่านเพิ่มเติม

  วิธีสร้าง Mailchimp Popup ใน WordPress (คำแนะนำง่ายๆ)
  อ่านเพิ่มเติม

  คุณต้องการปลั๊กอิน WordPress แบบฟอร์มลงทะเบียน Mailchimp ตอนนี้
  อ่านเพิ่มเติม

คุณรู้หรือไม่ว่า Formidable Forms เป็นหนึ่งในปลั๊กอินตัวสร้างฟอร์ม WordPress ที่เร็วที่สุดที่มีอยู่ในปัจจุบัน หากคุณยังไม่ได้ใช้งาน ให้เริ่มต้นด้วยปลั๊กอินฟรีของเราหรือรุ่นโปรที่มีคุณสมบัติครบถ้วน!