Kako dodati prilagođeni HTML sadržaj u WordPress obrasce

Obrasci nisu samo polja za unos. Ponekad trebate nešto objasniti, podijeliti odjeljke, prikazati sliku ili dodati kontekst između pitanja. Prilagođeni HTML sadržaj transformira statičke obrasce u vođena iskustva. Evo kako dodati bogat sadržaj svojim WordPress obrascima.

Šta je HTML blok?

definicija

HTML blok je poseban element obrasca koji prikazuje sadržaj bez prikupljanja unosa. On renderira HTML između polja obrasca, omogućavajući vam dodavanje teksta, slika, videozapisa, razdjelnika i još mnogo toga.

HTML blok u odnosu na regularna polja

Zašto koristiti HTML blokove?

1. Upute i smjernice

Pomozite korisnicima da shvate šta da rade:

• Objasnite složena pitanja
• Navedite kontekst
• Zahtjevi za listu
• Vodič kroz odjeljke

2. Vizuelna organizacija

Razdvajanje dugih formi:

• Naslovi odjeljaka
• Horizontalne pregrade
• Vizualni separatori
• Grupirani sadržaj

3. Bogati mediji

Dodajte vizualne elemente:

• Slike i ikone
• Ugrađeni video zapisi
• Infografike
• Dijagrami

4. Pravo i usklađenost

Prikaz važnih informacija:

• Tekst uslova i odredbi
• Obavještenja o privatnosti
• Odricanje
• Obavezna otkrivanja

5. Brendiranje

Ojačajte svoj brend:

• Logos
• Boje brenda
• Prilagođeno stiliziranje
• Dosledan izgled

Dodavanje HTML bloka

Korak 1: Dodajte polje

1. Otvorite svoj obrazac u A.F.B.
2. pronaći HTML blok na listi polja
3. Prevucite ga na željenu poziciju u vašem obrascu

Korak 2: Dodajte svoj sadržaj

1. Kliknite na HTML blok da biste ga odabrali
2. Otvori ploču s postavkama
3. Unesite svoj HTML sadržaj
4. Pregled za provjeru izgleda

Korak 3: Pozicija i stil

1. Prevucite da biste promijenili redoslijed ako je potrebno
2. Dodajte inline stilove ili klase
3. Testiranje na frontendu

Uobičajena upotreba HTML blokova

1. Naslovi odjeljaka

Lični podaci Molimo Vas da u nastavku navedete Vaše kontakt podatke.

Rezultat:

Lična informacija
Molimo navedite svoje kontakt podatke u nastavku.

2. Horizontalni razdjelnik

Rezultat: Čista linija koja odvaja dijelove.

3. Kutija s uputama

 Važno: Molimo vas da pripremite broj narudžbe prije nego što nastavite.

4. Upute s tačkama

Prije slanja, molimo Vas da se uvjerite: Sva obavezna polja su popunjena Vaša adresa e-pošte je tačna Pregledali ste uslove u nastavku

5. Slika

6. Ugrađeni video

7. Okvir za upozorenje/obavještenje

 ⚠️ Upozorenje: Prijave se ne mogu uređivati ​​nakon slanja.

8. Uspjeh/Info okvir

 ✓ Vaš napredak se automatski sprema.

9. Obavijest o privatnosti

Vaši podaci su zaštićeni našom Politikom privatnosti . Nikada nećemo dijeliti vaše podatke s trećim stranama.

10. Sažetak uslova i odredbi

 Uslovi korištenja usluge Slanjem ovog obrasca, slažete se sa...

Primjeri izgleda obrasca

Višedijelni obrazac

[HTML blok: Odjeljak 1 - Zaglavlje za lične podatke] Polje za ime Polje za e-poštu Polje za telefon [HTML blok: Razdjelnik] [HTML blok: Odjeljak 2 - Zaglavlje za detalje projekta] Padajući meni za vrstu projekta Opis tekstualno polje Polje za budžet [HTML blok: Razdjelnik] [HTML blok: Odjeljak 3 - Zaglavlje za završne korake] Polje za potvrdu Uslovi otpremanja datoteke Dugme za slanje

Obrazac za instrukcije

[HTML blok: Poruka dobrodošlice i upute] [HTML blok: Indikator koraka 1] Pitanje 1 Pitanje 2 [HTML blok: Indikator koraka 2] Pitanje 3 Pitanje 4 [HTML blok: Podsjetnik za pregled] Dugme za slanje

Obrazac za prijavu

[HTML blok: Logo kompanije] [HTML blok: Naziv i opis pozicije] Polje za ime Polje za e-poštu [HTML blok: Upute za "Otpremite svoj životopis" sa zahtjevima za format] Polje za otpremanje datoteke [HTML blok: Izjava o jednakim mogućnostima] Dugme za slanje

Stiliziranje HTML blokova

Inline Styles

Dodajte stilove direktno elementima:

Vaš stilizovani sadržaj ovdje.

Uobičajena svojstva stila

Pozadina: background: #f5f5f5; Padding: padding: 15px; Margina: margin: 20px 0; Border: border: 1px solid #ddd; Radijus obruba: border-radius: 5px; Veličina fonta: font-size: 14px; Boja: color: #333; Poravnanje teksta: text-align: center;

Kreiranje stiliziranih okvira

Info okvir (plavi):

 ℹ️ Informativna poruka ovdje

Kutija uspjeha (zelena):

 ✓ Ovdje poruka o uspjehu

Okvir za upozorenje (žuti):

 ⚠️ Poruka upozorenja ovdje

Okvir za grešku (crveni):

 ✕ Greška ili važno upozorenje ovdje

Savjeti za responzivni dizajn

Slike

Uvijek koristite maksimalnu širinu za responzivne slike:

video

Koristite responzivni omotač za ugrađene videozapise:

Čitljivost teksta

• Koristite relativne veličine fonta (em, rem)
• Održavajte dužinu linija čitljivom
• Adekvatna podloga na mobilnim uređajima

najbolje prakse

1. Neka bude sažeto

• Kratak, pregledan tekst
• Nabrajanje iznad paragrafa
• Samo bitne informacije

2. Vizuelna hijerarhija

• Jasni naslovi
• Dosljedan stil
• Logičan tok

3. Pristupačnost

• Alternativni tekst za slike
• Dovoljan kontrast boja
• Semantički HTML (h2, h3, p, ul)
• Ne oslanjajte se samo na boju za značenje

4. Ne pretjerujte

• Previše sadržaja preopterećuje
• Uravnotežite sadržaj s poljima za unos
• Svrha svakog HTML bloka

5. Temeljito testirajte

• Pregled na računaru i mobilnom uređaju
• Provjerite rad svih linkova
• Provjerite učitavanje slika
• Testirajte u različitim preglednicima

Ideje za napredne HTML blokove

Pokazatelj napretka

1  2  3 Korak 2 od 3: Detalji projekta

Raspored s dvije kolone

Opcija A Opis opcije A... Opcija B Opis opcije B...

Sklopivi dio (Detalji/Sažetak)

Kliknite da pročitate pune uslove Cijeli tekst uslova i odredbi ovdje...

Lista ikona

✓ Besplatna dostava za narudžbe preko 50 USD ✓ 30-dnevna garancija povrata novca ✓ Korisnička podrška 24/7

Odbrojavanje/Hitnost

 🔥 Ponuda ograničenog vremena - prijavite se do petka da biste se kvalifikovali!

Sigurnosna razmatranja

Šta je sigurno

• Standardne HTML oznake (p, div, h1-h6, ul, li, itd.)
• Ugrađeni stilovi
• Slike iz pouzdanih izvora
• Ugrađeni videozapisi s glavnih platformi

Šta izbegavati

• JavaScript u HTML blokovima (može biti ogoljen)
• Vanjski skripti
• Nepouzdani iframe izvori
• Elementi forme unutar HTML blokova

Napomena o ograničenjima skripti

Većina alata za izradu obrazaca "dezinficira" HTML kako bi spriječili XSS napade. JavaScript i određene oznake mogu se automatski ukloniti iz sigurnosnih razloga.

Rješavanje problema

HTML se ne prikazuje

• Provjerite sintaktičke greške
• Provjerite jesu li oznake ispravno zatvorene
• Neke oznake mogu biti ograničene

Stiliziranje nije primijenjeno

• Provjerite sintaksu inline stila
• CSS teme može biti prepisan
• Koristite specifičnije stilove ili !važno

Slike se ne prikazuju

• Provjerite je li URL slike ispravan
• Provjerite dozvole za slike
• Koristite puni URL (https://…)

Prekid rasporeda na mobilnim uređajima

• Dodajte maksimalnu širinu: 100% slikama
• Koristite fleksibilne rasporede (flexbox)
• Testiranje na stvarnom mobilnom uređaju

rezime

Dodavanje prilagođenog HTML sadržaja obrascima:

1. Dodaj HTML blok – Prevucite u svoj obrazac
2. Unesite sadržaj – HTML u panelu postavki
3. Pozicionirajte se na odgovarajući način – Između relevantnih polja
4. Stilizirajte po potrebi – Ugrađeni stilovi ili klase
5. Održavajte pristupačnim – Alternativni tekst, kontrast, semantički HTML
6. Testirajte responzivno – Desktop i mobilni uređaji

zaključak

HTML blokovi transformišu obrasce iz jednostavnih upitnika u vođena iskustva. Dodajte kontekst tamo gdje je korisnicima potreban, organizirajte duge obrasce u logične odjeljke i uključite bogate medije kako biste ih angažovali i informirali. Bilo da se radi o naslovu odjeljka, okviru s uputama ili ugrađenom videu, prilagođeni HTML sadržaj čini vaše obrasce efikasnijim i jednostavnijim za korištenje.

Automatski kreator obrazaca uključuje tip polja HTML blok, što vam omogućava da dodate bilo koji HTML sadržaj između polja obrasca. Kreirajte profesionalne, informativne obrasce koji vode korisnike kroz proces slanja.

Spremni da poboljšate svoje forme? Preuzmite Auto Form Builder i počnite dodavati prilagođeni sadržaj već danas.