Na may higit sa 1 milyong mga aktibong gumagamit, ang Contact Form 7 ay isa sa mga pinaka-popular na form sa pakikipag-ugnay sa plugin para sa WordPress. Ang kanilang pinakamalaking downside ay na ang mga form ng kahon na idagdag mo ay napaka-plain naghahanap. Thankfully, Makipag-ugnay sa Form 7 maaaring madaling istilong gamit ang CSS sa iyong WordPress tema. Sa artikulong ito, ipapakita namin sa iyo kung paano mag-istilo ng form sa pakikipag-ugnay sa 7 na mga form sa WordPress.
Tandaan: Hindi namin inirerekumenda ang Contact Form 7 plugin ngayon. Sa halip, inirerekumenda namin ang WPForms, na kung saan ay ang pinaka-nagsisimula friendly na contact form plugin. Maaari mo ring i-download ang WPForms Lite nang libre.
Mayroon kaming isang hakbang-hakbang na gabay sa kung paano lumikha ng form sa pakikipag-ugnay sa WordPress.
Nagsisimula
Ipagpalagay namin na na-install mo ang Contact Form 7 plugin at nilikha ang iyong unang contact form. Ang susunod na hakbang ay upang kopyahin ang shortcode para sa iyong form sa pakikipag-ugnay at i-paste ito sa isang WordPress post o isang pahina kung saan nais mong lumitaw ang iyong form.
Para sa kapakanan ng artikulong ito, ginamit namin ang default na form sa pakikipag-ugnay at idinagdag ito sa isang pahina ng WordPress. Ganito ang hitsura ng contact form sa aming test site.
Tulad ng makikita mo na ang form ng contact ay nagmamana ng ilang mga estilo ng form mula sa iyong WordPress tema. Bukod sa na ito ay napaka basic.
Magiging estilo kami ng Contact Form 7 na gamit ang CSS. Ang lahat ng CSS ay papunta sa iyong tema o stylesheet ng tema ng bata.
Form ng Pakikipag-ugnay ng Form 7 Mga Form sa WordPress
Ang Contact Form 7 ay bumubuo ng isang napaka-kapaki-pakinabang at standard na sumusunod na code para sa mga form. Ang bawat elemento sa form ay may wastong ID at CSS class na nauugnay dito.
Ang bawat contact form ay gumagamit ng klase ng CSS .wpcf7 na maaari mong gamitin upang estilo ang iyong form.
Sa halimbawang ito kami ay gumagamit ng Google font Lora sa aming mga field ng input. Tingnan kung paano magdagdag ng Mga Font ng Google sa WordPress.
div.wpcf7 {
background-color: #fbefde;
hangganan: 1px solid # f28f27;
padding: 20px;
}
.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 textarea {
background: # 725f4c;
kulay: #FFF;
font-family: lora, sans-serif;
font-style: italic;
}
.wpcf7 input [type = "submit"],
.wpcf7 input [type = "button"] {
background-color: # 725f4c;
lapad: 100%;
text-align: center;
text-transform: uppercase;
}
Ganito ang hitsura ng aming form sa pakikipag-ugnay pagkatapos ilapat ang CSS na ito.
Pag-istilo ng Maramihang Mga Contact Form 7 Form
Ang problema sa CSS na ginamit namin sa itaas ay na ito ay ilalapat sa lahat ng Contact Form 7 form sa iyong website. Kung gumagamit ka ng maramihang mga form sa pakikipag-ugnay at nais na estilo ng mga ito nang magkakaiba, pagkatapos ay kailangan mong gamitin ang ID na nabuo sa pamamagitan ng form sa pakikipag-ugnay 7 para sa bawat form.
Buksan lamang ang pahina na naglalaman ng form na nais mong baguhin. Dalhin ang iyong mouse sa unang field sa form, i-right click at piliin ang Inspect Element. Ang screen ng browser ay hahatiin, at makikita mo ang source code ng pahina. Sa source code, kailangan mong hanapin ang panimulang linya ng form code.
Tulad ng makikita mo sa screenshot sa itaas, ang aming form sa pakikipag-ugnay ay nagsisimula sa linya:
Ang id attribute ay isang natatanging identifier na binuo ng Contact Form 7 para sa partikular na form na ito. Ito ay isang kumbinasyon ng form id at ang post id kung saan idagdag ang form na ito.
Gagamitin namin ang ID na ito sa aming CSS upang estilo ang aming form sa pakikipag-ugnay. Papalitan namin ang .wpcf7 sa aming unang CSS snippet na may # wpcf7-f201-p203-o1 .
div # wpcf7-f201-p203-o1 {
background-color: #fbefde;
hangganan: 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;
kulay: #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;
lapad: 100%;
text-align: center;
text-transform: uppercase;
}
Pag-istilo Makipag-ugnay sa Form 7 Mga Form na may CSS Hero
Maraming mga nagsisimula ng WordPress ay walang karanasan sa pagsusulat ng CSS, at ayaw nilang gugulin ang oras sa pag-aaral nito. Sa kabutihang-palad, mayroong isang kahanga-hangang solusyon para sa mga nagsisimula na magpapahintulot sa iyo na huwag lamang estilo ang iyong form sa pakikipag-ugnay ngunit halos bawat aspeto ng iyong WordPress site.
I-install at i-activate ang plugin ng CSS Hero at pumunta sa pahina na naglalaman ng iyong form. Mag-click sa toolbar ng CSS Hero at pagkatapos ay mag-click sa elemento na nais mong istilo. Ang CSS Hero ay magbibigay sa iyo ng isang madaling interface ng gumagamit upang i-edit ang CSS nang hindi nagsusulat ng anumang code.
Iyon lang ang inaasahan naming nakatulong sa artikulong ito na matutunan mo kung paano mag-istilo ng Contact Form 7 form sa WordPress