Paano Mag-istilo ng Pakikipag-ugnay sa Form Form 7 sa WordPress

Na may higit sa 1 milyong mga aktibong gumagamit, ang Contact Form 7 ay isa sa mga pinakatanyag na plugin ng contact form para sa WordPress. Ang kanilang pinakadakilang pagbabagsak ay ang labas ng mga form ng kahon na idinagdag mo ay napaka-plain na pagtingin. Sa kabutihang palad, ang Contact Form 7 ay madaling ma-istilong gamit ang CSS sa iyong WordPress tema. Sa artikulong ito, ipapakita namin sa iyo kung paano i-style ang contact form 7 form sa WordPress.


Tandaan: Hindi namin inirerekumenda ang plugin ng Makipag-ugnay sa Form 7. Sa halip, inirerekumenda namin ang WPForms, na kung saan ay ang pinaka-nagsisimula friendly form na plugin ng contact. Maaari ka ring mag-download ng WPForms Lite nang libre.

Mayroon kaming isang hakbang-hakbang na gabay sa kung paano lumikha ng form ng contact sa WordPress.

Tutorial ng Video

Mag-subscribe sa WPBeginner

Kung hindi mo gusto ang video o nangangailangan ng higit pang mga tagubilin, pagkatapos ay magpatuloy sa pagbabasa.

Nagsisimula

Ipinapalagay namin na na-install mo na ang plugin ng Contact 7 na Form at nilikha ang iyong unang form ng contact. Ang susunod na hakbang ay upang kopyahin ang shortcode para sa iyong form ng contact at i-paste ito sa isang post sa WordPress o isang pahina kung saan mo nais na lumitaw ang iyong form..

Para sa kapakanan ng artikulong ito, ginamit namin ang default na form ng contact at idinagdag ito sa isang pahina ng WordPress. Ito ay kung paano tumingin ang form ng contact sa aming site ng pagsubok.

Default na Contact Form 7 sa isang site ng WordPress gamit ang default na tema ng WordPress

Tulad ng nakikita mo na ang form ng contact ay nagmamana ng ilang mga estilo ng form mula sa iyong WordPress tema. Bukod sa ito ay napaka-basic.

Kami ay istilo ng Contact Form 7 form gamit ang CSS. Ang lahat ng CSS ay napupunta sa iyong styleheet na tema ng bata.

Styling Contact Form 7 Mga Form sa WordPress

Ang Contact Form 7 ay bumubuo ng isang napaka-kapaki-pakinabang at karaniwang sumusunod na code para sa mga form. Ang bawat elemento sa form ay may wastong ID at klase ng CSS na nauugnay dito.

Ang bawat form ng contact ay gumagamit ng klase ng CSS .wpcf7 na maaari mong gamitin upang istilo ang iyong form.

Sa halimbawang ito, gumagamit kami ng isang font ng Google Lora sa aming mga larangan ng pag-input. Tingnan kung paano idagdag ang Google Font sa WordPress.

div.wpcf7 {
kulay ng background: #fbefde;
hangganan: 1px solid # f28f27;
padding: 20px;
}
.wpcf7 input [type ="teksto"],
.wpcf7 input [type ="email"],
.wpcf7 textarea {
background: # 725f4c;
kulay: #FFF;
font-family: lora, sans-serif;
style ng font: italic;
}
.wpcf7 input [type ="ipasa"],
.wpcf7 input [type ="pindutan"]
kulay ng background: # 725f4c;
lapad: 100%;
align ng teksto: gitna;
pagbabago ng teksto: malalaking titik;
}

Ito ay kung paano tumingin ang aming form sa pakikipag-ugnay sa paglalapat ng CSS na ito.

Ang mga form ng contact sa Styling Form 7 na may CSS sa WordPress

Pag-istilo ng Maramihang Mga Form ng Pakikipag-ugnay sa 7

Ang problema sa CSS na ginamit namin sa itaas ay mailalapat ito sa lahat ng mga form ng Contact Form 7 sa iyong website. Kung gumagamit ka ng maramihang mga form ng contact at nais mong istilong naiiba, kailangan mong gamitin ang ID na nabuo ng contact form 7 para sa bawat form.

Buksan lamang ang isang pahina na naglalaman ng form na nais mong baguhin. Dalhin ang iyong mouse sa unang patlang sa form, mag-click sa kanan at piliin ang Suriin ang Elemento. Maghahati ang screen ng browser, at makikita mo ang source code ng pahina. Sa source code, kailangan mong hanapin ang panimulang linya ng form code.

Paghahanap ng element ID para sa iyong form ng contact

Tulad ng nakikita mo sa screenshot sa itaas, ang aming code ng form ng contact ay nagsisimula sa linya:

Ang id na katangian ay isang natatanging identifier na nilikha ng Contact Form 7 para sa partikular na form na ito. Ito ay isang kombinasyon ng form id at ang post id kung saan idinagdag ang form na ito.

Gagamitin namin ang ID na ito sa aming CSS upang istilo ang aming form ng contact. Papalitan namin .wpcf7 sa aming unang snippet ng CSS na may # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
kulay ng background: #fbefde;
hangganan: 1px solid # f28f27;
padding: 20px;
}
# wpcf7-f201-p203-o1 input [type ="teksto"],
# wpcf7-f201-p203-o1 input [type ="email"],
# wpcf7-f201-p203-o1 textarea {
background: # 725f4c;
kulay: #FFF;
font-family: lora, "Buksan ang mga Sansan", sans-serif;
style ng font: italic;
}
# wpcf7-f201-p203-o1 input [type ="ipasa"],
# wpcf7-f201-p203-o1 input [type ="pindutan"]
kulay ng background: # 725f4c;
lapad: 100%;
align ng teksto: gitna;
pagbabago ng teksto: malalaking titik;
}

Styling Contact Form 7 Forms na may CSS Hero

Maraming mga nagsisimula sa WordPress ay walang karanasan sa pagsulat ng CSS, at hindi nila nais na gumastos ng oras sa pag-aaral nito. Sa kabutihang palad, mayroong isang magandang solusyon para sa mga nagsisimula na magpapahintulot sa iyo na hindi lamang istilo ang iyong form ng contact ngunit halos lahat ng aspeto ng iyong WordPress site.

I-install lamang at isaaktibo ang plugin ng CSS Hero at pumunta sa pahina na naglalaman ng iyong form. Mag-click sa CSS Hero toolbar at pagkatapos ay mag-click sa elementong nais mong istilo. Magbibigay sa iyo ang CSS Hero ng isang madaling interface ng gumagamit upang mai-edit ang CSS nang hindi sumulat ng anumang code.

Styling Contact Form 7 Form Gamit Paggamit ng CSS Hero

Tingnan ang aming kumpletong pagsusuri ng CSS Hero at kung paano gamitin ito upang mag-istilo ng anuman sa iyong WordPress site. Maaari mong gamitin ang CSS Hero coupon code WPBeginner upang makakuha ng eksklusibong 34% na diskwento.

Iyon lang ang inaasahan namin na ang artikulong ito ay nakatulong sa iyo na malaman kung paano i-istilo ang Mga Form ng Form ng 7 sa WordPress. Maaari mo ring makita ang aming gabay sa kung paano magdagdag ng isang popo ng contact form sa WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me