Kuidas lisada kohandatud HTML-sisu WordPressi vormidesse

Vormid ei ole lihtsalt sisestusväljad. Mõnikord on vaja midagi selgitada, sektsioone jagada, pilti kuvada või küsimuste vahele konteksti lisada. Kohandatud HTML-sisu muudab staatilised vormid juhendatud kogemusteks. Siit saate teada, kuidas oma WordPressi vormidele rikkalikku sisu lisada.

Mis on HTML-plokk?

Määratlus

HTML-plokk on spetsiaalne vormielement, mis kuvab sisu sisendit kogumata. See renderdab HTML-i teie vormiväljade vahel, võimaldades teil lisada teksti, pilte, videoid, eraldajaid ja muud.

HTML-plokk vs tavalised väljad

Miks kasutada HTML-plokke?

1. Juhised ja juhised

Aidake kasutajatel mõista, mida teha:

• Selgitage keerulisi küsimusi
• Pakkuge konteksti
• Loendi nõuded
• Juhend läbi osade

2. Visuaalne korraldus

Jaota pikad vormid:

• Sektsioonide pealkirjad
• Horisontaalsed vaheseinad
• Visuaalsed eraldajad
• Rühmitatud sisu

3. Rikasmeedia

Lisage visuaalseid elemente:

• Pildid ja ikoonid
• Manustatud videod
• teabegraafika
• Diagrammid

4. Õiguslik ja vastavus

Olulise teabe kuvamine:

• Tingimuste tekst
• Privaatsusteated
• Hoiatused
• Nõutavad avalikustamised

5 Branding

Tugevdage oma brändi:

• Logos
• Brändi värvid
• Kohandatud stiil
• Ühtlane välimus

HTML-ploki lisamine

1. samm: lisage väli

1. Ava oma vorm rakenduses A.F.B.
2. leidma HTML Block väljaloendis
3. Lohistage see vormil soovitud kohta

2. samm: lisage oma sisu

1. HTML-ploki valimiseks klõpsake sellel
2. Ava seadete paneel
3. Sisestage oma HTML-sisu
4. Eelvaade välimuse kontrollimiseks

3. samm: positsioon ja stiil

1. Vajadusel lohista ümberjärjestamiseks
2. Lisa tekstisiseseid stiile või klasse
3. Test esiotsas

HTML-plokkide tavalised kasutusviisid

1. Jaotiste pealkirjad

Isiklik teave Palun sisestage allpool oma kontaktandmed.

Tulemus:

Isiklik info
Esitage allpool oma kontaktandmed.

2. Horisontaalne jagaja

Tulemus: Puhas joon, mis eraldab sektsioone.

3. Juhendkarp

 Tähtis: Enne jätkamist hoidke oma tellimuse number käepärast.

4. Täpploendiga juhised

Enne esitamist palun veenduge, et: Kõik kohustuslikud väljad on täidetud Teie e-posti aadress on õige Olete allolevaid tingimusi üle vaadanud

5. Pilt

6. Sisseehitatud video

7. Hoiatus-/häirekast

 ⚠️ Hoiatus: Esildisi ei saa pärast saatmist muuta.

8. Edu/infokast

 ✓ Teie edusammud salvestatakse automaatselt.

9. Privaatsusteatis

Teie teavet kaitseb meie privaatsuspoliitika . Me ei jaga teie andmeid kunagi kolmandate osapooltega.

10. Tingimuste kokkuvõte

 Teenusetingimused Selle vormi esitamisega nõustute...

Vormi paigutuse näited

Mitmeosaline vorm

[HTML-plokk: 1. jagu – isikuandmete pealkiri] Nime väli E-posti väli Telefoni väli [HTML-plokk: jagaja] [HTML-plokk: 2. jagu – projekti üksikasjade pealkiri] Projekti tüübi rippmenüü Kirjelduse tekstiala Eelarve väli [HTML-plokk: jagaja] [HTML-plokk: 3. jagu – viimaste sammude pealkiri] Faili üleslaadimise tingimuste märkeruut Nupp Esita

Õppevorm

[HTML-plokk: tervitussõnum ja juhised] [HTML-plokk: 1. sammu indikaator] Küsimus 1 Küsimus 2 [HTML-plokk: 2. sammu indikaator] Küsimus 3 Küsimus 4 [HTML-plokk: arvustuse meeldetuletus] Esita nupp

Taotlusvormi

[HTML-plokk: Ettevõtte logo] [HTML-plokk: Ametikoha nimetus ja kirjeldus] Nime väli E-posti väli [HTML-plokk: Juhised "Laadige üles oma CV" koos vormingunõuetega] Faili üleslaadimise väli [HTML-plokk: Võrdsete võimaluste avaldus] Esita nupp

HTML-plokkide kujundamine

Tekstisisesed stiilid

Lisa stiilid otse elementidele:

Sinu stiilitud sisu siin.

Ühised stiili omadused

Taust: background: #f5f5f5; Täidis: padding: 15px; Veeris: margin: 20px 0; Ääre: border: 1px solid #ddd; Äärise raadius: border-radius: 5px; Fondi suurus: font-size: 14px; Värv: color: #333; Teksti joondamine: text-align: center;

Stiilsete kastide loomine

Infokast (sinine):

 ℹ️ Infosõnum siin

Edukast (roheline):

 ✓ Edukuse teade siin

Hoiatuskast (kollane):

 ⚠️ Hoiatussõnum siin

Veakast (punane):

 ✕ Siin on viga või oluline hoiatus

Kohanduva disaini näpunäited

images

Responsiivsete piltide puhul kasutage alati maksimaalset laiust:

Videod

Kasutage manustatud videote jaoks reageerivat ümbrist:

Teksti loetavus

• Kasutage suhtelisi kirjasuurusi (em, rem)
• Hoidke ridade pikkused loetavad
• Piisav täitematerjal mobiilis

Best Practices

1. Hoidke see kokkuvõtlikult

• Lühike, skannitav tekst
• Täpploendid lõikude kohal
• Ainult oluline teave

2. Visuaalne hierarhia

• Selged pealkirjad
• Järjepidev stiil
• Loogiline voog

3. Juurdepääsetavus

• Piltide alternatiivtekst
• Piisav värvikontrast
• Semantiline HTML (h2, h3, p, ul)
• Ära toetu tähenduse saamiseks ainult värvile

4. Ära liialda

• Liiga palju sisu koormab üle
• Tasakaalusta sisu sisestusväljadega
• Iga HTML-ploki eesmärk

5. Testige põhjalikult

• Eelvaade lauaarvutis ja mobiilseadmes
• Kontrollige, kas kõik lingid toimivad
• Kontrollige piltide laadimist
• Testi erinevates brauserites

Täiustatud HTML-plokkide ideed

Progressi näitaja

1  2  3 2. samm 3-st: projekti üksikasjad

Kahe veeruga paigutus

Variant A Valiku A kirjeldus... Variant B Variandi B kirjeldus...

Kokkupandav osa (Üksikasjad/Kokkuvõte)

Täielike tingimuste lugemiseks klõpsake Täielikud tingimused siin...

Ikoonide loend

✓ Tasuta saatmine tellimustele üle 50 dollari ✓ 30-päevane raha tagasi garantii ✓ Klienditugi ööpäevaringselt

Loendus/Kiireloomulisus

 🔥 Ajutine pakkumine – esita kampaania hiljemalt reedeks, et osaleda!

Turvalisuse kaalutlused

Mis on ohutu

• Standardsed HTML-sildid (p, div, h1-h6, ul, li jne)
• Tekstisisesed stiilid
• Pildid usaldusväärsetest allikatest
• Manustatud videod suurematelt platvormidelt

Mida vältida

• JavaScript HTML-plokkides (võib olla eemaldatud)
• Välised skriptid
• Ebausaldusväärsed iframe'i allikad
• Vormielemendid HTML-plokkides

Märkus skriptipiirangute kohta

Enamik vormide koostajaid puhastab HTML-i, et vältida XSS-rünnakuid. JavaScript ja teatud sildid võidakse turvalisuse huvides automaatselt eemaldada.

Probleemid

HTML ei renderdu

• Süntaksivigade kontrollimine
• Veenduge, et sildid on korralikult suletud
• Mõned sildid võivad olla piiratud

Stiili pole rakendatud

• Kontrollige tekstisisest stiili süntaksit
• Teema CSS võib tühistada
• Kasutage täpsemaid stiile või !important

Pilte ei kuvata

• Kontrollige pildi URL-i õigsust
• Kontrollige pildi õigusi
• Kasutage täielikku URL-i (https://…)

Paigutuse rikkumine mobiilis

• Lisa piltidele maksimaalne laius: 100%
• Kasutage paindlikke paigutusi (flexbox)
• Testi päris mobiilseadmes

kokkuvõte

Kohandatud HTML-sisu lisamine vormidele:

1. Lisa HTML-plokk – Lohistage oma vormile
2. Sisestage sisu – HTML seadete paneelil
3. Positsioneeri sobivalt – Asjakohaste väljade vahel
4. Stiili vastavalt vajadusele – Tekstisisesed stiilid või klassid
5. Hoidke ligipääsetavana – Alt-tekst, kontrast, semantiline HTML
6. Testi reageerivalt – Lauaarvuti ja mobiilseadmed

Järeldus

HTML-plokid muudavad vormid lihtsatest küsimustikest juhendatud kogemusteks. Lisage konteksti sinna, kus kasutajad seda vajavad, korraldage pikad vormid loogilisteks osadeks ja lisage kaasahaaravaks ja informatiivseks sisuks rikkalikku meediat. Olgu selleks siis jaotise pealkiri, juhiste kast või manustatud video – kohandatud HTML-sisu muudab teie vormid tõhusamaks ja kasutajasõbralikumaks.

Automaatne vormide koostaja sisaldab HTML-ploki väljatüüpi, mis võimaldab teil vormiväljade vahele lisada mis tahes HTML-sisu. Looge professionaalseid ja informatiivseid vorme, mis juhendavad kasutajaid esitamisprotsessis.

Kas olete valmis oma vorme täiustama? Laadige alla automaatne vormide koostaja ja hakake juba täna kohandatud sisu lisama.