Cara Menambahkan Konten HTML Kustom pada Formulir WordPress

Formulir bukan hanya sekadar kolom input. Terkadang Anda perlu menjelaskan sesuatu, membagi bagian, menampilkan gambar, atau menambahkan konteks antar pertanyaan. Konten HTML kustom mengubah formulir statis menjadi pengalaman yang terarah. Berikut cara menambahkan konten yang kaya ke formulir WordPress Anda.

Apa itu Blok HTML?

Definisi

Blok HTML adalah elemen formulir khusus yang menampilkan konten tanpa mengumpulkan input. Elemen ini merender HTML di antara kolom formulir Anda, memungkinkan Anda menambahkan teks, gambar, video, pembatas, dan banyak lagi.

Blok HTML vs Bidang Biasa

Mengapa Menggunakan Blok HTML?

1. Instruksi dan Panduan

Bantu pengguna memahami apa yang harus dilakukan:

• Jelaskan pertanyaan-pertanyaan kompleks.
• Berikan konteks
• Daftar persyaratan
• Panduan melalui bagian-bagiannya

2. Organisasi Visual

Pisahkan formulir panjang:

• Judul bagian
• Pembatas horizontal
• Pemisah visual
• Konten yang dikelompokkan

3. Media Kaya

Tambahkan elemen visual:

• Gambar dan ikon
• Video tersemat
• Infografis
• Diagram

4. Hukum dan Kepatuhan

Tampilkan informasi penting:

• Teks syarat dan ketentuan
• Pemberitahuan privasi
• Mohon Perhatian Pembeli:
• Pengungkapan yang diwajibkan

5 Branding

Perkuat merek Anda:

• logo
• Warna merek
• Gaya kustom
• Tampilan yang konsisten

Menambahkan Blok HTML

Langkah 1: Tambahkan Kolom

1. Buka formulir Anda di A.F.B.
2. Menemukan Blok HTML dalam daftar bidang
3. Seret ke posisi yang diinginkan di formulir Anda.

Langkah 2: Tambahkan Konten Anda

1. Klik Blok HTML untuk memilihnya
2. Buka panel pengaturan
3. Masukkan konten HTML Anda
4. Pratinjau untuk memverifikasi tampilan

Langkah 3: Posisi dan Gaya

1. Seret untuk mengubah urutan jika diperlukan
2. Tambahkan gaya atau kelas sebaris
3. Pengujian pada frontend

Penggunaan Umum Blok HTML

1. Judul Bagian

Informasi Pribadi Silakan berikan detail kontak Anda di bawah ini.

Hasil:

Informasi Pribadi
Harap berikan rincian kontak Anda di bawah ini.

2. Pembatas Horizontal

Hasil: Garis yang jelas memisahkan bagian-bagiannya.

3. Kotak Instruksi

 Penting: Harap siapkan nomor pesanan Anda sebelum melanjutkan.

4. Instruksi Berpoin

Sebelum mengirimkan, harap pastikan: Semua kolom yang wajib diisi telah terisi. Alamat email Anda benar. Anda telah meninjau ketentuan di bawah ini.

5. Gambar

6. Video Tertanam

7. Kotak Peringatan/Pemberitahuan

 ⚠️ Peringatan: Kiriman tidak dapat diedit setelah dikirim.

8. Kotak Sukses/Info

 ✓ Kemajuan Anda akan tersimpan secara otomatis.

9. Pemberitahuan Privasi

Informasi Anda dilindungi berdasarkan Kebijakan Privasi kami. Kami tidak akan pernah membagikan data Anda kepada pihak ketiga.

10. Ringkasan Syarat dan Ketentuan

 Ketentuan Layanan Dengan mengirimkan formulir ini, Anda setuju untuk...

Contoh Tata Letak Formulir

Formulir Multi-Bagian

[Blok HTML: Bagian 1 - Judul Info Pribadi] Kolom Nama Kolom Email Kolom Telepon [Blok HTML: Pembatas] [Blok HTML: Bagian 2 - Judul Detail Proyek] Menu tarik-turun Jenis Proyek Area teks Deskripsi Kolom Anggaran [Blok HTML: Pembatas] [Blok HTML: Bagian 3 - Judul Langkah Akhir] Unggah berkas Kotak centang Persyaratan Tombol Kirim

Formulir Instruksional

[Blok HTML: Pesan selamat datang dan instruksi] [Blok HTML: Indikator Langkah 1] Pertanyaan 1 Pertanyaan 2 [Blok HTML: Indikator Langkah 2] Pertanyaan 3 Pertanyaan 4 [Blok HTML: Pengingat ulasan] Tombol Kirim

Formulir Aplikasi

[Blok HTML: Logo perusahaan] [Blok HTML: Judul dan deskripsi posisi] Kolom nama Kolom email [Blok HTML: Instruksi "Unggah resume Anda" dengan persyaratan format] Kolom unggah file [Blok HTML: Pernyataan kesempatan yang sama] Tombol kirim

Menata Gaya Blok HTML

Gaya Segaris

Tambahkan gaya langsung ke elemen:

Konten Anda yang sudah ditata ada di sini.

Properti Gaya Umum

Latar belakang: background: #f5f5f5; Padding: padding: 15px; Margin: margin: 20px 0; Border: border: 1px solid #ddd; Radius border: border-radius: 5px; Ukuran font: font-size: 14px; Warna: color: #333; Perataan teks: text-align: center;

Membuat Kotak Bergaya

Kotak Info (Biru):

 ℹ️ Pesan informasi di sini

Kotak Sukses (Hijau):

 ✓ Pesan sukses di sini

Kotak Peringatan (Kuning):

 ⚠️ Pesan peringatan di sini

Kotak Kesalahan (Merah):

 ✕ Kesalahan atau peringatan penting di sini

Tips Desain Responsif

Foto

Selalu gunakan `max-width` untuk gambar responsif:

Video

Gunakan pembungkus responsif untuk video yang disematkan:

Keterbacaan Teks

• Gunakan ukuran font relatif (em, rem)
• Jaga agar panjang baris tetap mudah dibaca.
• Bantalan yang memadai pada ponsel

Praktik Terbaik

1. Tetap Ringkas

• Teks pendek dan mudah dipindai
• Poin-poin di atas paragraf
• Hanya informasi penting

2. Hirarki Visual

• Judul yang jelas
• Gaya yang konsisten
• Aliran logis

3. Aksesibilitas

• Teks alt untuk gambar
• Kontras warna yang memadai
• HTML Semantik (h2, h3, p, ul)
• Jangan hanya mengandalkan warna untuk memahami makna.

4. Jangan Berlebihan

• Terlalu banyak konten akan membuat kewalahan.
• Seimbangkan konten dengan kolom input.
• Tujuan dari setiap blok HTML

5. Uji Secara Menyeluruh

• Pratinjau di desktop dan perangkat seluler
• Periksa apakah semua tautan berfungsi.
• Verifikasi pemuatan gambar
• Uji coba di berbagai browser

Ide Blok HTML Tingkat Lanjut

Indikator Kemajuan

1  2  3 Langkah 2 dari 3: Detail Proyek

Tata Letak Dua Kolom

Opsi A Deskripsi opsi A... Opsi B Deskripsi opsi B...

Bagian yang Dapat Dilipat (Detail/Ringkasan)

Klik untuk membaca syarat dan ketentuan lengkap. Teks lengkap syarat dan ketentuan ada di sini...

Daftar Ikon

✓ Gratis ongkos kirim untuk pesanan di atas $50 ✓ Garansi uang kembali 30 hari ✓ Dukungan pelanggan 24/7

Hitung Mundur/Urgensi

 🔥 Penawaran Terbatas - Kirimkan sebelum Jumat untuk memenuhi syarat!

Pertimbangan Keamanan

Apa yang Aman

• Tag HTML standar (p, div, h1-h6, ul, li, dll.)
• Gaya sebaris
• Gambar dari sumber tepercaya
• Video tersemat dari platform utama

Apa yang Harus Dihindari

• JavaScript dalam blok HTML (mungkin dihilangkan)
• Skrip eksternal
• Sumber iframe yang tidak tepercaya
• Elemen formulir di dalam blok HTML

Catatan tentang Pembatasan Skrip

Sebagian besar pembuat formulir membersihkan HTML untuk mencegah serangan XSS. JavaScript dan tag tertentu mungkin dihapus secara otomatis untuk alasan keamanan.

Penyelesaian masalah

HTML Tidak Ditampilkan

• Periksa kesalahan sintaksis
• Pastikan tag tertutup dengan benar.
• Beberapa tag mungkin dibatasi.

Penataan Gaya Tidak Diterapkan

• Periksa sintaks gaya sebaris
• CSS tema dapat menimpa
• Gunakan gaya yang lebih spesifik atau !important

Gambar Tidak Muncul

• Pastikan URL gambar sudah benar.
• Periksa izin gambar
• Gunakan URL lengkap (https://…)

Tata Letak yang Terputus di Ponsel

• Tambahkan max-width: 100% ke gambar.
• Gunakan tata letak fleksibel (flexbox)
• Pengujian pada perangkat seluler sebenarnya

Ringkasan

Menambahkan konten HTML kustom ke formulir:

1. Tambahkan Blok HTML – Seret ke formulir Anda
2. Masukkan konten – HTML di panel pengaturan
3. Posisikan dengan tepat – Di antara bidang-bidang yang relevan
4. Sesuaikan gaya sesuai kebutuhan. – Gaya atau kelas sebaris
5. Tetap mudah diakses. – Teks alt, kontras, HTML semantik
6. Uji secara responsif – Desktop dan seluler

Kesimpulan

Blok HTML mengubah formulir dari kuesioner sederhana menjadi pengalaman yang terpandu. Tambahkan konteks di tempat yang dibutuhkan pengguna, atur formulir panjang ke dalam bagian-bagian yang logis, dan sertakan media kaya untuk menarik dan memberi informasi. Baik itu judul bagian, kotak instruksi, atau video yang disematkan, konten HTML kustom membuat formulir Anda lebih efektif dan ramah pengguna.

Pembuat Formulir Otomatis Termasuk tipe bidang Blok HTML, yang memungkinkan Anda menambahkan konten HTML apa pun di antara bidang formulir Anda. Buat formulir profesional dan informatif yang memandu pengguna melalui proses pengiriman.

Siap untuk meningkatkan formulir Anda? Unduh Pembuat Formulir Otomatis dan mulailah menambahkan konten khusus hari ini.