Kaip formuoti 7 formos formas „WordPress“

Turėdama daugiau nei 1 milijoną aktyvių vartotojų, „Contact Form 7“ yra vienas iš populiariausių „WordPress“ kontaktinės formos papildinių. Didžiausias jų neigiamas aspektas yra tai, kad jūsų pateiktos formos dėžutės yra labai paprastos. Laimei, „Kontaktų formą 7“ galite lengvai sukurti naudodami CSS savo „WordPress“ tema. Šiame straipsnyje parodysime, kaip formuoti „WordPress“ 7 formos kontaktines formas.


Pastaba: Daugiau nerekomenduojame susisiekti su 7 formos papildiniu. Vietoj to, mes rekomenduojame „WPForms“, kuris yra labiausiai pradedantiesiems draugiškos kontaktinės formos papildinys. Taip pat galite nemokamai atsisiųsti „WPForms Lite“.

Mes turime žingsnis po žingsnio vadovą, kaip sukurti kontaktų formą „WordPress“.

Video pamoka

Prenumeruokite „WPBeginner“

Jei vaizdo įrašas jums nepatinka ar jums reikia daugiau instrukcijų, toliau skaitykite.

Darbo pradžia

Mes darome prielaidą, kad jūs jau įdiegėte „Contact Form 7“ papildinį ir sukūrėte savo pirmąją kontaktinę formą. Kitas žingsnis – nukopijuokite kontaktinės formos trumpąjį kodą ir įklijuokite jį į „WordPress“ įrašą arba puslapį, kuriame norite, kad jūsų forma būtų rodoma.

Siekdami šio straipsnio, mes panaudojome numatytąją kontaktų formą ir įtraukėme ją į „WordPress“ puslapį. Štai kaip kontaktinė forma atrodė mūsų bandymo svetainėje.

Numatytoji „7“ formos forma „WordPress“ svetainėje naudojant numatytąją „WordPress“ temą

Kaip matote, kad kontaktinė forma paveldi kai kuriuos formos stilius iš savo „WordPress“ temos. Be to, tai labai paprasta.

Mes formuosime „Contact Form 7“ formas naudodami CSS. Visa CSS patenka į jūsų temos ar vaiko temos stiliaus lentelę.

7 stiliaus formavimo formos „WordPress“

7 forma „Kontaktinė forma“ sugeneruoja labai naudingą ir standartinį formų kodą. Kiekvienas formos elementas turi atitinkamą ID ir CSS klasę.

Kiekvienoje kontaktinėje formoje naudojama CSS klasė .wpcf7, kurią galite naudoti formuodami formą.

Šiame pavyzdyje įvesties laukuose naudojame „Google“ šriftą „Lora“. Sužinokite, kaip pridėti „Google“ šriftus „WordPress“.

div.wpcf7 {
fono spalva: #fbefde;
kraštinė: 1 tašk. kietas # f28f27;
paminkštinimas: 20 taškų;
}
.wpcf7 įvestis [tipas ="tekstas"],
.wpcf7 įvestis [tipas ="el"],
.wpcf7 textarea {
fonas: # 725f4c;
spalva: #FFF;
šriftų šeima: lora, sans-serif;
šrifto stilius: kursyvas;
}
.wpcf7 įvestis [tipas ="Pateikti"],
.wpcf7 įvestis [tipas ="mygtuką"] {
fono spalva: # 725f4c;
plotis: 100%;
suderinti tekstą: centre;
teksto transformacija: didžiosios raidės;
}

Taip mūsų kontaktinė forma atrodė pritaikius šią CSS.

„7 stiliaus formavimo forma naudojant CSS„ WordPress “

Kelių kontaktinių formų, formuojančių 7 formas, formavimas

Aukščiau naudotos CSS problema yra ta, kad ji bus taikoma visoms jūsų svetainės 7 formos formoms. Jei naudojate kelias kontaktų formas ir norite jas formuoti skirtingai, kiekvienai formai turėsite naudoti ID, kurį sukūrė kontaktinė forma 7.

Tiesiog atidarykite puslapį su forma, kurią norite modifikuoti. Sukite pelę į pirmąjį formos lauką, dešiniuoju pelės mygtuku spustelėkite ir pasirinkite Patikrinti elementą. Naršyklės ekranas pasiskirstys ir pamatysite puslapio šaltinio kodą. Šaltinio kode turite rasti pradinę formos kodo eilutę.

Kontaktinės formos elemento ID radimas

Kaip matote aukščiau esančioje ekrano kopijoje, mūsų kontaktinės formos kodas prasideda šia eilute:

„ID“ atributas yra unikalus identifikatorius, kurį sukuria „7 Kontaktų forma“ šiai konkrečiai formai. Tai formos ID ir įrašo ID derinys, kuriame pridedama ši forma.

Šį ID naudosime CSS norėdami formuoti savo kontaktinę formą. Pirmame CSS fragmente .wpcf7 pakeisime # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
fono spalva: #fbefde;
kraštinė: 1 tašk. kietas # f28f27;
paminkštinimas: 20 taškų;
}
# wpcf7-f201-p203-o1 įvestis [tipas ="tekstas"],
# wpcf7-f201-p203-o1 įvestis [tipas ="el"],
# wpcf7-f201-p203-o1 tekstinė sritis {
fonas: # 725f4c;
spalva: #FFF;
šriftų šeima: lora, "Atidarykite „Sans“", sans-serifas;
šrifto stilius: kursyvas;
}
# wpcf7-f201-p203-o1 įvestis [tipas ="Pateikti"],
# wpcf7-f201-p203-o1 įvestis [tipas ="mygtuką"] {
fono spalva: # 725f4c;
plotis: 100%;
suderinti tekstą: centre;
teksto transformacija: didžiosios raidės;
}

„7 stiliaus forma“ formos su „CSS Hero“

Daugelis „WordPress“ pradedančiųjų neturi jokios patirties rašydami CSS ir nenori skirti laiko to mokytis. Laimei, yra puikus sprendimas pradedantiesiems, kuris leis jums ne tik formuoti savo kontaktinę formą, bet ir beveik kiekvieną savo „WordPress“ svetainės aspektą..

Tiesiog įdiekite ir suaktyvinkite CSS Hero papildinį ir eikite į puslapį, kuriame yra jūsų forma. Spustelėkite CSS Hero įrankių juostą, tada spustelėkite elementą, kurį norite stiliuoti. „CSS Hero“ suteiks jums lengvą vartotojo sąsają, leidžiančią redaguoti CSS, niekada nerašydami kodo.

„Styles Contact Form 7“ forma naudojant CSS Hero

Peržiūrėkite išsamią „CSS Hero“ apžvalgą ir kaip ją panaudoti kuriant bet ką „WordPress“ svetainėje. Galite naudoti CSS herojaus kupono kodą WPBeginner norėdami gauti išskirtinę 34% nuolaidą.

Tai viskas, ko mes tikimės, kad šis straipsnis padėjo jums išmokti formuoti „Contact Form 7“ formas „WordPress“. Taip pat galbūt norėsite pamatyti mūsų vadovą, kaip pridėti kontaktinės formos iššokantįjį langą „WordPress“.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map