Hur man skapar en WordPress-inloggningspopup (steg för steg)

Att lägga till ett popup-fönster för WordPress-inloggning på din webbplats kan göra inloggningen smidigare för dina användare. Det låter besökare logga in utan att lämna sin nuvarande sida, vilket förbättrar deras totala upplevelse.

Vi har sett flera framgångsrika webbplatser använda den här funktionen för att behålla användarnas engagemang och förbättra webbplatsinteraktionen. Det är ett enkelt men effektivt sätt att effektivisera inloggningsprocessen.

I den här artikeln går vi igenom stegen för att skapa en WordPress-inloggningspopup-ruta.

Varför skapa en modal inloggningsruta i WordPress?

Du bör skapa en inloggningspopup eftersom det gör inloggningen snabbare och smidigare för dina användare utan att skicka dem till en separat sida.

På de flesta webbplatser, när någon klickar på inloggningslänken, omdirigeras de till standardinloggningssidan för WordPress eller en anpassad inloggningssida. Efter inloggning omdirigeras de igen.

Denna fram-och-tillbaka-process kan kännas långsam och störa användarupplevelsen. En modal inloggningspopup löser detta problem. Den öppnar inloggningsformuläret i ett litet fönster på samma sida.

Användare kan logga in direkt, och du kan vidarebefordra dem vart du vill efter inloggning. Processen känns snabbare och mer professionell, vilket kan förbättra användarupplevelsen och till och med öka konverteringarna.

Med det i åtanke visar vi dig hur du enkelt skapar en modal inloggningspopup i WordPress med både ett gratis plugin och premiumverktyg. Du kan hoppa till den metod som fungerar bäst för dig:

Redo? Nu kör vi!

Metod 1: Skapa ett popup-fönster för inloggning med Login/Signup Popup

För den första metoden kommer vi att använda pluginet Login/Signup Popup, ett gratis plugin som låter dina användare enkelt logga in eller registrera sig på din webbplats.

Först måste du installera och aktivera pluginet Login/Signup Popup. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Login/Signup Popup » Settings från WordPress adminpanel.

Under 'Allmänna' inställningar kan du aktivera registrering, automatiskt logga in användare efter att de registrerat sig och hantera lösenordsåterställningar.

Dessutom låter pluginet dig välja den WordPress-användarroll som kommer att tilldelas nyregistrerade användare. Som standard tilldelas rollen 'Prenumerant'.

Om du skrollar ner ser du fler inställningar. Du kan till exempel lägga till en omdirigerings-URL när en användare loggar in eller registrerar sig.

Glöm inte att klicka på knappen 'Spara' om du har gjort några ändringar.

Därefter kan du växla till fliken 'Stil' och redigera ditt popup-fönster för inloggning/registrering. Pluginet låter dig ändra popupens position, bredd, höjd, bakgrundsfärg, textfärg och mer.

Därefter kan du också anpassa formulärfälten i popup-modulen.

Gå helt enkelt till Login/Signup Popup » Fält från din WordPress-instrumentpanel. Här kan du aktivera olika formulärfält, redigera deras etiketter, göra dem obligatoriska fält och mer.

Dessutom finns det också ett alternativ att lägga till fler fält i ditt popup-fönster för inloggning/registrering.

Klicka helt enkelt på knappen ‘+ Lägg till fält’ högst upp och välj ytterligare formulärfält att lägga till i din inloggningsmodalpopup.

När du har anpassat formulärfälten kan du nu lägga till popup-fönstret för inloggning på din webbplats. Pluginet erbjuder olika sätt att lägga till popup-fönstret på din webbplats.

Lägg till inloggningspopup i menyer

Först kan du gå till Utseende » Menyer från din WordPress-instrumentpanel.

Därefter kan du se menyalternativen 'Inloggning/Registrering Popup'. Välj helt enkelt de objekt du vill visa och klicka på knappen 'Lägg till i menyn'.

För mer information, se vår guide om hur man lägger till en navigeringsmeny i WordPress.

Lägg till inloggningspopup som ankarlänkar

Därefter kan du lägga till #login eller #register i slutet av din webbplats-URL och placera inloggningspopupen som en intern länk.

Till exempel, för att skapa en inloggningslänk, skulle du använda HTML som detta:

<a href="https://www.myawesomesite.com/#login">Login</a>

För att göra detta kan du redigera ett inlägg eller en sida.

När du är i innehållseditor vill du klicka på de 3 prickarna och välja alternativet 'Redigera som HTML'.

Därefter kan du lägga till den interna länken till inloggningsankartexten.

Du kan lära dig mer genom att följa vår guide om hur man lägger till ankarlänkar i WordPress.

Använd kortkoder för att lägga till en inloggnings-popup-modul

Ett annat sätt att lägga till popup-fönstret för inloggning/registrering är genom att använda kortkoder.

Du kan helt enkelt ange kortkoden [xoo_el_action] var som helst på din webbplats för att skapa en länk/knapp för att öppna popupen.

Till exempel kan du gå till Utseende » Widgets och lägga till ett 'Kortkod'-block för att visa inloggnings-popupen i sidofältet på din webbplats.

När du är klar klickar du helt enkelt på knappen 'Uppdatera'.

Nu kan du besöka din webbplats för att se inloggningspopupen i aktion.

Metod 2: Skapa en modal inloggningspopup med WPForms & OptinMonster

Denna metod är utmärkt för dem som vill ha mer kontroll över designen och beteendet hos sin inloggningspopup.

Att använda WPForms och OptinMonster tillsammans ger dig kraftfulla designalternativ, avancerade visningsregler (som att visa popupen efter att en användare klickar på en specifik länk) och bättre integration med e-postmarknadsföringstjänster.

WPForms är det bästa WordPress-pluginet för kontaktformulär, och du behöver minst deras Pro-plan för att komma åt tillägget 'Användarregistrering'.

OptinMonster är det bästa WordPress popup-pluginet på marknaden. Det hjälper dig att konvertera webbplatsbesökare till prenumeranter och kunder. På WPBeginner har vi använt det flera gånger för att skapa interaktiva popups och har haft en utmärkt erfarenhet. För mer information, se vår kompletta OptinMonster-recension.

Tänk på att du behöver minst Plus-planen för att komma åt verktygets MonsterLinks-funktion som vi visar i den här artikeln.

Använda WPForms för att skapa ett formulär för användarinloggning

Först, låt oss installera och aktivera WPForms-pluginet. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till WPForms » Inställningar från din WordPress-instrumentpanel och ange licensen.

Du hittar nyckeln i ditt WPForms-kontoområde.

Låt oss sedan gå till WPForms » Tillägg för att installera och aktivera 'User Registration Addon'.

Efter att ha aktiverat tillägget vill du gå till WPForms » Lägg till ny och skapa ett nytt formulär.

På nästa skärm måste du först namnge ditt formulär.

Sedan väljer du en förbyggd formulärmall från mallgalleriet. Du kan använda sökfältet för att enkelt hitta mallen 'Användarinloggningsformulär'.

När du har hittat den kan du klicka på knappen ‘Använd mall’.

Den här inloggningsformulärmallen har fält för e-post och lösenord som fungerar på liknande sätt som standardinloggningsformuläret i WordPress.

Du kan dra och släppa ytterligare fält från skärmens vänstra sida efter behov.

Därefter kan du klicka på fältet 'Lösenord', så visas fältalternativen på vänster sida.

Du kan lägga till koden nedan i beskrivningsrutan för fältet 'Lösenord' för att visa alternativ som 'glömt lösenord' och 'användarregistrering'.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Därefter behöver du klicka på knappen 'Spara' för att lagra dina ändringar, och du är redo att publicera formuläret.

För att komma igång kan du helt enkelt klicka på knappen 'Bädda in'.

Ett popup-fönster öppnas med alternativ för att lägga till ditt inloggningsformulär.

Fortsätt och välj alternativet 'använd en kortkod'. Det kommer att visas som en länk i fönstret, inte en knapp.

Du bör nu se en inbäddningskod för ditt formulär.

Här vill du kopiera kortkoden och spara den för senare användning.

Använda OptinMonster för att skapa en modal popup

Vid det här laget är din inloggningsformulär redo. Nästa steg är att skapa popup-fönstret med OptinMonster.

Först måste du besöka OptinMonster-webbplatsen och registrera ett konto.

Därefter måste du installera och aktivera OptinMonster-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Pluginet fungerar som en koppling mellan din WordPress-webbplats och OptinMonster.

Efter aktivering bör du se välkomstskärmen. Klicka på knappen ‘Anslut ditt befintliga konto’.

Ett nytt fönster öppnas nu.

Klicka helt enkelt på knappen 'Anslut till WordPress'.

När du är ansluten är du redo att skapa din modal popup.

Gå helt enkelt till OptinMonster i WordPress adminområde och klicka på knappen 'Skapa din första kampanj'.

På nästa skärm väljer du en kampanj och en mall.

Eftersom vi skapar en popup-modal, låt oss välja ‘Popup’ som kampanjtyp.

När det gäller mallar erbjuder OptinMonster massor av förbyggda mallar så att du snabbt kan anpassa en om det behövs.

När du har valt en mall öppnas ett popup-fönster. Det kommer att be dig att ge ett namn till din kampanj.

Efter att ha angett ett namn kan du klicka på knappen 'Starta bygge'.

När det är gjort kommer du att omdirigeras till OptinMonster-kampanjbyggaren.

Du kan lägga till olika block i din mall från menyn till vänster. Så, fortsätt och lägg till WPForms-blocket.

Därefter bör du se WPForms-blockalternativen i menyn till vänster.

Du kan välja inloggningsformuläret som du just skapade från rullgardinsmenyn ‘Formulärval’.

Om du inte ser ditt formulär, välj helt enkelt alternativet ‘Lägg till kortkod manuellt’ och ange kortkoden du kopierade tidigare när du skapade formuläret i WPForms.

Oroa dig inte om du inte kan förhandsgranska ditt formulär i kampanjbyggaren; formuläret kommer att visas när du publicerar kampanjen.

Därefter kan du gå till fliken 'Visningsregler'. OptinMonster erbjuder kraftfulla målinriktningsalternativ.

Härifrån vill du välja visningsregeln ‘MonsterLink™’ (Vid klick).

Efter att ha valt alternativet bör du se MonsterLink som visningsregel.

Klicka på knappen 'Kopiera MonsterLink-kod' och spara länken någonstans säkert. Du kommer att behöva den senare.

Nu är du redo att göra kampanjen live.

Gå helt enkelt till fliken 'Publicera' högst upp i kampanjbyggaren. Härifrån kan du ställa in 'Publiceringsstatus' till 'Publicera'.

När du har gjort det, glöm inte att klicka på knappen 'Spara' i det övre högra hörnet för att spara dina ändringar.

Lägga till inloggningspopup i WordPress

Nu kan du skapa en ny WordPress-sida eller redigera en befintlig.

När du väl är i innehållsredigeraren kan du klicka på '+'-knappen och lägga till ett 'Anpassad HTML'-block.

Därefter behöver du klistra in MonsterLink i anpassningsblocket för HTML. Det bör se ut ungefär så här:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Som standard kommer länktexten i din MonsterLink-kod att lyda 'Prenumerera nu', eftersom den ofta används för e-postanmälningar.

Här är ett exempel på standardkoden:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Eftersom detta är ett inloggningsformulär vill du ändra den texten. För den här handledningen ändrade vi den till 'logga in eller registrera', som du kan se i kodavsnittet nedan.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Du kan också lägga till koden ovan i dina WordPress-menyer, sidofält eller något annat område på din webbplats.

Se bara till att spara ändringarna på WordPress-sidan och besök din webbplats för att se inloggningsfönstret i aktion.

Bonustips: Spåra användarresan i WordPress leadformulär

Nu när du har lärt dig hur man skapar en inloggningspopup i WordPress, låt oss titta på hur man spårar användarresor för dina WordPress-formulär.

Detta kan vara särskilt hjälpsamt för ditt inloggningsformulär, eftersom det kan avslöja vilket innehåll användare tittar på precis innan de bestämmer sig för att logga in eller registrera sig. Den informationen kan hjälpa dig att förbättra din webbplats navigering och användarupplevelse.

Att veta vad som uppmuntrar användare att slutföra formulär låter dig återskapa den processen för att få fler leads och utöka din verksamhet. Medan Google Analytics kan visa viss användaraktivitet, kopplar den inte beteendet direkt till den specifika användare som skickade in formuläret.

Det är där WPForms kommer in. Det är ett populärt formulärbyggarplugin som inkluderar en 'Användarresa'-tillägg (tillgängligt med Elite-planen), som låter dig se var användare kom ifrån, vilken väg de tog och hur mycket tid de spenderade på varje sida innan de skickade in ett formulär.

Om du är intresserad av att lära dig mer, hänvisa gärna till vår guide om hur man spårar användarresor på WordPress leadformulär.

Vanliga frågor om att skapa en WordPress-inloggnings-popup-modul

Här är några frågor som ofta ställs av våra läsare om att lägga till en inloggnings-popup i WordPress:

Kan jag anpassa designen på min WordPress-inloggningspopup?

Ja, absolut. Båda metoderna vi har gått igenom erbjuder anpassningsalternativ för att matcha ditt webbplats varumärke. Du kan vanligtvis ändra färger, typsnitt, storlekar och lägga till din egen logotyp för att skapa ett sömlöst utseende.

Fungerar en modal inloggningsruta på mobila enheter?

Ja. Moderna popup-plugins som OptinMonster är byggda för att vara helt responsiva. Det innebär att din inloggningsruta automatiskt anpassas för att se bra ut på stationära datorer, surfplattor och smartphones.

Saknar inloggnings-popup-fönster ner en webbplats?

När du använder välkodade och optimerade plugins som WPForms och OptinMonster bör det inte finnas någon märkbar påverkan på din webbplats prestanda. Dessa verktyg är utformade för att vara lätta och ladda effektivt.

Kan jag lägga till sociala inloggningsknappar i min popup?

Vissa plugins erbjuder social inloggningsfunktionalitet som en inbyggd eller premiumfunktion. Till exempel stöder proversionen av pluginet Login/Signup Popup sociala inloggningar. Detta kan göra det ännu enklare för användare att logga in.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en inloggningspopup-modul i WordPress. Du kan också kolla in vår kompletta lista över de bästa WordPress inloggningssidans plugins och vår guide om hur man omdirigerar användare efter lyckad inloggning i WordPress.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.