SÄ hÀr lÀgger du till ett kontaktformulÀr popup i WordPress

Creating a contact form popup in WordPress

Nyligen fick vi ett e-postmeddelande frÄn en anvÀndare som frÄgade: Hur placerar jag mitt kontaktformulÀr i en popup för min WordPress-webbplats? Detta Àr en vanlig trend pÄ mÄnga webbplatser dÀr kontaktformulÀret öppnas i en popup nÀr en anvÀndare klickar pÄ kontaktknappen eller lÀnken, istÀllet för att gÄ till en ny sida. I den hÀr artikeln kommer vi att visa dig hur du lÀgger till en popup-kontakt i WordPress som fungerar för nÀstan alla plugin-formulÀr för kontaktformulÀr. Vi visar dig ocksÄ hur du bara öppnar popup-fönstret nÀr en anvÀndare klickar pÄ lÀnken eller knappen för att sÀkerstÀlla bÀsta anvÀndarupplevelse.

För att göra det enkelt har vi skapat en videohandledning om hur du lÀgger till en popup-kontaktformulÀr som du kan se nedan.

Prenumerera pÄ WPBeginner

Men om du bara vill följa textinstruktioner kan du följa vÄr steg-för-steg-handledning om hur du lÀgger till en popup-kontaktformulÀr i WordPress.

Steg 0: Komma igÄng

För denna handledning mÄste du installera och aktivera tvÄ plugins.

Först behöver du OptinMonsters proplan som kommer med Canvas-typ. OptinMonster Àr det bÀsta WordPress-popup-tillÀgget pÄ marknaden och hjÀlper dig att konvertera webbplatsbesökare till prenumeranter och kunder.

DÀrefter mÄste du ha ett kontaktformulÀr-plugin som WPForms, Gravity Forms, Contact Form 7, etc.

För den hÀr artikelns skull kommer vi att anvÀnda den gratis versionen av vÄrt favoritkontaktformulÀr-plugin: WPForms Lite.

Vi antar att du har installerat och aktiverat bÄda pluginsna. Om du behöver hjÀlp, se vÄr steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Ansvarsfriskrivning: WPForms och OptinMonsters skapas bÄda av WPBeginners grundare, Syed Balkhi.

Med detta sagt, lÄt oss gÄ vidare till att skapa ett kontaktformulÀr i WordPress.

Steg 1: Skapa ett kontaktformulÀr med WPForms

Först mÄste du skapa ett nytt kontaktformulÀr med WPForms. Om du redan har skapat ett kontaktformulÀr med WPForm kan du hoppa över det hÀr steget.

Klicka pÄ WPForms-menyn i ditt WordPress-sidfÀlt och klicka sedan pÄ knappen LÀgg till ny.

LÀgga till ett nytt kontaktformulÀr i WordPress med WPForms

Detta kommer att starta Form Builder. Ange bara ett namn pĂ„ ditt formulĂ€r, till exempel, och klicka sedan pĂ„ mallen “Enkel kontaktformulĂ€r” för att fortsĂ€tta.

Skapa ett nytt kontaktformulÀr

Formbyggaren tar dig till fÀltredigeraren. Du kan lÀgga till eller ta bort fÀlt frÄn ditt formulÀr eller ordna om dem genom att dra och slÀppa enkelt.

Redigera kontaktformulÀrfÀlt

NÀr du Àr klar mÄste du klicka pÄ knappen Spara för att lagra dina Àndringar. Ditt kontaktformulÀr Àr nu klart.

Du mÄste besöka WPForms »Alla formulÀr sida. Du hittar ditt kontaktformulÀr dÀr. Bredvid den hittar du en kortkod. Du behöver den hÀr kortkoden i nÀsta steg.

KontaktformulÀr kortkod

Om du behöver mer detaljerade instruktioner, kolla in vÄr steg-för-steg-guide om hur du skapar ett kontaktformulÀr i WordPress.

Nu nÀr vi har ett kontaktformulÀr klart, lÄt oss gÄ vidare till nÀsta steg och skapa en lightbox-popup i WordPress.

Steg 2: Skapa en WordPress-popup med OptinMonster

Det första vi behöver göra Àr att skapa en modal popup med OptinMonster.

Du mÄste skapa ett nytt optin genom att klicka pÄ OptinMonster i WordPress-administratörsmenyn och sedan klicka pÄ Skapa ny optin-knapp.

Ny optin

Detta tar dig till OptinMonster webbplats, dĂ€r du skapar din popup. Först mĂ„ste du ange en titel för din kampanj. Du kan namnge det vad du vill, till exempel ‘KontaktformulĂ€r popup’.

StÀll in din optin

DĂ€refter mĂ„ste du vĂ€lja din webbplats frĂ„n rullgardinsmenyn. Klicka pĂ„ Canvas under alternativet ‘VĂ€lj din design’.

OptinMonster visar tillgÀngliga mallar. För nÀrvarande finns det bara Whiteboard-mall för Canvas. Klicka pÄ mallen för att fortsÀtta.

Detta kommer till Optin Customizer-skÀrmen. Du kommer att mÀrka att Canvas Àr tomt av design. Det görs sÄ, sÄ att du kan lÀgga till nÀstan vad du vill nÀr du anvÀnder kraften i OptinMonster. Du kan lÀgga till ett registreringsformulÀr, Facebook som rutan, enkÀter, kupongkoder, eller som vi gör i det hÀr exemplet ett kontaktformulÀr.

LĂ€gga till anpassad CSS och HTML till canvas optin

Under designfliken kan du vÀlja höjdbredden pÄ duken. Som standard Àr den instÀlld pÄ 700 x 350 px. LÄt oss stÀlla in höjden Ätminstone 520.

Under rutan ‘Anpassad HTML’ anger du kortkoden för ditt kontaktformulĂ€r tillsammans med alla andra anpassade HTML-filer som du kanske vill lĂ€gga till.

HÀr Àr ett exempel pÄ HTML som vi anvÀnde för att skapa modal popup för den hÀr sjÀlvstudien.


<h3>Do You Have Any Questions?</h3>
<p class="tagline">Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p> 
[wpforms id="119"]

Observera att vi ocksÄ har inbÀddat WPForms-kortkoden. Om du anvÀnder ett annat kontaktformulÀr, ersÀtt helt enkelt kortkoden med din kontaktformulÀrskod.

Efter anpassad HTML Àr nÀsta alternativ att ange din anpassade CSS. Under den anpassade CSS-rutan ser du en strÀng av slumpmÀssig text som ser ut sÄ hÀr html div # om-mw7pzo63ch6wpfzi. Detta Àr CSS-prefixet du kommer att anvÀnda i din anpassade CSS.

HÀr Àr CSS som vi anvÀnde för att skapa en modal popup för den hÀr sjÀlvstudien.


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;
    clear: both;
}
html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: 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;
    position: absolute !important;
    left: -9000px !important;
}
    

Oroa dig inte om du inte kan se förhandsgranskningen nu, du kan justera din CSS senare. Du kommer att kunna anvÀnda din webblÀsares verktyg för inspekteringselement för att ta reda pÄ vilka CSS-klasser och vÀljare du vill rikta in dig och sedan lÀgga till anpassad css genom att redigera din optin.

Nu nÀr vi Àr klara med designdelen. LÄt oss byta till konfigurationsfliken i anpassaren.

Ändra bĂ„de ‘Optin Cookie Duration’ och ‘Optin Success Cookie Duration’ till 0. Detta hindrar OptinMonster frĂ„n att stĂ€lla in cookie för varaktighet.

Optin-konfiguration

Du mĂ„ste ocksĂ„ Ă€ndra ‘Optin Success Message’. Som standard tackar det anvĂ€ndare för att registrera sig, men vi anvĂ€nder det pĂ„ ett kontaktformulĂ€r. Du bör Ă€ndra framgĂ„ngsmeddelandet för att tacka anvĂ€ndarna för att de kontaktar dig.

Eftersom vĂ„r popup bara visas nĂ€r en anvĂ€ndare klickar pĂ„ en lĂ€nk eller en knapp betyder det att vi mĂ„ste aktivera manuell utlösning. Markera rutan under “Ladda pĂ„ manuell utlösare?” alternativ.

Ladda pÄ manuell avtryckare

Klicka pÄ knappen Spara för att lagra dina optininstÀllningar och klicka sedan pÄ stÀngningsknappen för att avsluta anpassaren.

Steg 3: LÀgga till popup pÄ din WordPress-webbplats

Byt tillbaka till ditt WordPress-adminomrÄde och klicka pÄ OptinMonster. Du kommer att se din lista över optins. Om du inte ser ditt tillval klickar du pÄ knappen Uppdatera optins.

Optins-sida pÄ din WordPress-webbplats

Klicka pÄ lÀnken nedanför ditt val. Detta tar dig till instÀllningar för popup för popup.

Aktivera optin pÄ din webbplats

Först mÄste du markera rutan bredvid och alternativ. Om du inte markerar dessa visas inte popup-fönstret pÄ din webbplats.

BlÀddra ner pÄ sidan sÄ ser du alternativet. Se till att den Àr markerad, annars analyserar OptinMonster inte kortkoderna i din popup.

Aktivera kortkoder i popup

DÀrefter mÄste du ange kortkoden som du har inkluderat i din popup. Detta Àr ditt kortformat för din kontaktformulÀr.

Klicka pÄ spara instÀllningarna för att lagra dina Àndringar.

LÀgga till lÀnk eller knapp till popup-popup-kontaktformulÀr

Först behöver du din OptinMonster optins slug. Klicka pÄ ikonen OptinMonster i ditt WordPress-sidofÀlt. Du kommer att se optin-sluggen bredvid din optin-titel.

Optin snigel

Skapa en ny sida pÄ WordPress eller redigera ett inlÀgg eller en sida dÀr du vill lÀgga till popup-lÀnken eller knappen för kontaktformulÀr. I postredigeraren vÀxlar du till textredigeraren och lÀgger till din popup-lÀnk sÄ hÀr:


<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a>

Glöm inte att ersÀtta data-optin-slug med din egen optin slug.

Spara dina Àndringar och besök ditt inlÀgg / sida. Klicka pÄ lÀnken för att se ditt popup-formulÀr i kontakt.

KontaktformulÀr som visas i en popup-ljusruta

Du kan anvÀnda den hÀr lÀnken var som helst pÄ din WordPress-webbplats. Du kan lÀgga till det pÄ inlÀgg eller sidor, till textwidgets, Àven i dina WordPress-mallar.

Det Àr allt. Vi hoppas att den hÀr artikeln hjÀlpte dig att öka dina omvandlingsfrekvenser genom att anvÀnda en kontaktformulÀr popup i WordPress. Du kanske ocksÄ vill kolla hur OptinMonster hjÀlpte oss att öka vÄra e-postprenumeranter med 600%.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du hittar oss ocksÄ pÄ Twitter och Facebook.