วิธีเพิ่มเนื้อหา HTML แบบกำหนดเองในแบบฟอร์ม WordPress

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

HTML Block คืออะไร?

คำนิยาม

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

บล็อก HTML เทียบกับฟิลด์ปกติ

เหตุใดจึงต้องใช้บล็อก HTML?

1. คำแนะนำและแนวทางปฏิบัติ

ช่วยให้ผู้ใช้เข้าใจวิธีการใช้งาน:

• อธิบายคำถามที่ซับซ้อน
• ให้บริบท
• ระบุข้อกำหนด
• คำแนะนำสำหรับแต่ละส่วน

2. การจัดระเบียบด้วยภาพ

แบ่งประโยคยาวๆ ออกเป็นส่วนๆ:

• ส่วนหัวของส่วน
• ตัวแบ่งแนวนอน
• ตัวคั่นภาพ
• เนื้อหาที่จัดกลุ่ม

3. สื่อมัลติมีเดีย

เพิ่มองค์ประกอบภาพ:

• รูปภาพและไอคอน
• วิดีโอแบบฝัง
• infographics
• ไดอะแกรม

4. กฎหมายและการปฏิบัติตาม

แสดงข้อมูลสำคัญ:

• ข้อความข้อกำหนดและเงื่อนไข
• ประกาศเกี่ยวกับความเป็นส่วนตัว
• ข้อปฏิเสธความรับผิดชอบ
• การเปิดเผยข้อมูลที่จำเป็น

5. การสร้างแบรนด์

เสริมสร้างแบรนด์ของคุณให้แข็งแกร่งยิ่งขึ้น:

• โลโก้
• สีของแบรนด์
• สไตล์ที่กำหนดเอง
• รูปลักษณ์ที่สม่ำเสมอ

การเพิ่มบล็อก HTML

ขั้นตอนที่ 1: เพิ่มฟิลด์

1. เปิดแบบฟอร์มของคุณใน เอเอฟบี
2. หา บล็อก HTML ในรายการฟิลด์
3. ลากไปวางในตำแหน่งที่ต้องการในแบบฟอร์มของคุณ

ขั้นตอนที่ 2: เพิ่มเนื้อหาของคุณ

1. คลิกที่บล็อก HTML เพื่อเลือก
2. เปิดแผงการตั้งค่า
3. ป้อนเนื้อหา HTML ของคุณ
4. ดูตัวอย่างเพื่อตรวจสอบลักษณะที่ปรากฏ

ขั้นตอนที่ 3: การจัดวางและสไตล์

1. ลากเพื่อจัดเรียงลำดับใหม่หากจำเป็น
2. เพิ่มสไตล์หรือคลาสแบบอินไลน์
3. ทดสอบบนฝั่ง frontend

การใช้งานบล็อก HTML ทั่วไป

1. หัวข้อส่วนต่างๆ

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

ผลลัพธ์:

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

2. ตัวแบ่งแนวนอน

ผลลัพธ์: เส้นแบ่งที่ชัดเจนคั่นระหว่างส่วนต่างๆ

3. กล่องคำแนะนำ

 สำคัญ: โปรดเตรียมหมายเลขคำสั่งซื้อของคุณให้พร้อมก่อนดำเนินการต่อ

4. คำแนะนำแบบเป็นข้อๆ

ก่อนส่งเอกสาร โปรดตรวจสอบให้แน่ใจว่า: กรอกข้อมูลในช่องที่จำเป็นครบถ้วนแล้ว ที่อยู่อีเมลของคุณถูกต้องแล้ว คุณได้ตรวจสอบข้อกำหนดด้านล่างแล้ว

5. รูปภาพ

6. วิดีโอฝังตัว

7. กล่องคำเตือน/แจ้งเตือน

 ⚠️ คำเตือน: ไม่สามารถแก้ไขข้อความที่ส่งไปแล้วได้

8. กล่องแสดงความสำเร็จ/ข้อมูล

 ✓ ระบบจะบันทึกความคืบหน้าของคุณโดยอัตโนมัติ

9. ประกาศเกี่ยวกับความเป็นส่วนตัว

ข้อมูลของคุณได้รับการคุ้มครองภายใต้ นโยบายความเป็นส่วนตัว ของเรา เราจะไม่เปิดเผยข้อมูลของคุณให้บุคคลที่สามทราบโดยเด็ดขาด

10. สรุปข้อกำหนดและเงื่อนไข

 เงื่อนไขการให้บริการ เมื่อส่งแบบฟอร์มนี้ คุณตกลงที่จะ...

ตัวอย่างเค้าโครงแบบฟอร์ม

แบบฟอร์มหลายส่วน

[บล็อก HTML: ส่วนที่ 1 - หัวข้อข้อมูลส่วนบุคคล] ช่องชื่อ ช่องอีเมล ช่องเบอร์โทรศัพท์ [บล็อก HTML: เส้นแบ่ง] [บล็อก HTML: ส่วนที่ 2 - หัวข้อรายละเอียดโครงการ] เมนูแบบเลื่อนลงประเภทโครงการ ช่องข้อความคำอธิบาย ช่องงบประมาณ [บล็อก HTML: เส้นแบ่ง] [บล็อก HTML: ส่วนที่ 3 - หัวข้อขั้นตอนสุดท้าย] ช่องอัปโหลดไฟล์ ช่องทำเครื่องหมายข้อกำหนด ปุ่มส่ง

แบบฟอร์มคำแนะนำ

[บล็อก HTML: ข้อความต้อนรับและคำแนะนำ] [บล็อก HTML: ตัวบ่งชี้ขั้นตอนที่ 1] คำถามที่ 1 คำถามที่ 2 [บล็อก HTML: ตัวบ่งชี้ขั้นตอนที่ 2] คำถามที่ 3 คำถามที่ 4 [บล็อก HTML: การแจ้งเตือนให้ทบทวน] ปุ่มส่ง

แบบฟอร์มใบสมัคร

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

การจัดรูปแบบบล็อก HTML

สไตล์อินไลน์

เพิ่มสไตล์ให้กับองค์ประกอบโดยตรง:

เนื้อหาที่คุณจัดรูปแบบไว้ตรงนี้

คุณสมบัติสไตล์ทั่วไป

พื้นหลัง: background: #f5f5f5; ระยะห่างภายใน: padding: 15px; ระยะขอบ: margin: 20px 0; ขอบ: border: 1px solid #ddd; รัศมีขอบ: border-radius: 5px; ขนาดตัวอักษร: font-size: 14px; สี: color: #333; การจัดตำแหน่งข้อความ: text-align: center;

การสร้างกล่องที่มีสไตล์

กล่องข้อมูล (สีฟ้า):

 ℹ️ ข้อความแจ้งข้อมูลตรงนี้

กล่องความสำเร็จ (สีเขียว):

 ✓ ข้อความแสดงความสำเร็จ

กล่องเตือน (สีเหลือง):

 ⚠️ ข้อความเตือนอยู่ตรงนี้

กล่องแสดงข้อผิดพลาด (สีแดง):

 ✕ เกิดข้อผิดพลาดหรือข้อความแจ้งเตือนสำคัญตรงนี้

เคล็ดลับการออกแบบที่ตอบสนองต่อทุกอุปกรณ์

ภาพ

ควรใช้ max-width เสมอสำหรับรูปภาพที่ปรับขนาดได้ตามหน้าจอ:

วิดีโอ

ใช้ตัวห่อแบบปรับขนาดได้สำหรับวิดีโอฝังตัว:

ความสามารถในการอ่านข้อความ

• ใช้ขนาดตัวอักษรแบบสัมพัทธ์ (em, rem)
• รักษาระยะห่างระหว่างบรรทัดให้สามารถอ่านได้
• แผ่นรองกันกระแทกที่เพียงพอสำหรับมือถือ

ปฏิบัติที่ดีที่สุด

1. ทำให้มันกระชับ

• ข้อความสั้น กระชับ อ่านง่าย
• การใช้สัญลักษณ์หัวข้อย่อยแทนการใช้ย่อหน้า
• เฉพาะข้อมูลที่จำเป็นเท่านั้น

2. ลำดับชั้นของภาพ

• หัวข้อที่ชัดเจน
• การจัดแต่งทรงที่สม่ำเสมอ
• การไหลแบบลอจิคัล

3 การเข้าถึง

• ข้อความอื่นสำหรับรูปภาพ
• ความแตกต่างของสีที่เพียงพอ
• HTML เชิงความหมาย (h2, h3, p, ul)
• อย่าอาศัยเพียงแค่สีในการตีความความหมาย

4. อย่าหักโหมจนเกินไป

• เนื้อหามากเกินไปทำให้รู้สึกท่วมท้น
• ปรับสมดุลเนื้อหาให้ตรงกับช่องป้อนข้อมูล
• วัตถุประสงค์ของบล็อก HTML แต่ละบล็อก

5. ทดสอบอย่างละเอียด

• ดูตัวอย่างบนเดสก์ท็อปและมือถือ
• ตรวจสอบว่าลิงก์ทั้งหมดใช้งานได้หรือไม่
• ตรวจสอบว่ารูปภาพโหลดเสร็จแล้ว
• ทดสอบในเบราว์เซอร์ต่างๆ

แนวคิดขั้นสูงเกี่ยวกับบล็อก HTML

ตัวบ่งชี้ความคืบหน้า

1  2  3 ขั้นตอนที่ 2 จาก 3: รายละเอียดโครงการ

รูปแบบสองคอลัมน์

ตัวเลือก A คำอธิบายของตัวเลือก A... ตัวเลือก B คำอธิบายของตัวเลือก B...

ส่วนที่พับได้ (รายละเอียด/สรุป)

คลิกเพื่ออ่านข้อกำหนดและเงื่อนไขฉบับเต็ม อ่านข้อกำหนดและเงื่อนไขฉบับเต็มได้ที่นี่...

รายการไอคอน

✓ จัดส่งฟรีเมื่อสั่งซื้อสินค้าครบ 50 ดอลลาร์ขึ้นไป ✓ รับประกันคืนเงินภายใน 30 วัน ✓ บริการลูกค้าตลอด 24 ชั่วโมง 7 วันต่อสัปดาห์

การนับถอยหลัง/ความเร่งด่วน

 🔥 โปรโมชั่นพิเศษมีเวลาจำกัด - ส่งผลงานภายในวันศุกร์เพื่อรับสิทธิ์!

ข้อพิจารณาด้านความปลอดภัย

อะไรปลอดภัย

• แท็ก HTML มาตรฐาน (p, div, h1-h6, ul, li, เป็นต้น)
• สไตล์อินไลน์
• ภาพจากแหล่งที่เชื่อถือได้
• วิดีโอฝังตัวจากแพลตฟอร์มหลักๆ

สิ่งที่ควรหลีกเลี่ยง

• JavaScript ในบล็อก HTML (อาจถูกลบออก)
• สคริปต์ภายนอก
• แหล่งที่มาของ iframe ที่ไม่น่าเชื่อถือ
• องค์ประกอบแบบฟอร์มภายในบล็อก HTML

หมายเหตุเกี่ยวกับข้อจำกัดของสคริปต์

โปรแกรมสร้างแบบฟอร์มส่วนใหญ่จะตรวจสอบและกรอง HTML เพื่อป้องกันการโจมตี XSS JavaScript และแท็กบางอย่างอาจถูกลบออกโดยอัตโนมัติเพื่อความปลอดภัย

การแก้ไขปัญหา

ไม่แสดงผล HTML

• ตรวจสอบข้อผิดพลาดทางไวยากรณ์
• ตรวจสอบให้แน่ใจว่าปิดป้ายเรียบร้อยแล้ว
• แท็กบางแท็กอาจมีข้อจำกัด

ไม่ได้จัดแต่งทรงผม

• ตรวจสอบไวยากรณ์สไตล์อินไลน์
• CSS ของธีมอาจเขียนทับได้
• ใช้รูปแบบที่เฉพาะเจาะจงมากขึ้น หรือใช้ !important

รูปภาพไม่แสดง

• ตรวจสอบว่า URL ของรูปภาพถูกต้องหรือไม่
• ตรวจสอบสิทธิ์การเข้าถึงรูปภาพ
• ใช้ URL แบบเต็ม (https://…)

การจัดวางเลย์เอาต์บนมือถือ

• เพิ่ม max-width: 100% ให้กับรูปภาพ
• ใช้เลย์เอาต์ที่ยืดหยุ่น (flexbox)
• ทดสอบบนอุปกรณ์มือถือจริง

สรุป

การเพิ่มเนื้อหา HTML แบบกำหนดเองลงในแบบฟอร์ม:

1. เพิ่มบล็อก HTML – ลากไปที่แบบฟอร์มของคุณ
2. ป้อนเนื้อหา – HTML ในแผงการตั้งค่า
3. ตำแหน่งที่เหมาะสม – ระหว่างสาขาที่เกี่ยวข้อง
4. จัดแต่งทรงตามต้องการ – สไตล์หรือคลาสแบบอินไลน์
5. เก็บไว้ในที่ที่เข้าถึงได้ง่าย – ข้อความแสดงแทนรูปภาพ (Alt text), ความแตกต่างของสี, HTML เชิงความหมาย
6. ทดสอบการตอบสนอง – สำหรับคอมพิวเตอร์ตั้งโต๊ะและมือถือ

สรุป

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

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

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