Ako upraviť CSS Kontaktný formulár 7

Obsah

inštrukcia
tipy
varovanie
Čo potrebujete

Kontaktný formulár 7 je plugin pre publikovanie platformy WordPress, ktorý umožňuje používateľom rýchlo vytvárať vlastné formuláre kontaktov. Hoci formuláre sa dajú ľahko vytvoriť a nasadiť, ich polia sú minimálne prispôsobené, čo umožňuje integráciu s ľubovoľnou lokalitou. Vytvorte si vlastné štýly a implementujte ich do polí formulárov vytvorených týmto doplnkom.

inštrukcia

Prispôsobte štýl polí kontaktného formulára 7 pomocou CSS (Comstock / Comstock / Getty Images)

Otvorte tému štýlu vášho WordPress a prejdite na koniec. Vytvorte anotovanú oblasť, aby ste mohli ľahko nájsť svoj kód. Príklad:

/ Tu sa začína môj vlastný kód CF7 /
Prispôsobte si štýly polí a textových oblastí. Ak to chcete urobiť, vytvorte položku vo svojom šablóne štýlov. Príklad:

.wpcf7 input [type = "text"], .wpcf7 areadotexto {}

Pridajte okraje, pozadie, polstrovanie a veľkosti textových prvkov. Príklady:

.wpcf7 input [type = "text"] {background: none opakovať rolovanie 0 0 # F9F9F9; hranica: 1px pevná # 8E9BA9; vypchávka: 5px; šírka: 200px; }
Prispôsobte štýly rozbaľovacích a výberových ponúk.Ak to chcete urobiť, vytvorte položku vo svojom šablóne štýlov. Príklad:

.wpcf7 input [type = "select"] {

}

Prispôsobte polia výberu podobné textovým poliam. Polia výberu nie sú tak široké ako textové polia, takže pridajte niekoľko ďalších pixlov do vašej šírky. Príklad:

.wpcf7 input [type = "selected"] {background: none opakovať rolovanie 0 0 # F9F9F9; hranica: 1px pevná # 8E9BA9; vypchávka: 5px; šírka: 210px; }
Prispôsobte si štýl tlačidla odoslania. Ak to chcete urobiť, vytvorte položku vo svojom šablóne štýlov. Príklad:

.wpcf7 input [type = "odoslanie"] {

}

Prispôsobte tlačidlo odoslania, aby ste doplnili vzhľad a dojem z vašej stránky (mal by aj naďalej vyčnievať z pozadia). Príklad červeného tlačidla odoslania:

.wpcf7 input [type = "submission"] {farba pozadia: # 990000; hranica: 4px tuhá # B34040; farba: #FFFFFF; }
Uložte zmeny do svojho štýlu a preneste údaje do priečinka témy.

tipy

Vyskúšajte rôzne štýly a rôzne farby okrajov.
Vykonajte novú kontrolu formulárov v prehliadači Firefox, Safari a Internet Explorer, pretože každý prehliadač poskytuje mierne odlišné vstupné polia.

varovanie

Pridajte vlastné CSS do šablóny štýlu vašej témy a nie štýlu doplnkov. Ak to urobíte, keď je plugin aktualizovaný, môže dôjsť k strate prispôsobenia súborov vo vašom priečinku.