Chapters
- เครื่องมือสร้างแบบฟอร์มสมัครสมาชิก: ออกแบบแบบฟอร์ม
- สร้างและเผยแพร่หน้า Landing Page
- สร้างและฝังแบบฟอร์มสมัครสมาชิก
- สร้างและแสดงฟอร์มป๊อปอัป
- สร้างและจัดตำแหน่งฟอร์มแบบสไลด์เข้า
Contents
the email tool that makes email marketing simple
เครื่องมือสร้างแบบฟอร์มสมัครสมาชิก: ออกแบบแบบฟอร์ม
Published: · Last updated: · By Marcus Biel
In brief
เรียนรู้การใช้เครื่องมือสร้างฟอร์มสมัครของ Maildroppa เพื่อเลือกเทมเพลต จัดวางเนื้อหา ปรับสไตล์ฟิลด์ กำหนดแท็ก เชื่อมต่อโฟลว์ ดูตัวอย่าง และบันทึกฟอร์ม
เครื่องมือสร้างแบบฟอร์มสมัครสมาชิกคือเครื่องมือแก้ไขแบบภาพสำหรับแบบฟอร์มสมัครสมาชิกและ Landing Page ทั้งหมดของ Maildroppa
คุณสามารถใช้เครื่องมือนี้เพื่อจัดวางเลย์เอาต์ เพิ่มข้อความและรูปภาพ กำหนดค่าฟิลด์ผู้สมัครสมาชิก เปลี่ยนสีและฟอนต์ กำหนดแท็ก และเลือกสิ่งที่จะเกิดขึ้นหลังจากมีผู้ส่งแบบฟอร์ม แคนวาสจะแสดงผลลัพธ์ขณะที่คุณทำงาน คุณจึงไม่จำเป็นต้องเขียนโค้ดเพื่อออกแบบประสบการณ์การสมัครสมาชิกที่สมบูรณ์
Maildroppa ใช้เครื่องมือสร้างเดียวกันสำหรับแบบฟอร์ม 4 ประเภท:
- Landing Pages คือหน้าแบบสแตนด์อโลนที่สมบูรณ์ ซึ่งคุณเผยแพร่และแชร์ด้วยลิงก์ได้
- Embedded Forms คือแบบฟอร์มที่วางไว้โดยตรงภายในหน้าบนเว็บไซต์ของคุณ
- Popups จะแสดงอยู่เหนือเว็บไซต์ของคุณ และสามารถเปิดจากองค์ประกอบบนหน้าได้เช่นกัน
- Slide-ins จะแสดงที่ขอบหรือตำแหน่งที่เลือกของหน้าต่างเบราว์เซอร์
คู่มือนี้อธิบายฟังก์ชันทั้งหมดที่แบบฟอร์มประเภทเหล่านี้ใช้ร่วมกัน ส่วนคู่มือที่ลิงก์ไว้จะอธิบายเฉพาะการตั้งค่าและขั้นตอนที่เป็นเอกลักษณ์ของแต่ละประเภท
การเปิดเครื่องมือสร้างแบบฟอร์มสมัครสมาชิก
เปิด “Signup Forms” ใน Maildroppa จากนั้นคลิก “Create Form” เพื่อสร้าง Landing Page, Embedded Form, Popup หรือ Slide-in ใหม่
หากต้องการทำงานต่อกับแบบฟอร์มที่มีอยู่ ให้คลิกชื่อแบบฟอร์ม หรือเลือก “Edit Form” จากเมนูการทำงานรูปจุดสามจุดใน Signup Forms Overview
ตั้งชื่อภายในให้แบบฟอร์มอย่างชัดเจน ชื่ออย่าง “Homepage Newsletter”, “Webinar Popup” หรือ “Summer Lead Magnet” จะช่วยให้จดจำได้ง่ายกว่าชื่อทั่วไปอย่าง “Form 1” ในภายหลัง ชื่อแบบฟอร์มช่วยให้คุณจัดการแบบฟอร์มใน Maildroppa และจะไม่แสดงต่อผู้เข้าชมโดยอัตโนมัติ
ทำความเข้าใจเครื่องมือสร้าง
เครื่องมือสร้างแบ่งออกเป็น 4 พื้นที่หลัก
แถบด้านบน ประกอบด้วยชื่อแบบฟอร์มและการทำงานหลัก ที่นี่คุณสามารถกลับไปยังภาพรวม ดูตัวอย่างงาน และบันทึกงานได้ ส่วน Landing Pages จะแสดงการควบคุมฉบับร่างและการเผยแพร่ในแถบนี้ด้วย
แถบด้านซ้าย ประกอบด้วย “Layout”, “Content” และ “Layers” ใช้แถบนี้เพื่อสร้างโครงสร้าง เพิ่มองค์ประกอบใหม่ และจัดการทุกอย่างที่วางไว้บนแคนวาสแล้ว
แคนวาส คือพื้นที่ทำงานตรงกลาง ซึ่งจะแสดงหน้าหรือแบบฟอร์มปัจจุบัน คลิกองค์ประกอบเพื่อเลือก คุณยังสามารถลากองค์ประกอบไปยังตำแหน่งอื่น หรือเพิ่มองค์ประกอบใหม่จากแถบด้านซ้ายได้
แถบด้านขวา ประกอบด้วย “Settings” และ “Page settings” โดย “Settings” ใช้เปลี่ยนองค์ประกอบที่เลือก ส่วน “Page settings” ใช้เปลี่ยนพื้นหลังโดยรวมและค่าเริ่มต้นด้านการออกแบบ
บนหน้าจอขนาดเล็ก แถบด้านข้างจะเปิดเป็นแผงโดยใช้ปุ่ม “Content” และ “Settings” ฟังก์ชันที่มีให้ใช้งานยังคงเหมือนเดิม
เริ่มต้นด้วยเทมเพลต
เมื่อคุณสร้างแบบฟอร์ม เครื่องมือสร้างจะแสดงดีไซน์เริ่มต้นสำหรับแบบฟอร์มประเภทที่เลือก คุณสามารถเริ่มจากดีไซน์ว่าง ใช้แบบฟอร์มมาตรฐาน หรือเลือกเทมเพลตสำเร็จรูป
เทมเพลตมีเลย์เอาต์ สี รูปแบบตัวอักษร และเนื้อหาตัวอย่างเพื่อช่วยเริ่มต้น เทมเพลตไม่ได้จำกัดสิ่งที่คุณสามารถเปลี่ยนแปลงได้ในภายหลัง หลังจากเลือกเทมเพลตแล้ว คุณยังสามารถแก้ไข ย้าย ทำซ้ำ เปลี่ยนสไตล์ หรือลบทุกองค์ประกอบได้
แบบฟอร์มแต่ละประเภทมีเทมเพลตที่เหมาะกับวัตถุประสงค์ของตนเอง ตัวอย่างเช่น Landing Pages มีดีไซน์หน้า Newsletter, Lead Magnet, Webinar และ Waitlist ที่สมบูรณ์ ส่วน Embedded Forms, Popups และ Slide-ins มีดีไซน์เริ่มต้นแบบกะทัดรัดของตนเอง
หากไม่แน่ใจว่าจะเลือกเทมเพลตใด ให้เลือกเทมเพลตที่มีโครงสร้างใกล้เคียงกับเป้าหมายของคุณมากที่สุด การเปลี่ยนข้อความ สี และรูปภาพมักเร็วกว่าการสร้างโครงสร้างเดียวกันจากแคนวาสว่าง
การสร้างเลย์เอาต์
เปิด “Layout” ในแถบด้านซ้ายเพื่อเพิ่มแถวเซลล์ใหม่ เลย์เอาต์ที่มีให้เลือก ได้แก่:
- หนึ่งเซลล์
- สอง สาม หรือสี่เซลล์ขนาดเท่ากัน
- สองเซลล์ในอัตราส่วน 2:1
- สองเซลล์ในอัตราส่วน 1:2
คลิกเลย์เอาต์เพื่อเพิ่มในตำแหน่งแทรกปัจจุบัน หรือลากเลย์เอาต์ไปวางบนแคนวาส จากนั้นคุณสามารถวางเนื้อหาภายในแต่ละเซลล์ได้
เลือกกล่องหรือคอลัมน์เพื่อปรับขนาด ระยะห่าง การจัดแนว พื้นหลัง เส้นขอบ และระยะห่างด้านในในแถบด้านขวา สำหรับเลย์เอาต์หลายคอลัมน์ คุณยังสามารถเปลี่ยนความกว้างสัมพัทธ์ของคอลัมน์ได้
ใช้เลย์เอาต์เพื่อสร้างลำดับการอ่านที่ชัดเจน คอลัมน์เดียวเหมาะสำหรับแบบฟอร์มสมัครสมาชิกขนาดกะทัดรัด เลย์เอาต์สองคอลัมน์เหมาะเมื่อควรแสดงรูปภาพ รายการประโยชน์ หรือข้อมูลกิจกรรมถัดจากแบบฟอร์มสมัครสมาชิก
การเพิ่มเนื้อหา
เปิด “Content” ในแถบด้านซ้ายเพื่อเพิ่มบล็อกเนื้อหาแต่ละรายการ คุณสามารถคลิกบล็อกเพื่อแทรก หรือลากบล็อกไปยังตำแหน่งที่ต้องการบนแคนวาส
เครื่องมือสร้างมีบล็อกเนื้อหาดังต่อไปนี้:
Signup form — ประกอบด้วยฟิลด์ผู้สมัครสมาชิกและปุ่มส่ง แบบดีไซน์จะต้องมีบล็อก signup form หนึ่งบล็อกก่อนจึงจะบันทึกเป็นแบบฟอร์มที่ใช้งานได้ เมื่อมีบล็อกนี้แล้ว บล็อกดังกล่าวจะไม่ปรากฏเป็นบล็อกเนื้อหาเพิ่มเติมอีก
Text — เพิ่มหัวเรื่อง ย่อหน้า หรือข้อความที่จัดรูปแบบอื่น ๆ
Image — เพิ่มรูปภาพจาก URL การอัปโหลด หรือไลบรารีสื่อของ Maildroppa คุณสามารถระบุข้อความทางเลือก เพิ่มลิงก์ และควบคุมขนาด อัตราส่วนภาพ การครอบตัด จุดโฟกัส การหมุน และการพลิกภาพได้
Video — เพิ่มวิดีโอจาก YouTube หรือ Vimeo, URL สำหรับฝัง หรือไฟล์วิดีโอโดยตรง คุณยังสามารถกำหนดค่ารูปภาพตัวอย่างและรูปลักษณ์ของปุ่มเล่นได้
List — เพิ่มรายการแบบจุดนำหน้าหรือแบบมีหมายเลข แก้ไขรายการและควบคุมสีเครื่องหมาย ระยะห่าง รูปแบบตัวอักษร และการจัดแนวได้
Button — เพิ่มปุ่มลิงก์ที่กำหนดข้อความ URL ขนาด ความกว้าง สี เส้นขอบ รูปแบบตัวอักษร และการจัดแนวได้
Social links — เพิ่มไอคอนที่มีลิงก์สำหรับบริการต่าง ๆ เช่น Facebook, Instagram, LinkedIn, TikTok, YouTube หรือเว็บไซต์ของคุณ
Subscriber counter — แสดงจำนวนผู้สมัครสมาชิกที่ยืนยันแล้วในปัจจุบัน คุณสามารถเพิ่มค่าออฟเซ็ต เปลี่ยนป้ายกำกับ และจัดรูปแบบตัวเลขกับข้อความได้
Spacer — เพิ่มพื้นที่ว่างที่ควบคุมได้ สามารถตั้งค่าระยะห่างสำหรับเดสก์ท็อปและมือถือแยกกันได้
Divider — เพิ่มเส้นแนวนอนที่กำหนดค่าสี ความหนา ความกว้าง รูปแบบ การจัดแนว และระยะห่างได้
Landing Pages ยังมีส่วนสำเร็จรูปที่นำกลับมาใช้ใหม่ได้ ซึ่งอธิบายไว้ใน Landing Page guide
การเลือกและจัดวางองค์ประกอบ
คลิกองค์ประกอบบนแคนวาสเพื่อเลือก การตั้งค่าขององค์ประกอบนั้นจะปรากฏในแถบด้านขวา
การควบคุมบนหรือใกล้องค์ประกอบที่เลือกช่วยให้คุณย้าย ทำซ้ำ หรือลบองค์ประกอบได้ คุณยังสามารถลากองค์ประกอบไปยังเซลล์หรือตำแหน่งอื่น ตัวบ่งชี้ตำแหน่งจะแสดงตำแหน่งที่จะใส่องค์ประกอบ
เปิด “Layers” เมื่อหน้ามีกล่อง คอลัมน์ และบล็อกเนื้อหาที่ซ้อนกันจำนวนมาก แผง Layers จะแสดงโครงสร้างทั้งหมดเป็นรายการ จากที่นั่นคุณสามารถ:
- เลือกองค์ประกอบ
- เปลี่ยนชื่อเพื่อให้ระบุได้ง่ายขึ้น
- ย้ายขึ้นหรือลง
- ลากไปยังตำแหน่งอื่น
- ล็อกหรือปลดล็อก
- ทำซ้ำ
- ลบ
การล็อกมีประโยชน์เมื่อไม่ควรให้พื้นหลัง รูปภาพ หรือส่วนที่เสร็จแล้วถูกย้ายโดยไม่ตั้งใจ ปลดล็อกเลเยอร์เมื่อต้องการแก้ไขหรือจัดตำแหน่งใหม่อีกครั้ง
ใช้ “Undo” และ “Redo” ในแถบเครื่องมือของเครื่องมือสร้างเพื่อย้อนกลับหรือไปข้างหน้าผ่านการเปลี่ยนแปลงดีไซน์ล่าสุด
การแก้ไขข้อความ
คลิกภายในองค์ประกอบข้อความเพื่อแก้ไขเนื้อหาโดยตรงบนแคนวาส แถบเครื่องมือข้อความมีสไตล์ย่อหน้าและหัวเรื่อง พร้อมตัวเลือกการจัดรูปแบบทั่วไป
คุณสามารถใช้ตัวหนา ตัวเอียง ขีดเส้นใต้ ขีดฆ่า ตัวห้อย ตัวยก การจัดแนว รายการแบบจุดนำหน้าหรือมีหมายเลข ลิงก์ และอีโมจิได้ ทั้งนี้ขึ้นอยู่กับข้อความที่เลือก การตั้งค่าข้อความที่เลือกยังช่วยให้คุณปรับรูปแบบตัวอักษรและสีได้โดยไม่เปลี่ยนองค์ประกอบข้อความอื่น ๆ
ใช้การตั้งค่ารูปแบบตัวอักษรส่วนกลางภายใต้ “Page settings” เมื่อหัวเรื่องทั้งหมด ข้อความเนื้อหา ลิงก์ หรือปุ่มควรใช้สไตล์เดียวกัน ใช้การตั้งค่าขององค์ประกอบที่เลือกเมื่อมีเพียงบล็อกเดียวที่ควรมีรูปลักษณ์แตกต่างออกไป
การกำหนดค่าแบบฟอร์มสมัครสมาชิก
เลือกบล็อก signup form บนแคนวาสเพื่อเปิดการตั้งค่า ส่วนที่มีให้ใช้งานครอบคลุมแถบความคืบหน้า ตัวนับผู้สมัครสมาชิก ฟิลด์ แท็กที่ซ่อนอยู่ คอนเทนเนอร์แบบฟอร์ม ฟิลด์อินพุต และปุ่มส่ง
ฟิลด์ผู้สมัครสมาชิก
ที่อยู่อีเมลคือฟิลด์หลักของแบบฟอร์มสมัครสมาชิก คุณยังสามารถเพิ่มฟิลด์ผู้สมัครสมาชิกที่มีอยู่ในบัญชี Maildroppa ของคุณได้
สำหรับแต่ละฟิลด์ คุณสามารถเปลี่ยนป้ายกำกับและข้อความตัวอย่าง กำหนดว่าจำเป็นต้องกรอกหรือไม่ และเลือกว่าจะแสดงป้ายกำกับฟิลด์หรือไม่ สามารถจัดลำดับฟิลด์ใหม่ได้ด้วยการลากหรือใช้ปุ่มควบคุมการย้าย
ขอเฉพาะข้อมูลที่คุณต้องการจริง ๆ แบบฟอร์มที่สั้นกว่าจะกรอกได้เร็วกว่า ขณะที่ฟิลด์เพิ่มเติมมีประโยชน์เมื่อข้อมูลดังกล่าวจะนำไปใช้ในการแบ่งกลุ่มหรือปรับให้เหมาะกับแต่ละบุคคล
แท็กที่ซ่อนอยู่
แท็กที่ซ่อนอยู่จะไม่แสดงต่อผู้เข้าชม เมื่อมีผู้สมัครผ่านแบบฟอร์ม Maildroppa จะกำหนดแท็กที่เลือกให้ผู้สมัครสมาชิกคนนั้นโดยอัตโนมัติ
ฟังก์ชันนี้มีประโยชน์สำหรับระบุแหล่งที่มาหรือความสนใจเบื้องหลังการสมัคร ตัวอย่างเช่น แบบฟอร์มสำหรับเว็บบินาร์สามารถใช้แท็ก “Webinar” ขณะที่แบบฟอร์ม Lead Magnet สามารถใช้แท็กตามหัวข้อที่ดาวน์โหลดได้
แถบความคืบหน้า
คุณสามารถปิดใช้งานแถบความคืบหน้า หรือแสดงเป็นเปอร์เซ็นต์หรือตัวบ่งชี้แบบสองขั้นตอนได้
สำหรับตัวบ่งชี้เปอร์เซ็นต์ คุณสามารถเปลี่ยนข้อความ สี ขนาดตัวอักษร น้ำหนักตัวอักษร และการจัดแนวได้ สำหรับตัวบ่งชี้แบบสองขั้น คุณสามารถแก้ไขป้ายกำกับของทั้งสองขั้น และเลือกสีสำหรับสถานะใช้งานและไม่ใช้งานได้
ตัวบ่งชี้ความคืบหน้าช่วยอธิบายว่าการส่งแบบฟอร์มเป็นขั้นตอนแรก และการยืนยันอีเมล Double Opt-in เป็นขั้นตอนที่สอง
ตัวนับผู้สมัครสมาชิกภายในแบบฟอร์ม
แบบฟอร์มสมัครสมาชิกสามารถแสดงจำนวนผู้สมัครสมาชิกที่ยืนยันแล้วในปัจจุบันก่อนหรือหลังปุ่มส่ง
คุณสามารถเพิ่มค่าออฟเซ็ต เขียนป้ายกำกับ เลือกตำแหน่ง และปรับรูปแบบตัวอักษรกับการจัดแนวได้ ค่าออฟเซ็ตจะถูกบวกเข้ากับจำนวนผู้สมัครสมาชิกที่ยืนยันแล้วซึ่ง Maildroppa แสดง
ตัวนับในแบบฟอร์มนี้แตกต่างจากบล็อกเนื้อหา “Subscriber counter” แบบแยก ใช้การตั้งค่าแบบฟอร์มเมื่อต้องการให้ตัวเลขเชื่อมโยงโดยตรงกับพื้นที่ส่ง ใช้บล็อกเนื้อหาเมื่อต้องการให้ตัวนับปรากฏที่อื่นในดีไซน์
ดีไซน์แบบฟอร์ม ฟิลด์อินพุต และปุ่ม
การตั้งค่า “Signup Form Block” ควบคุมคอนเทนเนอร์รอบฟิลด์ รวมถึงพื้นหลัง เส้นขอบ รัศมีมุม และระยะห่าง
การตั้งค่าอินพุตควบคุมพื้นหลังฟิลด์ ป้ายกำกับ ข้อความ ข้อความตัวอย่าง เส้นขอบ และระยะห่าง ปุ่มส่งมีการตั้งค่าแยกสำหรับข้อความ รูปแบบตัวอักษร สี เส้นขอบ ขนาด และการจัดแนว
คุณสามารถคลิกแถบความคืบหน้าหรือปุ่มส่งโดยตรงบนแคนวาสเพื่อเปิดการตั้งค่าของส่วนนั้นได้ทันที
การเปลี่ยนรูปลักษณ์โดยรวม
เปิด “Page settings” ในแถบด้านขวาเพื่อเปลี่ยนดีไซน์โดยรวม สำหรับ Embedded Forms, Popups และ Slide-ins การตั้งค่าเหล่านี้จะใช้กับแคนวาสของแบบฟอร์ม ไม่ใช่หน้าโฮสต์ที่สมบูรณ์
คุณสามารถกำหนดค่าพื้นหลังหลัก รูปภาพพื้นหลัง ความกว้างสูงสุด และระยะห่างบนมือถือ การตั้งค่ารูปลักษณ์จะกำหนดค่าเริ่มต้นสำหรับ:
- ฟอนต์เนื้อหาและสีข้อความ
- สีลิงก์ การขีดเส้นใต้ และสีเมื่อวางเมาส์
- ฟอนต์ สี น้ำหนัก ขนาด และความสูงบรรทัดของหัวเรื่อง
- ปุ่ม
- กล่อง เส้นขอบ รัศมีมุม ช่องว่าง และระยะห่างด้านใน
- ระยะห่างขอบหน้าบนมือถือ และจุดที่คอลัมน์จะเรียงซ้อนกัน
ค่าเริ่มต้นเหล่านี้ช่วยให้ดีไซน์มีความสอดคล้องกัน แต่แต่ละบล็อกยังสามารถกำหนดค่าแทนที่ได้เมื่อจำเป็น
การเชื่อมต่อกระบวนการสมัครสมาชิก
แบบฟอร์มทุกแบบเชื่อมต่อกับ Signup Flow Signup flow จะควบคุมเส้นทางของผู้สมัครสมาชิกหลังจากส่งแบบฟอร์ม:
- สิ่งที่ผู้เข้าชมเห็นทันทีหลังส่งแบบฟอร์ม
- อีเมล Double Opt-in ที่ส่ง
- สิ่งที่จะเกิดขึ้นหลังจากผู้สมัครสมาชิกยืนยันที่อยู่อีเมล
เปิดการควบคุม signup flow ในส่วนหัวของเครื่องมือสร้างเพื่อดู flow ที่กำหนดอยู่ในปัจจุบัน คุณสามารถเลือก flow ที่มีอยู่แล้ว แก้ไข flow ที่เลือก หรือสร้าง flow ใหม่ได้
Signup flow หนึ่งรายการสามารถใช้กับหลายแบบฟอร์มได้ หากคุณแก้ไข flow ที่ใช้ร่วมกัน การเปลี่ยนแปลงจะมีผลกับทุกแบบฟอร์มที่ใช้ flow นั้น ดังนั้น Maildroppa จึงให้คุณเลือกได้ว่าจะ แก้ไข flow ที่ใช้ร่วมกัน หรือสร้างสำเนาแยกสำหรับแบบฟอร์มปัจจุบัน
การดูตัวอย่างและการบันทึก
คลิก “Preview” เพื่อตรวจสอบดีไซน์และประสบการณ์การสมัครสมาชิกทั้งหมดก่อนเผยแพร่สู่สาธารณะ การดูตัวอย่างมีประโยชน์สำหรับตรวจสอบข้อความยาว สัดส่วนรูปภาพ ลำดับฟิลด์ ป้ายกำกับปุ่ม และความสมดุลโดยรวมของแบบฟอร์ม
สำหรับ Embedded Forms, Popups และ Slide-ins ให้คลิก “Save changes” เมื่อพร้อมบันทึกเวอร์ชันปัจจุบัน
Landing Pages ใช้การควบคุมฉบับร่างและการเผยแพร่ในแถบด้านบน คุณสามารถบันทึกได้โดยไม่เผยแพร่ และการเปลี่ยนแปลงของหน้าที่เผยแพร่แล้วจะยังไม่เผยแพร่จนกว่าคุณจะเผยแพร่ การทำงานทั้งหมดอธิบายไว้ใน Building and Publishing a Landing Page
หลังจากบันทึกแล้ว ให้กลับไปที่ Signup Forms Overview เพื่อเปิดใช้งานและฝังแบบฟอร์มเว็บไซต์ หรือจัดการ Landing Page ที่เผยแพร่แล้ว
ดำเนินการต่อด้วยแบบฟอร์มประเภทของคุณ
งานออกแบบทั่วไปเสร็จสมบูรณ์แล้ว ดำเนินการต่อด้วยคู่มือสำหรับแบบฟอร์มที่คุณกำลังสร้าง:
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.