Kā pārveidot Contact Form 7 WordPress

/

Ar vairāk nekā 1 miljonu aktīvo lietotāju 7. kontaktu forma ir viens no populārākajiem WordPress kontaktu formas spraudņiem. Viņu lielākais trūkums ir tas, ka pievienotās ārpus kastes esošās formas ir ļoti vienkāršas. Par laimi, 7. kontaktformu var viegli izveidot, izmantojot CSS jūsu WordPress tēmā. Šajā rakstā mēs parādīsim, kā veidot formas WordPress 7. formas formas.

Piezīme. Mēs vairs neiesakām sazināties ar 7. formas spraudni. Tā vietā mēs iesakām WPForms, kas ir iesācējiem draudzīgākais kontaktu formas spraudnis. Jūs varat arī lejupielādēt WPForms Lite bez maksas.

Mums ir soli pa solim ceļvedis, kā izveidot kontaktu formu WordPress.

Darba sākšana

Mēs pieņemam, ka jūs jau esat instalējis spraudni Kontaktforma 7 un esat izveidojis savu pirmo kontakta formu. Nākamais solis ir kopēt kontaktpersonas formas īso kodu un ielīmēt to WordPress ierakstā vai lapā, kur vēlaties, lai jūsu forma tiktu parādīta.

Šī raksta labad mēs esam izmantojuši noklusējuma kontakta formu un pievienojuši to WordPress lapā. Šādi saziņas forma izskatījās mūsu testa vietnē.

Noklusējuma 7. veidlapas veidlapa WordPress vietnē, izmantojot noklusējuma WordPress motīvu

Kā redzat, ka kontaktu forma manto dažus formu stilus no jūsu WordPress šablona. Turklāt tas ir ļoti vienkārši.

Mēs veidosim 7. formas formas, izmantojot CSS. Visa CSS nonāk jūsu šablona vai bērna šablona stila lapā.

Contact Form 7 WordPress

  1. forma saziņai ģenerē ļoti noderīgu un standartiem atbilstošu kodu formām. Katram formas elementam ir pievienots pareizs ID un CSS klase.

Katrā kontaktu formā tiek izmantota CSS klase .wpcf7, kuru varat izmantot, lai veidotu formu.

Šajā piemērā mēs ievades laukos izmantojam Google fontu Lora. Uzziniet, kā pievienot Google fontus WordPress.

div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;   
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Šādi mūsu saziņas forma izskatījās pēc šīs CSS izmantošanas.

7. veidlapas veidlapas veidošana ar CSS programmā WordPress

Vairāku kontaktu Contact Form 7 veidošana

Iepriekš izmantotās CSS problēma ir tā, ka tā tiks piemērota visām jūsu vietnes 7. formas formām. Ja izmantojat vairākas kontaktpersonu formas un vēlaties tās veidot atšķirīgi, katrai formai būs jāizmanto 7. kontakta veidotās ID.

Vienkārši atveriet lapu ar modificējamo formu. Virziet peli uz formas pirmo lauku, ar peles labo pogu noklikšķiniet un atlasiet Pārbaudīt elementu. Pārlūkprogrammas ekrāns tiks sadalīts, un jūs redzēsiet lapas avota kodu. Avota kodā jums jāatrod formas koda sākuma rinda.

Kontakta veidlapas elementa ID atrašana

Kā redzat iepriekš redzamajā ekrānuzņēmumā, mūsu kontaktu formas kods sākas ar rindu:

Atribūts id ir unikāls identifikators, ko šai konkrētajai formai ģenerējis 7. kontakta forma. Tā ir formas id un ziņas ID kombinācija, kur šī forma tiek pievienota.

Mēs izmantosim šo ID mūsu CSS, lai veidotu mūsu kontaktformu. Pirmajā CSS fragmentā .wpcf7 aizstāsim ar # wpcf7-f201-p203-o1.

div#wpcf7-f201-p203-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;   
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Contact Form 7 stilizēšana ar CSS Hero

Daudziem WordPress iesācējiem nav CSS rakstīšanas pieredzes, un viņi nevēlas tērēt laiku tā apguvei. Par laimi, iesācējiem ir brīnišķīgs risinājums, kas ļaus jums ne tikai veidot savu kontaktformu, bet arī gandrīz visus jūsu WordPress vietnes aspektus.

Vienkārši instalējiet un aktivizējiet CSS Hero spraudni un dodieties uz lapu, kurā ir jūsu forma. Noklikšķiniet uz rīkjoslas CSS Hero un pēc tam noklikšķiniet uz elementa, kuru vēlaties veidot. CSS Hero nodrošinās jums ērtu lietotāja saskarni, lai rediģētu CSS, nekad nerakstot kodu.

7. veidlapas veidošanas veidlapa, izmantojot CSS varoni

Skatiet mūsu pilnīgo CSS Hero pārskatu un to, kā to izmantot, lai kaut ko veidotu savā WordPress vietnē.

Tas ir viss, ko mēs ceram, ka šis raksts jums palīdzēja iemācīties veidot 7. formas formas WordPress. Iespējams, vēlēsities redzēt arī mūsu ceļvedi par to, kā WordPress pievienot uznirstošo kontaktu formu.

Nepieciešāma palidzība ar WordPress? Sazinieties tagad
[email protected]

Tā ir oriģinālās publikācijas wpbeginner tulkojums, viss tā saturs, bildes un autortiesības pieder to autoriem

Kā pārvietot pielāgotu domēnu Blogger blogu uz WordPress

Vai vēlaties pārvietot savu pielāgotā domēna Blogger blogu uz WordPress? Blogger ir bezmaksas blogu veidošanas platforma, kas pastāv jau ļoti ilgu laiku. Parasti bloga Blogger bezmaksas blogā ir tīmekļa vietnes adrese blogspot.com. Piemēram, myblog.blogspot.com. Mūsu

Kā novērst 403 Forbidden kļūdu WordPress

Vai jūs nodarbojaties ar 403 Forbidden kļūdu savā WordPress vietnē? Tā ir viena no drausmīgākajām kļūdām, ar kuru var saskarties WordPress iesācējs. Šajā rakstā mēs parādīsim, kā viegli novērst 403 aizliegto kļūdu WordPress. WordPress parāda

Kā īslaicīgi novērst WordPress plānotās apkopes kļūdu

Vai WordPress redzat kļūdu “Īsumā nav pieejama regulārai apkopei”? Šī kļūda parasti parādās, atjauninot WordPress kodolu, spraudņus vai šablonus. Būtībā jūsu WordPress vietne nespēj pabeigt atjaunināšanu, kas liek jums iestrēgt apkopes

Kā pasniegt tiešsaistes jogas nodarbības ar WordPress

Vai esat jogas skolotājs, kurš vēlas pasniegt jūsu nodarbības tiešsaistē? Lai gan tas varētu šķist sarežģīti, to faktiski ir diezgan viegli izdarīt. Daudzi jogas skolotāji katru dienu rīko nodarbības. Un citi tiešsaistē piedāvā jogas kursus,