Kako stilizirati Contact formu 7 naučite se uz ovaj kompletan vodič koji vam donosi osnovne postavke i primjere stilizacije Contact forme 7.

Sadržaj
- Uvod
- Osnovne postave
- Dodavanje CSS-a
- Primjeri stilizacije
- Napredne tehnike
- Zaključak
Uvod
Kako stilizirati kontakt formu 7 je pitanje koje mnogi dizajneri postavljaju kada žele poboljšati izgled svojih kontakt formi, posebno na početku karijere.
U osnovi forma dolazi s jednostavnim i funkcionalnim stilom osnovne forme, no njen izgled je jednostavan te mnogi odmah nastoje dodatno je optimizovati kako bi forma dobila stilizaciju u skladu s vizuelnim identitetom web stranice.
Stoga u ovom vodiču ćemo proći kroz korake potrebne za stilizaciju Contact Form 7, popularnog WordPress dodatka za kreiranje formi.
Osnovne postavke
Prije nego što započnemo sa stilizacijom, važno je osigurati da imate instaliran i aktiviran Contact Form 7 dodatak na vašem WordPress sajtu.
Kako instalirati te aktivirati Contact Form 7, jedan od najpopularnijih WordPressovih dodataka za kreiranje formi koji ima preko 10 + miliona instalacija možete pročitati na ovom članku.
Također preporučuje se da koristite child temu kako biste izbjegli gubitak prilagođenih stilova prilikom ažuriranja teme.
Kako kreirati child temu možete se upoznati kroz vodič kojim smo pokrili osnove kreiranja child teme.
Više o kontakt formi 7 saznajte putem zvanične dokumentacije dodatka .
Možda vas zanima

Dodavanje CSS-a
Stilizaciju Contact form 7 možete učiniti na tri načina, i to dodavanjem CSS koda u vanjsku datoteku, stiliziranjem kroz WordPressov dodatni Custom CSS ili ako baš niste željni da uređujete putem navedenih načina onda to možete učiniti kroz instaliranje i aktiviranje određenih dodataka koji služe za stilizaciju Kontak forme 7.
Najjednostavniji način za prilagođavanje izgleda Contact forme 7 je putem CSS-a. Prilagođene stilove možete jednostavno dodati u datoteku stila vaše glavne teme ili child temu, kao i putem opcije dodatni css.
Dakako prilagođavanje Kontakt forme 7 ili bilo koje druge form putem CSS-a zahtjeva određeno znanje iz CSS-a, kao i tehničko znanje u smislu primjene i aplikacije koda na određena mjesta.
Primjeri stilizacije
.wpcf7 input[type=”text”]
.wpcf7 input[type=”emajl”]
.wpcf7 textarea {
background-color: #f9f9f9;
border: 1px;
padding: 10px;
width: 100%;
}
S ovim kodom stilizovati ćete formu u svijetlosivu pozadinu, svijetlo sivi obrub i odgovarajuće razmake za tekstualna polja i područja za unos.
Iako je svaki kod pisan s ljubavlju i u najboljoj namjeri, molimo vas da uvijek provjerite kod jer su greške pri kucanju moguće!
Dodavnje klase za specifičnu stilizaciju:
Možda želite stilizirati određena polja unutar forme, to možete učiniti dodavajući specifičnu klasu unutar kratkog koda (schort code-a) contact fom 7
Primjer: Dodavanje klase “custom class” polju za unos imena
HTML
[text* your-name class:custom-class]
Nakon dodavanja klase možete je stilizovati u CSS-u
.custom-class {
background-color: e0f7fa;
border: 1px solid #00796b;
padding: 10px;
}
Napomena: Svi kodovi su pisanji s ljubavlju i u najboljoj namjeri, ali su greške moguće. Stoga preporučujemo da uvijek provjerite kod u svom lokalnom okruženju te da ga prilagodite svojim potrebama. Ovo je samo primjer.
Napredne tehnike
Prilagodba contact form 7 može se za dodatne funkcionalnosti učiniti i putem JavaScript koda u kombinaciji s CSS-om. Možda ćete da poželite uraditi validaciju polja ili dodati dinamički efekt onda to radite uz naprednije tehnike.
Primjer: Promjena boje obruba polja na fokus
document.AddEventListener(‘DOMContentLoaded’, function() {
var inputs = documents.queriSelectorAll (‘ .wpcf7 input .wpcf7 textarea’ );
inputsforEach(function( inputs);
input.AddEventListener (‘focus’, function() {
this.style.borderColor = ‘#00796b’;
});
input.AddEventListener (‘blur’, function( ); {
this.style.borderColor = ‘#ccc’;
});
});
});
Zaključak
Uređivanje kontakt forme 7 u WordPressu uz malo dobre volje neće predstavljati veliki zadatak za vas ako ste upoznati s CSS-om i HTML a za naprednije tehnike ipak treba poznavati i JavaScript.
Hvala vam na čitanju članka “Kako stilizirati Contact formu 7“.
Preporučujemo

Komentariši