Kamakailan lamang ay nakuha namin ang isang email mula sa isang gumagamit na nagtatanong: Paano ko ilalagay ang aking contact form sa isang popup para sa aking WordPress site? Ito ay isang karaniwang kalakaran sa maraming mga site kung saan ang isang gumagamit ay nag-click sa pindutan ng contact o link, sa halip ng pagpunta sa isang bagong pahina, bubukas ang contact form sa isang popup. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng isang contact form na popup sa WordPress na gagana para sa halos anumang mga plugin ng form sa pakikipag-ugnay. Ipapakita rin namin sa iyo kung paano buksan lamang ang popup kapag nag-click ang isang gumagamit sa link o pindutan upang matiyak ang pinakamahusay na karanasan ng user.
Gayunpaman kung gusto mo lamang sundin ang mga tagubilin sa teksto, maaari mong sundin ang aming hakbang sa pamamagitan ng hakbang na tutorial kung paano paano magdagdag ng isang contact form na popup sa WordPress.
Hakbang 0: Pagsisimula
Para sa tutorial na ito kakailanganin mong i-install at i-activate ang dalawang plugin.
Una, kailangan mo ang pro plano ng OptinMonster na may kasamang uri ng form na Canvas. Ang OptinMonster ay ang pinakamahusay na popup plugin para sa WordPress.
Susunod, kakailanganin mong magkaroon ng isang contact form plugin tulad ng WPForms, Gravity Forms, Contact Form 7, atbp.
Para sa kapakanan ng artikulong ito, gagamitin namin ang libreng bersyon ng aming paboritong form sa pakikipag-ugnay sa plugin: WPForms Lite.
Ipagpalagay namin na na-install mo at naisaaktibo ang parehong mga plugin. Kung kailangan mo ng tulong
lugar
Sinabi na, lumipat tayo sa paglikha ng isang contact form sa WordPress.
Hakbang 1: Paglikha ng isang Contact Form gamit ang WPForms
Una kailangan mong lumikha ng isang bagong form sa pakikipag-ugnay sa WPForms. Kung mayroon ka nang isang contact form na nilikha gamit ang WPForm, maaari mong laktawan ang hakbang na ito.
Mag-click sa menu ng WPForms sa iyong WordPress admin sidebar at pagkatapos ay mag-click sa pindutang Magdagdag ng Bagong.
Ilulunsad nito ang Form Builder. Maglagay lamang ng isang pangalan para sa iyong form, halimbawa. ‘Makipag-ugnayan sa amin’ at pagkatapos ay mag-click sa template na ‘Simple Contact Form’ upang magpatuloy.
Dadalhin ka ng tagabuo ng form sa editor ng mga patlang. Maaari kang magdagdag o mag-alis ng mga patlang mula sa iyong form o muling ayusin ang mga ito sa pamamagitan ng simpleng drag at drop.
Sa sandaling tapos ka na, kailangan mong mag-click sa pindutang save upang i-imbak ang iyong mga pagbabago. Handa na ang iyong contact form.
Kailangan mong bisitahin WPForms »Lahat ng Mga Form pahina. Makikita mo ang iyong contact form na nakalista doon. Sa tabi nito makikita mo ang isang shortcode. Kakailanganin mo ang shortcode na ito sa susunod na hakbang.
Kung kailangan mo ng mas detalyadong mga tagubilin, pagkatapos ay i-checkout ang aming hakbang-hakbang na gabay sa kung paano lumikha ng isang contact form sa WordPress.
Ngayon na mayroon kaming isang contact form na handa, lumipat kami sa susunod na hakbang at lumikha ng isang lightbox popup sa WordPress.
Hakbang 2: Paglikha ng isang WordPress Popup gamit ang OptinMonster
Ang unang bagay na kailangan nating gawin ay lumikha ng isang modal popup gamit ang OptinMonster.
Kailangan mong lumikha ng bagong optin sa pamamagitan ng pag-click sa OptinMonster sa WordPress admin menu, at pagkatapos ay mag-click sa Gumawa ng Bagong pindutan ng Optin.
Dadalhin ka nito sa website ng OptinMonster, kung saan malilikha mo ang iyong popup. Una kailangan mong magbigay ng pamagat para sa iyong kampanya. Maaari mong pangalanan ang anumang nais mo, halimbawa. ‘Contact Form popup’.
Susunod na kailangan mong piliin ang iyong website mula sa drop down na menu. Mag-click sa Canvas sa ilalim ng pagpipiliang ‘Piliin ang Iyong Disenyo’.
Ipapakita sa iyo ng OptinMonster ang mga magagamit na template. Sa kasalukuyan, mayroon lamang Whiteboard template na magagamit para sa Canvas. Mag-click sa template upang magpatuloy.
Dadalhin ka nito sa screen ng Optin Customizer. Mapapansin mo na ang Canvas ay blangko sa pamamagitan ng disenyo. Tapos na ang paraan, kaya maaari kang magdagdag ng halos anumang nais mo habang ginagamit ang kapangyarihan ng OptinMonster. Maaari kang magdagdag ng isang form sa pag-signup, facebook tulad ng kahon, survey, mga code ng kupon, o tulad ng ginagawa namin sa halimbawang ito isang form sa pakikipag-ugnay.
Sa tab na disenyo maaari mong piliin ang lapad ng taas ng iyong canvas. Bilang default, naka-set ito sa 700 x 350 px. Let’s set ang taas sa 520 ng hindi bababa sa.
Sa ilalim ng kahon ng ‘Pasadyang HTML’ ipapasok mo ang iyong shortcode form sa pakikipag-ugnay kasama ang anumang iba pang custom HTML na maaaring gusto mong idagdag.
Narito ang isang sample HTML na ginamit namin upang lumikha ng modal popup para sa tutorial na ito.
Mayroon ka bang anumang mga Tanong?
Nais mo bang hilingin sa amin nang higit pa tungkol sa aming mga serbisyo? Punan lang ang form na ito at babalikan ka namin sa lalong madaling panahon.
[wpforms id = "119"]
Pansinin na naka-embed na ang shortcode ng WPForms doon din. Kung gumagamit ka ng isa pang contact form, pagkatapos ay palitan lamang ang shortcode sa iyong shortcode form sa pakikipag-ugnay.
Pagkatapos ng pasadyang HTML, ang susunod na pagpipilian ay ipasok ang iyong pasadyang CSS. Sa ibaba ng pasadyang kahon ng CSS, makikita mo ang isang string ng random na teksto na mukhang ito html div # om-mw7pzo63ch6wpfzi . Ito ang prefix ng CSS na gagamitin mo sa iyong pasadyang CSS.
Narito ang CSS na ginamit namin upang lumikha ng modal popup para sa tutorial na ito.
html div # om-mw7pzo63ch6wpfzi div # om-canvas-whiteboard-optin {
background-color: # f8f8f8;
}
html div # om-mw7pzo63ch6wpfzi h3 {
text-align: center;
}
html div # om-mw7pzo63ch6wpfzi .tagline {
font-style: italic;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {
padding: 10px 0;
malinaw: parehong;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
display: block;
font-weight: 700;
laki ng font: 16px;
lumutang: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
display: none! important;
posisyon: absolute! mahalaga;
kaliwa: -9000px! mahalaga;
}
Huwag mag-alala kung hindi mo makita ang preview ngayon, maaari mong ayusin ang iyong CSS sa ibang pagkakataon. Magagamit mo ang tool ng Inspect Element ng iyong browser upang malaman kung aling mga klase at mga tagapili ng CSS ang nais mong i-target at pagkatapos ay magdagdag ng custom css sa pamamagitan ng pag-edit ng iyong optin.
Ngayon na tapos na kami sa bahagi ng disenyo. Lumipat tayo sa tab na pagsasaayos sa customizer.
Palitan ang parehong ‘Optin Cookie Duration’ at ‘Optin Success Cookie Duration’ sa 0. Ito ay titigil sa OptinMonster mula sa setting duration cookie.
Kailangan mo ring baguhin ang ‘Optin Success Message’. Bilang default, salamat sa mga gumagamit para sa pag-sign up, ngunit ginagamit namin ito sa isang form sa pakikipag-ugnay. Dapat mong baguhin ang tagumpay na mensahe upang pasalamatan ang mga gumagamit para sa pakikipag-ugnay sa iyo.
Dahil lilitaw lamang ang aming popup kapag nag-click ang isang gumagamit sa isang link o isang pindutan, nangangahulugan ito na kailangan namin upang paganahin ang manu-manong trigger. Lagyan ng tsek ang kahon sa ilalim ng ‘Mag-load sa Manu-manong Pag-trigger?’ Na opsyon.
Mag-click sa pindutang I-save upang iimbak ang iyong mga setting ng optin, pagkatapos ay mag-click sa pindutan na malapit upang lumabas sa customizer.
Hakbang 3: Pagdaragdag ng popup sa Iyong WordPress Site
Lumipat pabalik sa iyong WordPress admin area at mag-click sa OptinMonster. Makikita mo ang iyong listahan ng mga optins. Kung hindi mo makita ang iyong optin, pagkatapos ay mag-click sa pindutan ng refresh optins.
Mag-click sa ‘I-edit ang mga setting ng output’ link sa ibaba ng iyong optin. Dadalhin ka nito sa mga setting ng output para sa popup.
Una kailangan mong suriin ang kahon sa tabi ‘Paganahin ang optin sa site’ at ‘Mag-load ng optin globally’ mga pagpipilian. Kung hindi mo masuri ang mga ito, ang popup ay hindi lilitaw sa iyong site.
Mag-scroll pababa sa pahina, at makikita mo ang pagpipilian ‘Pag-parse ng nilalaman para sa mga shortcode’ . Tiyaking naka-check, kung hindi man ay mai-parse ng OptinMonster ang mga shortcode sa loob ng iyong popup.
Susunod na kailangan mong ipasok ang shortcode na isinama mo sa iyong popup. Ito ang iyong contact form shortcode.
Mag-click sa mga setting ng pag-save upang i-imbak ang iyong mga pagbabago.
Pagdaragdag ng Link o Pindutan upang Mag-trigger ng Contact Form Popup
Una kakailanganin mo ang iyong OptinMonster optin’s slug. Mag-click sa icon ng OptinMonster sa iyong sidebar ng WordPress. Makikita mo ang optin slug sa tabi ng pamagat ng iyong optin.
Lumikha ng isang bagong pahina sa WordPress o mag-edit ng isang post o pahina kung saan mo gustong idagdag ang link ng contact form na popup o pindutan. Sa switch ng editor ng post sa editor ng teksto at idagdag ang iyong popup na link tulad nito:
Makipag-ugnayan sa amin
Huwag kalimutang palitan ang data-optin-slug gamit ang iyong sariling optin slug.
I-save ang iyong mga pagbabago at bisitahin ang iyong post / pahina. Mag-click sa link upang makita ang iyong contact form na popup sa pagkilos.
Maaari mong gamitin ang link na ito kahit saan sa iyong WordPress site. Maaari mo itong idagdag sa post o mga pahina, sa mga widget ng teksto, kahit na sa iyong mga template ng WordPress.
Iyon lang. Umaasa kami na ang artikulong ito ay nakatulong sa iyo na mapalakas ang iyong mga rate ng conversion sa pamamagitan ng paggamit ng isang contact form na popup sa WordPress. Maaari mo ring tingnan kung paano nakatulong ang OptinMonster sa amin na palakasin ang aming mga email subscriber sa pamamagitan ng 600%.