Hvordan opprette en popup-kontakt i WordPress – trinn for trinn

hvordan du oppretter en kontaktskjema popup i wordpress


Vil du spre kontaktskjemaet ditt når en bruker klikker på kontaktsknappen eller lenken?

Fordelen er at hver gang en bruker klikker på kontaktsknappen eller en lenke, i stedet for å gå til en ny side, åpnes kontaktskjemaet i form av en popup, noe som vil øke skjemainnsendingene. I denne artikkelen viser vi deg hvordan du oppretter en kontaktformular-popup på WordPress-nettstedet ditt uten å påvirke brukeropplevelsen din på en trinnvis måte.

Opprette en kontaktformat pop-up enkelt i WordPress

Med WordPress er det enkelt å lage en popup-kontakt med kontaktskjema. For å komme i gang trenger du bare å ha to ting:

  1. en kraftig popup-plugin
  2. en robust plugin for formbuilder

For å oppnå de beste resultatene anbefaler vi deg å bruke WPForms for å opprette ditt kontaktskjema. Det er et kraftig plugin-program for skjermbygger som lar deg bygge nesten alle slags former på mindre enn 5 minutter. Les mer om WPForms her.

WPForms, brukerregistrering, plugin, plugin for brukerpålogging

Når det gjelder popup-plugins, tror vi at det ikke er noe annet alternativ som er bedre enn OptionMonster. Det er en av de mest populære og kraftige pluggen-genereringene for generasjon av generasjoner som lar deg fange den besøkende oppmerksomhet og oppmuntre dem til å gjøre tiltak på nettstedet ditt med bruk av fantastiske optinser. Gjennom denne pluginen kan du øke brukerengasjementet og øke konverteringene og salget.

optinmonster-popups

For å vite mer om OptinMonster, les vår detaljerte OptinMonster-anmeldelse.

Trinn 1: Installer WPForms og OptinMonster-plugins

add-wordpress-plugins

Start med å laste ned WPForms plugg inn. Deretter installerer og aktiverer du den. Ikke sikker på hvordan? Ikke noe problem. Du kan hoppe over til guiden vår om hvordan du installerer en WordPress-plugin for å få alt sortert. Vi venter.

Klar? Perfekt.

Følg den samme prosessen for å aktivere OptinMonster-plugin. Men det er ikke tilstrekkelig å installere bare plugin-modulen. Du må gjøre det Opprett en konto med OptinMonster-appen også. Plugin fungerer bare som et medium for å koble WordPress-nettstedet ditt til OptinMonster-appen. Så for å få det til å fungere ordentlig må du installere plugin og opprette en konto med appen også.

Trinn 2: Lag et kontaktskjema ved hjelp av WPForms for popup-en

Vi bruker først WPForms-plugin til å opprette et kontaktskjema. Men hvis du har brukt WPForms og allerede har opprettet et kontaktskjema med det, kan du hoppe over dette trinnet.

Hvis du ikke har et kontaktskjema, gå til dashbordet og klikk på WPForms »Legg til nytt.

wpforms-dashbord

Dette tar deg til en annen side hvor du kan velge en skjemamal og legge til et navn til skjemaet. Velg Enkelt kontaktskjema mal og gi et navn til skjemaet ditt.

WPForms Lite Maler

Når prosessen er fullført, vil skjermbyggeren bli lansert som gjør det enkelt å designe skjemaene dine. Du kan enkelt legge til eller fjerne filer ved å dra og slipp-byggherren.

Du kan legge til alle feltene du tror er nødvendige for skjemaet ditt. Når alt er gjort, trykker du på lagre-knappen for å lagre endringene. Kontaktskjemaet ditt er nå klart til å bli sendt ut.

Nå treffer embed -fanen ved siden av lagre-knappen og kopiere kortkoden.

Trinn 3: Opprette en WordPress-popup ved bruk av OptinMonster

Neste trinn er å opprette en popup på nettstedet ditt. Vi oppretter en modal popup ved å bruke OptinMonster. Så gå til WordPress-oversikten og klikk på OptinMonster »Lag ny kampanje.

Dette åpner et nytt skjermbilde der du kan velge kampanjetype etterfulgt av malen til optin. For kampanjetypen velger vi popup-alternativet.

La oss gå for malen Lerret. Dette er et blankt lerret som støtter alle former for kortkoder. Så du kan sette inn alle HTML-, CSS-, JavaScript- og til og med WordPress-kortkoder her.

Når du velger malen, blir du ledet til et nytt skjermbilde der du kan navngi kampanjen din.

Neste klikk på Begynn å bygge fane. Du blir nå ledet til dra og slipp-byggherren. Du vil merke at lerretet er blankt når det gjelder design. Du kan opprette en hvilken som helst popup ved hjelp av dette lerretet og designe dem fra bunnen av. Du kan gjøre det ved å bruke alternativene under Design tab.

Når du er ferdig, klikker du på Legg til blokker under kategorien Design. Bla nedover for å finne Elementblokker alternativer. Under dette ser du en HTML-blokk. Dra og slipp det på designområdet.

Her kan du legge inn en kontaktskjema-kortkode sammen med annen tilpasset HTML du måtte ønske å legge til. Så la oss legge til kortnummeret som er som følger:

Har du noen spørsmål?

Ønsker du å spørre mer om tjenesten vår? Bare fyll ut skjemaet så kommer vi tilbake til deg så snart som mulig.

Her er en forhåndsvisning av hvordan du kan gjøre det.

Legg merke til at kortkoden til skjemaet som vi opprettet tidligere, også er innebygd i koden. Du kan erstatte denne kortkoden med din. Lagre endringene. Gå deretter til Vis regler kategorien og sett timingen til null som vist på skjermdumpen.

Bla videre nedover på dette skjermbildet, så finner du flere alternativer. Du kan bruke dem hvis du vil vise dette skjemaet på en bestemt side eller et innlegg. Slå den Lagre når du er ferdig.

Trinn 4: Publisere popup-skjemaet

Når du har arbeidet med endringene, klikker du på Ja Nei alternativet på toppen og klikk på activate tab.

Til slutt, gå til publisere fane og slå statusen til bo.

optinmonster, velkomstport, wp velkomstgate, listebygging

Når du er ferdig, kan du gå tilbake til WordPress-oversikten og gå til OptinMonster »Kampanjer. Her ser du kampanjen din. Under det klikket på Rediger utskriftsinnstillinger link. Den vil utvides til å vise noen få alternativer. Merk av i ruten ved siden av Aktiver kampanjen på stedet alternativ.

Klikk til slutt på Lagre innstillinger alternativet på slutten av siden.

Trinn 5: Legge til en kobling for å utløse kontaktskjema-popup

Kopier først OptinMonster-kampanjesluggen. Du kan finne det rett ved siden av kampanjenavnet ditt.

Nå oppretter du en ny side i WordPress eller rediger et innlegg eller side der du vil legge til popup-koblingen eller knappen til kontaktskjemaet. Vi oppretter en ny her. Gå til tekstredigereren og legg til følgende kode. Ikke glem å bytte ut sneglen med din egen snegle.

Kontakt oss

Når det er gjort, traff publisere knappen til høyre. Skjemaet ditt er nå i aksjon. Besøk nettstedet ditt fra front-end, så ser du det.

Vi håper du fant denne artikkelen nyttig. Hvis du vil vite mer om hvordan du oppretter et kontaktskjema med WPForms, er her en detaljert guide.

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