Hur skapar man en anpassad inloggnings- och registreringssida i WordPress?

Att skapa en anpassad inloggnings- och registreringssida i WordPress hjälper dig att ge användarna en smidigare och mer varumärkesbyggd upplevelse. Istället för standardskärmarna i WordPress kan du designa sidor som matchar din webbplats stil och erbjuder bättre användbarhet.

En anpassad konfiguration låter dig också lägga till användbara funktioner som sociala inloggningar, starkare säkerhet, användarroller och personliga meddelanden. Detta gör din inloggningsprocess mer professionell och användarvänlig.

I den här guiden lär du dig de enklaste sätten att bygga och anpassa dina inloggnings- och registreringssidor utan att förstöra din webbplats eller skriva komplex kod.

Steg för att skapa en anpassad inloggnings- och registreringssida på WordPress

En anpassad inloggnings- och registreringssida på WordPress kan vara din biljett till att skapa djupare kontakter med din publik. Låt oss ge oss ut på den här resan tillsammans och upptäcka hur du kan lyfta din webbplats till ett skräddarsytt och interaktivt online-nav.

Skapa anpassad inloggning

Anpassad WordPress-design skapar en skräddarsydd inloggningssida för att ge användare en gateway där de kan ange sina inloggningsuppgifter för att komma åt sina konton. Till skillnad från vanliga inloggningssidor är anpassade sidor utformade för att matcha webbplatsens stil och varumärke, vilket ger en sömlös användarupplevelse. De kan också innehålla ytterligare funktioner, såsom förbättrade webbsäkerhetsåtgärder eller fält för att samla in specifik användarinformation under registreringen. Det är en personlig metod för användare att logga in och säkert interagera med en WordPress-webbplats.

Läs mer: Hur lägger man till WordPress reCAPTCHA för webbplatssäkerhet?

Så här går du tillväga för att skapa en med WP Forms –

Steg 1: Installera WPForms-pluginet

Först måste du installera och aktivera WPForms-pluginet.

Kom ihåg att om du vill använda funktionerna för användarregistrering och inloggning behöver du WPForms Pro eller en senare version. Pro-versionen levereras med tillägget Användarregistrering, vilket gör det superenkelt att skapa anpassade inloggningssidor.

När du har installerat WPForms, gå bara till WPForms ⟶ Tillägg.

Fortsätt skrolla nedåt tills du ser tillägget för användarregistrering. Klicka på knappen för att installera det och låsa upp nästa steg.

Aktivera WordPress underhållsläge för att hålla besökare borta medan du navigerar genom hela processen utan avbrott.

Läs mer: Outsourcing av WordPress-underhållsuppgifter för att maximera effektiviteten

Klara att köra! Nu skapar vi vårt helt nya anpassade inloggningsformulär.

Steg 2: Skapa ett anpassat WordPress-inloggningsformulär

När WPForms-installationen är klar är det dags att skapa ett nytt WordPress-inloggningsformulär som återspeglar vår webbplats unika utseende och känsla.

Gå till WPForms ⟶ Klicka på Lägg till ny för att börja

Därefter kommer du till WPForms mallvalsskärm. Tack vare tillägget för användarregistrering kan du komma åt flera specialiserade mallar med unika funktioner, som illustreras nedan.

När formuläret öppnas i formulärbyggaren kommer du att märka att det innehåller fält för användarnamn, lösenord och kom ihåg mig, vilket gör det till en ganska omfattande anpassad inloggningslösning.

Fältet Kom ihåg mig är unikt och endast tillgängligt i den här mallen. Det låter användare logga in automatiskt när de återvänder till din webbplats efter att ha använt det här formuläret. Du kan behålla mallen som den är eller lägga till mer.

Vi visar dig hur du gör det i nästa steg.

Intressant läsning: Topp 5 oumbärliga formulärplugins för WordPress

Steg 3: Lägg till en varumärkesbild i ditt inloggningsformulär

Med WPForms kan du enkelt redigera mallar eller skapa nya formulär. Vi kan till exempel lägga till varumärkesprofilering i vårt inloggningsformulär för att göra det unikt.

Ett sätt är att infoga en rubrikbild som representerar vårt varumärke. För att göra det, dra och släpp Innehållsfältet högst upp i formuläret, precis under titeln.

När du har lagt till fältet Innehåll i ditt formulär klickar du på det för att komma åt dess fältalternativ.

Dags att bli kreativ! Gå till WYSIWYG-redigeraren på vänster sida och börja lägga till bilder eller skapa anpassad text till ditt formulär.

Låt oss krydda upp vårt WordPress-inloggningsformulär med lite varumärkeskänsla. Klicka bara på Lägg till media för att ladda upp en snygg anpassad bild.

Gör dig redo för lite media-pizza. Om du klickar på knappen Lägg till media visas WordPress Media Gallery- modalfönstret. Det är din signal för att ladda upp bilder, precis som du normalt gör i WordPress.

Kom ihåg att trycka på Spara -knappen för att säkra affären!

Vidare läsning: Bästa WordPress kontaktformulärsplugins

Steg 4: Anpassa dina inställningar för anpassat inloggningsformulär

Nu ska vi dyka ner i inställningarna för inloggningsformuläret. Det gör att vi kan hantera formulärets knapp och sidan dit våra besökare hamnar efter att de skickat in det.

För att börja, klicka på Inställningar som finns på vänster sida av formulärbyggaren.

När du går in i inställningarna Allmänt redan vald, vilket är precis där vi behöver vara.

I de allmänna inställningarna skrollar du bara ner till texten för knappen Skicka och uppdaterar den till att läsa Logga in.

Dessutom har vi justerat bearbetningstexten för knappen Skicka för att informera användarna om att inloggningen pågår. Du kan gärna anpassa meddelandet.

Nu ska vi gå till Bekräftelser .

Här kan du välja åtgärden efter att inloggningsformuläret har skickats in. Du kan dirigera användare till WordPress administratörsområde, men att skicka dem tillbaka till front-end är mer logiskt för många webbplatser.

I det här fallet omdirigerar vi användarna till startsidan.

Innan vi går vidare finns det ytterligare en inställning att granska.

Scrolla ner till fliken Inställningar i formulärbyggaren så ser du Användarregistrering . Klicka på den för att visa dess alternativ.

Du kan dölja det här formuläret för användare som redan är inloggade genom att ställa knappen i läge "på". Anpassa meddelandet så att det visas istället för formuläret när en användare redan är inloggad med hjälp av textrutan.

Nu är det dags för lite utforskning! Kolla gärna in de andra inställningarna och justera vad du vill. När du är nöjd klickar du bara på Spara högst upp i formulärbyggaren för att spara dina ändringar.

Se även: Hur man installerar WordPress lokalt på Mac

Steg 5: Publicera ditt anpassade inloggningsformulär

Spännande tider! Ditt nyskrivna inloggningsformulär är klart och redo för världen.

Var ska man placera den? Möjligheterna är lika gränslösa som din fantasi:

• Förgylla sidorna med dess närvaro.
• Bädda in det sömlöst i dina inlägg.
• Låt det lysa i sidofältet.
• Eller lägg den tätt i sidfoten.

Härnäst ska vi börja skapa en anpassad WordPress-inloggningssida. Är du redo att börja? Klicka bara Bädda in högst upp i formulärbyggaren!

Här är vad som kommer härnäst –

1. Ett modalfönster kommer att visas som frågar var du vill bädda in ditt formulär. I det här exemplet skapar vi en ny sida. Klicka på Skapa ny sida.
2. Ge nu din sida ett namn. När det är klart klickar du på Nu kör vi.
3. Den här åtgärden tar dig till WordPress blockredigerare med det inbäddade inloggningsformuläret.
4. Det här är ett utmärkt ställe att använda formulärets stylingalternativ i WPForms-blocket för att enkelt anpassa utseendet på dina fält, etiketter och knappar.
5. När du är nöjd med utseendet på ditt anpassade inloggningsformulär klickar du bara på Publicera för att publicera din anpassade inloggningssida.

Det var allt! Din anpassade WordPress-inloggningssida är nu live och redo att användas.

Proffstips: Om du har använt Dölj om inloggad , kom ihåg att du måste logga ut från WordPress för att se ditt färdiga formulär. Annars kommer inloggningsskärmen inte att synas när du är inloggad. Det är ett litet knep för att se till att allt ser rätt ut innan besökarna anländer!

Visste du att? – Nytt CF7 Blocks-plugin tar med block till kontaktformulär 7

Steg 6: Lägg till inloggningsformuläret i din navigeringsmeny

Ah, du har precis lagt sista handen på ditt specialdesignade inloggningsformulär. Utmärkt jobbat!

Nu ska vi se till att den är lättillgänglig för dina besökare. Nyckeln? Att lägga till den i din webbplats navigeringsmeny.

För att komma igång, glida över till din WordPress-instrumentpanel och klicka på Utseende och välj sedan Menyer.

Utseende ⟶ Menyer

Med ett rent svep följer vi nästa steg –

1. Om ditt tema redan har en navigeringsmeny, gå till Utseende och sedan Menyer i din WordPress-instrumentpanel. Markera din inloggningssida i kolumnen till vänster och klicka på Lägg till i meny.
2. Din inloggningssida visas nu på höger sida, tillsammans med andra menyalternativ. Ändra deras ordning genom att dra och släppa om det behövs.
3. Välj sedan var du vill att menyn ska visas. De flesta teman erbjuder upp till 5 visningsplatser, som sidhuvudet eller sidfoten. I det här exemplet lägger vi till det i sidhuvudet, ofta märkt som den primära menyn.
4. Klicka på Primärmenyoch sedan på Spara meny längst ner för att uppdatera den.

Din navigeringsmeny kommer nu att innehålla den nya inloggningssidan. När du har uppdaterat eller skapat menyn, se till att besöka din hemsida för att kontrollera att allt ser bra ut.

5. Om din webbplats fortfarande behöver ha en meny är det liknande att skapa en. Börja med att ge din nya meny ett namn under Menystruktur.

Följ samma steg som ovan för att lägga till inloggningssidan i din navigering. Om du också har skapat ett anpassat formulär för lösenordsåterställning kan du överväga att lägga till det i menyn också.

En annan instruktionsguide: Hur man skapar en webbplats med en sida i WordPress? (3 enkla steg)

Steg 7: Omdirigera WordPress inloggningssida till din anpassade inloggningssida

I det här skedet måste du se till att alla som försöker använda den vanliga WordPress-inloggningssidan skickas till din nya anpassade sida istället.

För att göra detta behöver vi ett plugin som heter WPCode och en liten mängd kodningskunskaper.

WPCode är ett praktiskt plugin som låter dig lägga till din egen kod på din WordPress-webbplats gratis. När du har installerat och aktiverat det, gå till Kodavsnitt, klicka på + Lägg till kodavsnittoch välj Lägg till din anpassade kod för att skapa ett nytt kodavsnitt.

Ge sedan ditt kodavsnitt ett tydligt och lättförståeligt namn på följande skärm. Vi har till exempel döpt det till Omdirigering av inloggningssida.

Klistra sedan in den angivna koden i det angivna området:

add_filter('login_url', function($login_url, $redirect, $force_reauth) { // Ändra din inloggningssidas URL här $login_url = 'https://sulliesflowers.com/login/'; if (!empty($redirect)) { $login_url = add_query_arg('redirect_to', urlencode($redirect), $login_url); } if ($force_reauth) { $login_url = add_query_arg('reauth', '1', $login_url); } return $login_url; }, 10, 3);

Se till att du ersätter https://sulliesflowers.com/login/ med URL:en till din anpassade inloggningssida. Klicka sedan på knappen Spara utdrag för att spara dina ändringar.

Du får ett meddelande om att omdirigeringen har sparats och tillämpats. Aktivera slutligen inställningen högst upp på skärmen för att aktivera ditt kodavsnitt.

Från och med nu kommer användare som försöker logga in att dirigeras till din anpassade sida.

Hur skapar man en användarregistrering i WordPress?

Ett anpassat användarregistreringsformulär är en personlig webbsida där besökare kan registrera sig för att skapa konton på en webbplats. Till skillnad från inloggningssidan, som är för erfarna stammisar, handlar det här formuläret om att välkomna nya ansikten och samla in deras uppgifter för en skräddarsydd upplevelse. Med WP-registreringsformulär kan du strö över lite extra accenter genom att lägga till anpassade fält och göra det till en sömlös del av din webbplats atmosfär.

Ett anpassat registreringsformulär låter dig också bara samla in den information du behöver, vilket håller registreringsprocessen ren och användarvänlig.

En annan instruktionsguide: Hur anpassar man WordPress-sidan för att återställa lösenord?

Steg 1: Installera WPForms-pluginet

Att installera pluginet är det första steget. Se till att investera i WPForms Pro-planen, eftersom den ger tillgång till tillägget för användarregistrering, som vi använder för att enkelt skapa dynamiska registreringsformulär för din webbplats användare.

Det som är utmärkt med WPForms är att du inte behöver några i HTML, PHPeller CSS för att designa ditt WordPress-registreringsformulär. Med dess intuitiva dra-och-släpp-formulärbyggare kan vem som helst enkelt skapa ett anpassat formulär som är skräddarsytt efter deras behov.

Steg 2: Aktivera tillägget för användarregistrering

Att aktivera tillägget är enkelt eftersom det integreras väl och korrekt med din WordPress-webbplats.

1. Gå till WPForms ⟶ Tillägg från ditt WordPress-administratörsområde.
2. Bläddra igenom listan över tillägg eller skriv användarregistrering i sökfältet för att hitta tillägget för användarregistrering.
3. Klicka på Installera tillägg för att starta installationsprocessen.
4. När tillägget för användarregistrering är installerat ändras statusen till Aktiv. Grattis! Du har aktiverat tillägget för användarregistrering.
5. Med tillägget för användarregistrering klart kan du enkelt börja skapa WordPress-användarregistreringsformulär med WPForms.

Lär dig: Hur man migrerar från Umbraco till WordPress

Steg 3: Skapa ett WordPress-användarregistreringsformulär

Det här steget låter dig i huvudsak sömlöst samla in användarinformation och effektivisera registreringsprocessen på din WordPress-webbplats.

Fortsätt följa –

1. För att skapa ett nytt registreringsformulär, navigera till WPForms ⟶ Lägg till nytt.
2. Du kommer att dirigeras till skärmen för formulärinställningar där du kan namnge ditt formulär och välja en mall.
3. I det här fallet skapar vi WordPress-registreringsformuläret från grunden, men för ett snabbare alternativ kan du också börja med en mall. Klicka på Skapa tomt formulär.

4. Du kommer att befinna dig på formulärbyggarskärmen, med formuläret tomt eftersom vi valde ett tomt formulär.
5. WPForms erbjuder omfattande anpassningsalternativ, inklusive olika anpassade fält som du kan lägga till efter behov. I de kommande stegen kommer vi att utforska dessa registreringsfunktioner.

Steg 4: Anpassa fälten i användarregistreringsformuläret

Låt oss skapa ett elegant registreringsformulär, som håller det enkelt och smidigt med bara de nödvändiga fälten för att snabbt samla in användarinformation. Kortare formulär innebär mindre risk för att användare försvinner. Men enligt vår erfarenhet för övergivna formulär kan du fortfarande fånga upp de där leadsen med WPForms tillägg

Nu ska vi lägga till fältstil i vårt formulär med hjälp av dra-och-släpp-verktyget. Välj helt enkelt ett fält från menyn till vänster och släpp det i formuläret till höger.

Skölj och upprepa tills alla önskade fält är på plats.

För vårt formulär har vi lagt till:

1. Namn
2. E-post
3. Enkelradstext (för den där fina användarnamnsinmatningen)
4. Lösenord

Lägg gärna till fler detaljer i dina formulärfält. Se hur vi har anpassat vårt textfält på en rad för att skriva Användarnamn, angett en maximal teckengräns och till och med lagt till en inmatningsmask för att kontrollera tillåtna tecken för användarnamnet.

För att justera ett fält, klicka på det för att visa Fältalternativ .Under Allmänt kan du justera etiketten, lägga till en beskrivning och till och med markera fältet efter behov.

Sätt igång med hantverk!

Vidare lärande: Umbraco vs WordPress: Att göra rätt val för din innehållshantering

Steg 5: Konfigurera inställningar för WordPress användarregistreringsformulär

Användaraktiveringsmetod

I det här steget konfigurerar vi våra inställningar för WordPress användarregistreringsformulär så att det passar användarflödet efter dina önskemål:

Börja med att klicka på Inställningar ⟶ Användarregistrering. Aktivera sedan alternativet Aktivera användarregistrering .

Här är vad du kan hantera i det här avsnittet:

• Mappa varje formulärfält till dess matchande användarprofilfält

• Välj standardanvändarroll för nya registreringar

• Aktivera e-postmeddelanden för nya registreringar

• Välj bekräftelsesidan som användarna ser efter registrering

Använd rullgardinsmenyerna för att länka varje formulärfält till rätt profilfält. Bläddra sedan till Användarroller och välj en av din WordPress-webbplats fördefinierade roller för nya användare.

Ändra inställningar för ny användarregistrering

Fortsätt skrolla ner förbi inställningarna som nämnts tidigare, så kommer du till avsnittet E-postmeddelanden. Här kan du justera meddelandena för nya användarregistreringar.

Alternativ inkluderar:

• Skicka ett e-postmeddelande till administratören när en ny användare registrerar sig
• Skicka kontoinformation till användaren, och
• Meddela användaren när deras konto har aktiverats

Om du vill anpassa rubriken och innehållet i dessa e-postmeddelanden klickar du bara på knappen "Redigera mall" bredvid varje aviseringstyp.

En annan guide: Hur tar man bort osynliga WordPress-administratörsanvändare?

Redigera registreringsformulär

Förutom att skicka e-postmeddelanden med aviseringar visar WPForms även ett bekräftelsemeddelande till användarna efter att de skickat in formuläret.

Det finns tre typer av bekräftelser att välja mellan:

1. Meddelande: Ett enkelt meddelande visas som bekräftar att formuläret har skickats in.
2. Visa sida: Användare tas till en specifik webbsida på din webbplats för att tacka dem för att de registrerat sig.
3. Gå till URL (omdirigering): Användare omdirigeras till en annan webbplats, till exempel en affiliate -e- handelssajt.

Du kan anpassa dessa bekräftelser genom att gå till Inställningar ⟶ Bekräftelser. I vårt exempel använde vi standardmeddelandetypen men lade till användarinstruktioner. Om du vill att nya användare automatiskt ska loggas in på sitt nya WordPress-konto istället för att se ett tackmeddelande efter att de registrerat sig på din webbplats, spara dina ändringar.

Därefter bäddar vi in ​​och publicerar formuläret på din webbplats.

Steg 6: Lägg till användarregistreringsformuläret på din webbplats

När du har skapat ditt WordPress-användarregistrerings- och inloggningsformulär är det dags att lägga till det på din WordPress-webbplats.

1. Bädda in formuläret:
   • Klicka på Bädda in längst upp till höger på formulärskaparens skärm.
   • Välj Skapa ny sida och ge din nya sida ett namn. Klicka sedan på Nu kör vi.

• WPForms tar dig till din WordPress-redigerare med ditt nya registreringsformulär redan inbäddat.
• Klicka på Publicera när du är redo. Det var allt! Din registreringssida finns nu online på din WordPress-webbplats.

2. Omdirigera standardregistrerings-URL:en för WordPress:
   • Överväg att omdirigera din standardregistrerings-URL för WordPress till din nya anpassade inloggningssida.
   • Standardinloggningssidan för WordPress kan verka malplacerad på din webbplats eftersom den är för enkel och inte matchar webbplatsens tema.

Nu kan användare registrera sig på din webbplats med hjälp av ditt anpassade registreringsformulär. Efter registreringen kan du ändra deras roller eller andra inställningar från varje användares standardprofilsida i WordPress.

Steg 7: Lägg till din registreringssida i din webbplats meny

När du har publicerat ditt registreringsformulär för nya användare bör du se till att folk lätt kan hitta det. Ett sätt att göra detta är att lägga till det i huvudmenyn på din WordPress-webbplats.

Så här gör du:

1. Gå till Utseende ⟶ Menyer i din WordPress-instrumentpanel.

2. Leta efter din nya registreringssida bland alternativen till vänster och lägg till den i din meny.
3. Om ditt WordPress-tema har en gammal registreringssida i menyn kan du behöva ta bort den. Kom ihåg att spara dina ändringar.
4. Om du behöver hjälp kan du läsa en WordPress-menyhandledning för vägledning.

Och där har du det! Du har lärt dig hur man skapar ett registreringsformulär för WordPress, vilket gör det enkelt för nya användare att registrera sig på din webbplats.

Fortsätt läsa: Topp 10 anledningar att använda WordPress för din webbplats

Fördelar med att skapa en anpassad WordPress-inloggnings- och registreringssida

Att skapa anpassade inloggnings- och registreringssidor för din WordPress-webbplats är ett smart drag som kan ge många fördelar för dig och dina användare. Att ta kontroll över denna viktiga aspekt av din webbplats kan förbättra den övergripande användarupplevelsen, stärka din varumärkesidentitet och till och med förbättra säkerhetsåtgärderna.

Varumärkesbyggande

Att anpassa dina inloggnings- och registreringssidor är som att ge din virtuella ytterdörr en välbehövlig makeover. Med kreativ stil kan du sömlöst integrera ditt varumärkes bländande logotyp, signaturfärgschema och trendiga typografi direkt. Denna konsekventa varumärkesprofilering förstärker omedelbart din webbplats unika identitet och skapar en sammanhängande och minnesvärd upplevelse för varje besökare som går genom dörren.

Tips för att få ut det mesta:

• Inkludera ditt varumärkes logotyp och färgschema
• Bibehåll ett enhetligt utseende och känsla på alla sidor
• Stärk din varumärkesidentitet och bygg förtroende

Läs mer: 5 tips för varumärkesbyggande med låg budget

Förbättrad användarupplevelse

Standardsidorna för inloggning och registrering i WordPress är enkla och saknar visuell tilltalning. Genom att anpassa dessa sidor kan du skapa en mer engagerande och användarvänlig upplevelse för dina besökare.

Tips för att få ut det mesta:

• Designa ett visuellt tilltalande och intuitivt gränssnitt
• Förbättra den övergripande estetiken och användbarheten
• Erbjud en smidig och trevlig upplevelse för dina användare

Läs mer: Varför är dålig UX en mardröm för ditt företag?

Ökad säkerhet

Anpassade inloggnings- och registreringssidor låter dig implementera ytterligare säkerhetsåtgärder, såsom tvåfaktorsautentisering, captcha-verifiering eller lösenordsstyrkeindikatorer. Detta extra skyddslager kan bidra till att minska potentiella säkerhetsrisker och skydda din webbplats från obehörig åtkomst.

Tips för att få ut det mesta:

• Lägg till extra säkerhetsfunktioner som tvåfaktorsautentisering
• Implementera captcha-verifiering för att förhindra botattacker
• Tillämpa mer robusta lösenordskrav för förbättrad säkerhet

Läs mer: 10 bästa WordPress-skannrar för skadlig kod och säkerhet

Integration med tredjepartsverktyg

Anpassade inloggnings- och registreringssidor kan sömlöst integreras med tredjepartsverktyg och tjänster, såsom inloggningar för sociala medier, e-postmarknadsföringsplattformar eller CRM-system (Customer Relationship Management). Denna integration kan effektivisera processer för användarintroduktion och datahantering.

Sömlösa integrationer är avgörande för medlemswebbplatser eftersom de förlitar sig på korrekt användardata, automatiserade arbetsflöden och enkel onboarding.

Tips för att få ut det mesta:

• Aktivera inloggningsalternativ för sociala medier för enkelhets skull
• Integrera med e-postmarknadsföringsplattformar för sömlösa kampanjer
• Koppla till CRM-system för effektiv datahantering

Läs mer: Topp 10 projektledningsverktyg för webbbyråer

Slutsats

Att skapa en anpassad inloggnings- och registreringssida i WordPress hjälper dig att leverera en renare, mer varumärkesanpassad och mer användarvänlig upplevelse. Med rätt verktyg kan du anpassa designen, förbättra säkerheten och få inloggningsprocessen att kännas professionell och smidig.

Några enkla förändringar bidrar i hög grad till att forma hur användare interagerar med din webbplats, vilket gör dina inloggningssidor både funktionella och välkomnande.

Vanliga frågor