Kaip pridėti pasirinktinį HTML turinį „WordPress“ formose

Formos nėra tik įvesties laukai. Kartais reikia ką nors paaiškinti, padalinti skyrius, parodyti paveikslėlį arba pridėti kontekstą tarp klausimų. Pasirinktinis HTML turinys statines formas paverčia vedamomis funkcijomis. Štai kaip į savo „WordPress“ formas įtraukti raiškiojo turinio.

Kas yra HTML blokas?

Apibrėžimas

HTML blokas yra specialus formos elementas, kuris rodo turinį nerenkant įvesties. Jis atvaizduoja HTML tarp jūsų formos laukų, leisdamas jums pridėti teksto, vaizdų, vaizdo įrašų, skirtukų ir kt.

HTML blokas ir įprasti laukai

Kodėl verta naudoti HTML blokus?

1. Instrukcijos ir gairės

Padėkite vartotojams suprasti, ką daryti:

• Paaiškinkite sudėtingus klausimus
• Pateikite kontekstą
• Sąrašo reikalavimai
• Vadovas po skyrius

2. Vizualinė organizacija

Suskirstyti ilgas formas:

• Skyrių antraštės
• Horizontalūs skirtukai
• Vizualiniai separatoriai
• Grupuotas turinys

3. Raiškioji medija

Pridėti vaizdinius elementus:

• Vaizdai ir piktogramos
• Įterpti vaizdo įrašai
• infografikos
• Diagramos

4. Teisė ir atitiktis

Rodyti svarbią informaciją:

• Sąlygų ir nuostatų tekstas
• Privatumo pranešimai
• Atsakomybės apribojimas
• Privalomi atskleidimai

5. Prekinis ženklas

Sustiprinkite savo prekės ženklą:

• Logotipai
• Prekės ženklo spalvos
• Individualus stilius
• Nuosekli išvaizda

HTML bloko pridėjimas

1 veiksmas: pridėkite lauką

1. Atidarykite savo formą A.F.B.
2. rasti HTML blokas laukų sąraše
3. Nuvilkite jį į norimą vietą formoje

2 veiksmas: pridėkite savo turinį

1. Spustelėkite HTML bloką, kad jį pasirinktumėte
2. Atidaryti nustatymų skydelį
3. Įveskite savo HTML turinį
4. Peržiūrėti, kad patikrintumėte išvaizdą

3 veiksmas: pozicija ir stilius

1. Jei reikia, vilkite, kad pertvarkytumėte
2. Pridėti įterptuosius stilius arba klases
3. Testavimas priekinėje dalyje

Įprastas HTML blokų naudojimas

1. Skyrių antraštės

Asmeninė informacija Prašome pateikti savo kontaktinę informaciją žemiau.

Rezultatas:

Asmeninė informacija
Toliau nurodykite savo kontaktinius duomenis.

2. Horizontalus daliklis

Rezultatas: Švari linija, skirianti sekcijas.

3. Instrukcijų dėžutė

 Svarbu: prieš tęsdami turėkite paruoštą savo užsakymo numerį.

4. Instrukcijos su ženkleliais

Prieš pateikdami, įsitikinkite, kad: Visi privalomi laukai užpildyti Jūsų el. pašto adresas teisingas Peržiūrėjote toliau pateiktas sąlygas

5. Vaizdas

6. Įterptas vaizdo įrašas

7. Įspėjimo / pavojaus langelis

 ⚠️ Įspėjimas: pateiktų darbų negalima redaguoti po išsiuntimo.

8. Sėkmės / informacijos langelis

 ✓ Jūsų progresas automatiškai išsaugomas.

9. Privatumo pranešimas

Jūsų informacija yra saugoma pagal mūsų privatumo politiką . Mes niekada nebendrinsime jūsų duomenų su trečiosiomis šalimis.

10. Sąlygų ir nuostatų santrauka

 Paslaugų teikimo sąlygos Pateikdami šią formą, jūs sutinkate...

Formos išdėstymo pavyzdžiai

Daugiasluoksnė forma

[HTML blokas: 1 skyrius – Asmeninės informacijos antraštė] Vardo laukas El. pašto laukas Telefono laukas [HTML blokas: Skirtukas] [HTML blokas: 2 skyrius – Projekto informacijos antraštė] Projekto tipo išskleidžiamasis meniu Aprašymo teksto sritis Biudžeto laukas [HTML blokas: Skirtukas] [HTML blokas: 3 skyrius – Paskutiniai veiksmai] Failo įkėlimo žymimasis langelis Sąlygų pateikimo mygtukas

Mokymo forma

[HTML blokas: pasveikinimo pranešimas ir instrukcijos] [HTML blokas: 1 veiksmo indikatorius] 1 klausimas 2 klausimas [HTML blokas: 2 veiksmo indikatorius] 3 klausimas 4 klausimas [HTML blokas: priminimas apie peržiūrą] Mygtukas „Pateikti“

Paraiškos forma

[HTML blokas: Įmonės logotipas] [HTML blokas: Pareigybės pavadinimas ir aprašymas] Vardo laukas El. pašto laukas [HTML blokas: Instrukcija „Įkelkite savo gyvenimo aprašymą“ su formato reikalavimais] Failo įkėlimo laukas [HTML blokas: Lygių galimybių pareiškimas] Mygtukas „Pateikti“

HTML blokų stilizavimas

Įterpti stiliai

Pridėkite stilius tiesiai prie elementų:

Jūsų stilizuotas turinys čia.

Bendros stiliaus savybės

Fonas: background: #f5f5f5; Užpildas: padding: 15px; Parašė: margin: 20px 0; Kraštinė: border: 1px solid #ddd; Kraštinės spindulys: border-radius: 5px; Šrifto dydis: font-size: 14px; Spalva: color: #333; Teksto lygiavimas: text-align: center;

Stilingų dėžučių kūrimas

Informacijos laukelis (mėlynas):

 ℹ️ Informacinis pranešimas čia

Sėkmės dėžutė (žalia):

 ✓ Sėkmės pranešimas čia

Įspėjamasis langelis (geltonas):

 ⚠️ Įspėjamasis pranešimas čia

Klaidos langelis (raudonas):

 ✕ Čia yra klaida arba svarbus įspėjimas

Adaptyvaus dizaino patarimai

Vaizdai

Reaguojantiems vaizdams visada naudokite maksimalų plotį:

Vaizdo įrašai

Įterptiesiems vaizdo įrašams naudokite reaguojantį apvalkalą:

Teksto skaitomumas

• Naudokite santykinius šrifto dydžius (em, rem)
• Užtikrinkite įskaitomą linijų ilgį
• Pakankamas užpildymas mobiliajame telefone

Geriausia praktika

1. Laikykite tai glaustai

• Trumpas, nuskaitomas tekstas
• Ženkleliai virš pastraipų
• Tik esminė informacija

2. Vizualinė hierarchija

• Išvalyti antraštes
• Nuoseklus stilius
• Loginis srautas

3. Prieinamumas

• Pakaitinis tekstas vaizdams
• Pakankamas spalvų kontrastas
• Semantinis HTML (h2, h3, p, ul)
• Nesiremkite vien spalva, kad rastumėte prasmę

4. Nepersistenkite

• Per daug turinio užgožia
• Subalansuoti turinį su įvesties laukais
• Kiekvieno HTML bloko paskirtis

5. Kruopščiai išbandykite

• Peržiūrėti darbalaukyje ir mobiliajame įrenginyje
• Patikrinkite, ar visos nuorodos veikia
• Patikrinkite vaizdų įkėlimą
• Testavimas skirtingose ​​naršyklėse

Išplėstinės HTML blokų idėjos

Pažangos rodiklis

1  2  3 2 veiksmas iš 3: Projekto detalės

Dviejų stulpelių išdėstymas

A variantas A varianto aprašymas... B variantas B varianto aprašymas...

Sulankstoma skiltis (išsami informacija / santrauka)

Spustelėkite, jei norite perskaityti visas sąlygas Visas sąlygų tekstas čia...

Piktogramų sąrašas

✓ Nemokamas pristatymas užsakymams virš 50 USD ✓ 30 dienų pinigų grąžinimo garantija ✓ Klientų aptarnavimas visą parą

Atgalinis skaičiavimas / skubumas

 🔥 Laikinas pasiūlymas – pateikite paraišką iki penktadienio, kad galėtumėte dalyvauti!

Saugumo sumetimai

Kas yra saugu

• Standartinės HTML žymės (p, div, h1-h6, ul, li ir kt.)
• Įterptieji stiliai
• Vaizdai iš patikimų šaltinių
• Įterptieji vaizdo įrašai iš pagrindinių platformų

Ką vengti

• „JavaScript“ HTML blokuose (gali būti pašalintas)
• Išoriniai scenarijai
• Nepatikimi „iframe“ šaltiniai
• Formos elementai HTML blokuose

Pastaba dėl scenarijų apribojimų

Dauguma formų kūrimo priemonių valo HTML, kad būtų išvengta XSS atakų. „JavaScript“ ir tam tikros žymos gali būti automatiškai pašalintos saugumo sumetimais.

Problemų

HTML nerodomas

• Patikrinkite, ar nėra sintaksės klaidų
• Patikrinkite, ar etiketės tinkamai uždarytos
• Kai kurios žymos gali būti ribojamos

Stilius netaikomas

• Patikrinkite įterptąjį stiliaus sintaksę
• Temos CSS gali būti pakeistas
• Naudokite konkretesnius stilius arba !svarbu

Vaizdai nerodomi

• Patikrinkite, ar vaizdo URL teisingas
• Patikrinkite vaizdo leidimus
• Naudokite visą URL (https://…)

Išdėstymo laužymas mobiliajame įrenginyje

• Pridėti paveikslėliams maksimalų plotį: 100 %
• Naudokite lanksčius išdėstymus („flexbox“)
• Testavimas tikrame mobiliajame įrenginyje

Santrauka

Pasirinktinio HTML turinio pridėjimas prie formų:

1. Pridėti HTML bloką – Nuvilkite į savo formą
2. Įveskite turinį – HTML nustatymų skydelyje
3. Tinkamai pozicionuokite – Tarp atitinkamų laukų
4. Stilius pagal poreikį – Įterptiniai stiliai arba klasės
5. Laikyti prieinamą – Alternatyvus tekstas, kontrastas, semantinis HTML
6. Testuokite reaguojant – Staliniai ir mobilieji įrenginiai

Išvada

HTML blokai transformuoja formas iš paprastų klausimynų į valdomas patirtis. Pridėkite kontekstą ten, kur vartotojams to reikia, suskirstykite ilgas formas į logiškus skyrius ir įtraukite raiškiosios medijos elementų, kad įtrauktumėte ir informuotumėte. Nesvarbu, ar tai skyriaus antraštė, instrukcijų laukelis, ar įterptasis vaizdo įrašas, pritaikytas HTML turinys padarys jūsų formas efektyvesnes ir patogesnes naudoti.

Automatinis formų kūrimo įrankis apima HTML bloko lauko tipą, leidžiantį įterpti bet kokį HTML turinį tarp formos laukų. Kurkite profesionalias, informatyvias formas, kurios padės vartotojams pateikti formą.

Pasiruošę patobulinti savo formas? Atsisiųskite automatinį formų kūrimo įrankį ir pradėkite pridėti pasirinktinį turinį jau šiandien.