Hur man skapar en WordPress Login Popup Modal (Steg för steg)

Vill du lägga till en WordPress login popup modal på din site?

En modal login popup allow användare att snabbt logga in på din website utan att lämna den sida de för närvarande viewar. Detta förbättrar användarupplevelsen och engagemanget på din website.

I den här artikeln visar vi dig hur du enkelt skapar en WordPress login popup modal.

Varför skapa en WordPress Login Popup Modal?

If you run an online store, membership website, or sell online courses, then you likely allow users to register and logging into your website.

När användare klickar på login-länken kommer de vanligtvis till standard WordPress login page eller en annan customize login page på din website. När användarna är inloggade redirectas de igen till en annan page.

Med en modal login popup kan du visa formuläret utan att skicka användare till en annan page. När de är inloggade kan du redirecta användarna till vilken page du vill.

En modal popup för login är snabbare och förbättrar upplevelsen för användarna på din website. En snabbare och bättre användarupplevelse kan öka din försäljning och konvertering.

Med detta sagt, låt oss ta en titt på hur man enkelt skapar en modal login popup i WordPress. Vi kommer att visa dig två metoder för att göra det, med hjälp av ett gratis plugin och premium tillägg.

Klicka bara på länkarna under för att hoppa vidare till din önskade metod:

Metod 1: Skapa en modal login popup med hjälp av Login / Signup Popup

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

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

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

Under Allmänna Settings kan du aktivera registrering, automatiskt logga in användare eller registrera dig och hantera återställning av password.

Förutom det låter pluginet dig också select den WordPress användarroll som kommer att tilldelas nyregistrerade användare. Som standard kommer det att tilldela rollen ”Prenumerant”.

Om du rullar ner ser du fler Settings. You kan till exempel add to en redirect URL när en användare loggar in eller registrerar sig.

När du har gjort ändringarna, glöm inte att clicka på knappen ”Save”.

Därefter kan du byta till tabben ”Styling” och editera din login/signup popup modal. Pluginet låter dig ändra popupens position, bredd, höjd, bakgrundsfärg, textfärg och mer.

Efter det kan du också customize formulärfälten i popup modal.

Gå bara till Login/Signup Popup ” Fält från din WordPress dashboard. Här kan du aktivera olika formulärfält, editera deras etiketter, göra dem till obligatoriska fält och mycket mer.

Förutom det finns det också ett alternativ att add to fler fält till din login/signup popup.

Klicka bara på knappen ”+ Add Field” högst upp och välj ytterligare formulärfält som ska läggas till i din modala popup för login.

När du har customize formulärfälten kan du nu add to den modala login popupen till din website. Pluginet erbjuder olika sätt att lägga till popupen på din site.

1. Add Login Popup Modal till menyer

Först kan du heada till Appearance ” Menus från din WordPress dashboard.

Efter det kan du se Login/Signup Popup menu items. Välj bara de objekt du vill visa och klicka på knappen ”Add to menu”.

För mer details, vänligen se vår guide om hur du lägger till en navigation menu i WordPress.

2. Add Login Popup Modal som ankar länkar

Därefter kan du add to #login eller #register i slutet av din website URL och placera login popup som en intern länk.

Till exempel kommer din URL att se ut så här:

<a href="www.mywebsite.com#login">Login</a>

För att göra detta kan du edit en post eller en page.

När du är i content editor klickar du på de tre punkterna och väljer alternativet ”Edit as HTML”.

Därefter kan du add to den interna länken till ankartexten för login.

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

3. Använd shortcodes för att add to Login Popup Modal

Ett annat sätt att lägga till login/signup popup är genom att använda shortcodes.

You can simply enter the [xoo_el_action] shortcode anywhere on your site to create a link/button to open the popup.

Till exempel, head to Appearance ” Widgets och lägg till ett shortcode widget block för att visa login popup i sidebaren på din webbplats.

När du är klar klickar du bara på knappen ”Update”.

Efter det kan du besöka din website för att se login popup i action.

Metod 2: Skapa en modal inloggning popup med WPForms & OptinMonster

För den här metoden behöver du tilläggen WPForms och OptinMonster.

WPForms är det bästa pluginet för kontaktformulär för WordPress. Du behöver åtminstone deras Pro-plan för att få tillgång till addon för registrering av användare.

OptinMonster är den bästa WordPress popup plugin och lead generation programvara på marknaden. Det hjälper dig att konvertera website-besökare till prenumeranter och customers. Du behöver åtminstone planen Pro för att få tillgång till funktionen MonsterLinks som används i den här artikeln.

För mer detaljer, se vår kompletta OptinMonster-recension.

Använda WPForms för att skapa ett inloggningsformulär för användare

Först måste du installera och aktivera WPForms plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du heada till WPForms ” Settings från din WordPress dashboard och enter licensen.

You can find the key in your WPForms account area.

Därefter måste du gå till WPForms ” Addons page för att installera och aktivera User Registration Addon.

När du har aktiverat addon måste du gå till WPForms ” Add New page för att skapa ett nytt formulär.

WPForms erbjuder flera förbyggda templates att välja mellan. Först anger du ett namn för ditt formulär och väljer sedan templaten ”User Login Form”. Sedan kan du klicka på knappen ”Use Template”.

Denna template för inloggningsformulär har fält för email och password som fungerar på samma sätt som WordPress standardinloggningsformulär.

You can drag and drop any additional fields from the left side of the screen as needed.

Klicka sedan på Password-fältet så visas alternativen för fältet på vänster sida.

You can add the code given under in the description box of the Password field to display options like forget password and user registration.

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>.

Efter det måste du klicka på knappen ”Save” för att lagra dina ändringar.

Därefter klickar du bara på knappen ”Embed”.

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

Gå vidare och välj alternativet ”använd en shortcode”. Den kommer att visas som en link i fönstret, eller ej som en knapp.

You should now see an embed code for your form.

Kopiera nu denna shortcode och save den för att använda den senare.

Ditt login-formulär är klart. Nu kan du gå vidare och skapa den modala popupen med OptinMonster.

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

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

Därefter måste du installera och aktivera OptinMonster plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Plugin fungerar som en kontakt mellan din WordPress webbplats och OptinMonster.

Efter aktivering bör du se välkomstvyn. Gå vidare och klicka på knappen ”Anslut ditt befintliga konto”.

Ett nytt fönster öppnas nu.

Gå vidare och klicka på knappen ”Anslut till WordPress”.

You är nu redo att skapa en login popup modal.

Gå bara till OptinMonster i WordPress admin area och klicka på knappen ”Skapa din första kampanj”.

Din OptinMonster dashboard kommer att öppnas på en new page.

När du väl är inne måste du select ’Popup’ som kampanjtyp för att add your login-formulär till popupen.

Därefter måste du välja en kampanj template.

OptinMonster erbjuder förbyggda templates så att du snabbt kan välja och edit en.

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

När du har enter ett namn klickar du på knappen ”Start Building”.

När du klickar på knappen kommer du att omdirigeras till OptinMonster kampanjbyggare.

Du kan lägga till olika block i din template från menyn till vänster. Gå vidare och add WPForms blocket.

Efter det bör du se WPForms blockalternativ i menyn till vänster.

Du kan välja det formulär för login som du just har skapat i dropdown-menyn ”Form Selection”.

Om du inte ser ditt formulär, välj bara alternativet ”Add Shortcode Manually” och enter den shortcode som du kopierade tidigare när du skapade formuläret i WPForms.

Oroa dig inte om du inte kan få en preview av din form builder i kampanjbyggaren. Formuläret kommer att visas när you publicerar kampanjen.

Därefter kan du heada till tabben ”Display Rules”. OptinMonster erbjuder kraftfulla inriktningsalternativ.

Härifrån väljer du displayregeln ’MonsterLink™’ (On Click)’.

Efter det kommer du att se MonsterLink som displayregel.

Gå vidare och klicka på knappen ”Kopiera MonsterLink-kod”. Du kommer att behöva den här länken senare.

Du kan nu gå till tabben ”Publicera” högst upp.

Ändra helt enkelt statusen för Publicera från ”Draft” till ”Publicera”.

Glöm inte att klicka på knappen ”Save” högst upp och avsluta kampanjbyggaren.

Därefter kommer du att se WordPress Output Settings för din kampanj. Se bara till att statusen är inställd på ”Publicerad” under sektionen ”Synlighet och status”.

Se till att klicka på knappen ”Save” högst upp i högra hörnet och gå till section ”Publicera” för att göra statusen aktiv.

Lägga till modal login i WordPress

Därefter kan du skapa en new WordPress page eller edit en befintlig.

När du är i content editor klickar du på knappen ”+” och add to ett Custom HTML block.

Efter det måste du klistra in MonsterLink i det anpassade HTML-blocket. Det ska 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>

Eftersom detta är ett formulär för login och ej en email optin, kommer du att vilja ändra länktexten i koden som säger ”Prenumerera nu” till vad du vill. För denna tutorial ändrade vi det till ”logga in eller registrera dig”, som du kan se i code snippet ovan.

Du kan också add to koden ovan till dina WordPress menyer, sidebar, eller någon annan area på din site.

Se till att save ändringarna till WordPress page och besök your site för att se modal login i action.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en login popup modal i WordPress. Du kan också kontrollera vår kompletta lista över de bästa pluginsen för login page i WordPress och vår guide om hur man skapar en landing page med WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.