Hur man skapar ett anpassat registreringsformulär för användare i WordPress

Om du driver en WordPress-medlemswebbplats eller en annan webbplats som tillåter användarregistrering, är en smidig registreringsupplevelse mycket viktig. Men du kanske har märkt att standardformuläret för WordPress-användarregistrering är lite grundläggande.

Eftersom detta standardformulär inte har några anpassningsalternativ och visar WordPress-varumärket, kan det krocka med din webbplats design.

Här på WPBeginner förstår vi vikten av att upprätthålla en konsekvent varumärkesprofil över alla kontaktpunkter, inklusive användarregistrering.

Genom att lägga till ett anpassat registreringsformulär kan du förbättra användarupplevelsen för nya besökare, säkerställa en sammanhållen varumärkesidentitet och till och med öka användarregistreringarna på din WordPress-webbplats.

Den här artikeln guidar dig genom processen att skapa anpassade registreringsformulär på front-end i WordPress.

Varför lägga till ett anpassat användarregistreringsformulär i WordPress?

Standardsidan för användarregistrering i WordPress visar WordPress-varumärket och logotypen, vilket inte matchar resten av din WordPress-webbplatsdesign.

Att skapa ett nytt användarregistreringsformulär låter dig lägga till registreringsformuläret på vilken sida som helst på webbplatsen och hjälper dig att leverera en mer konsekvent användarupplevelse under registreringsprocessen.

Med ett registreringsformulär kan du samla in specifik information från dina användare som kan vara unik för din WordPress-blogg eller verksamhet.

Detta kan inkludera ytterligare kontaktuppgifter, preferenser eller annan information som är relevant för din webbplats funktionalitet.

Om du till exempel anordnar ett evenemang, hjälper ett registreringsformulär dig att samla in viktig information från deltagarna, såsom kostrestriktioner, sessionspreferenser eller särskilda krav.

Ett anpassat användarregistreringsformulär låter dig också omdirigera användare vid registrering. Du kan till och med visa ytterligare användarprofilfält, kombinera dem med ett anpassat inloggningsformulär på front-end och koppla det till din e-postmarknadsföringstjänst.

Med det sagt, låt oss titta på hur man skapar ett anpassat användarregistreringsformulär i WordPress, steg för steg.

Hur man skapar ett anpassat registreringsformulär för användare i WordPress

Det enklaste sättet att skapa ett anpassat användarregistreringsformulär är att använda WPForms. Enligt vår mening är det bästa WordPress-plugin för kontaktformulär. Det låter dig skapa alla typer av nya formulär i WordPress.

På WPBeginner använder vi WPForms för alla våra behov av kontaktformulär, samt vår årliga undersökning. Vi har bara haft goda erfarenheter av verktyget. Vi uppskattar särskilt att dess dra-och-släpp-byggare gör det superanvändarvänligt.

För att lära dig mer, se vår WPForms-recension.

Först måste du installera och aktivera WPForms-pluginet. För mer detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan WPForms » Inställningar från WordPress administratörs sidomenyn för att ange din licensnyckel.

Du kan hämta denna nyckel från ditt konto på WPForms webbplats.

När nyckeln är verifierad måste du besöka sidan WPForms » Tillägg från WordPress-instrumentpanelen.

Leta här reda på ‘User Registration Addon’ och klicka sedan på knappen ‘Install Addon’ under den.

WPForms kommer nu att installera och aktivera tillägget User Registration på din WordPress-webbplats. Du kommer att se statusen ändras till 'Aktiv' när tillägget är installerat.

Du är nu redo att skapa ditt anpassade registreringsformulär för användare.

För att göra detta, besök sidan WPForms » Lägg till ny från administratörs sidofältet.

Detta leder dig till sidan 'Välj en mall', där du kan börja med att skriva ett namn för formuläret du ska skapa.

När du har gjort det, leta helt enkelt upp mallen 'Användarregistreringsformulär' och klicka på knappen 'Använd mall' under den.

Detta startar WPForms formulärbyggare på din skärm. I den högra kolumnen kommer du att märka fältalternativen och en förhandsgranskning av formuläret i det vänstra hörnet av skärmen.

Standardregistreringsformuläret har redan fälten namn, användarnamn, lösenord, e-post och kort biografi tillagda.

Du kan dock enkelt lägga till fler fält i formuläret från den vänstra panelen och även dra fälten för att ordna om deras ordning.

Pluginet låter dig också redigera varje formulärfält. För att göra detta, klicka helt enkelt på ett formulärfält, så ser du 'Fältalternativ' dyka upp i den vänstra kolumnen.

Härifrån kan du ändra fältetiketten, redigera dess format, lägga till en beskrivning, ställa in villkorlig formatering, ändra fältet till obligatoriskt och mer.

När du är klar, glöm inte att klicka på knappen 'Spara' för att lagra dina inställningar.

Notera: Om du vill skicka e-postmeddelanden till registrerade användare kan du se vår handledning om hur man skickar bekräftelsemejl efter inlämning av WordPress-formulär.

Lägga till anpassade fält i ditt anpassade registreringsformulär för användare

WPForms låter dig också koppla anpassade användarprofilfält till ditt användarregistreringsformulär.

För att göra detta behöver du lägga till ytterligare fält för användarprofiler på din WordPress-webbplats, och det enklaste sättet att göra detta är att använda ett WordPress-plugin.

I den här handledningen använder vi pluginet Advanced Custom Fields. Dock kommer fältmappningsfunktionen i WPForms att fungera med alla plugin som använder standard WordPress anpassade fält för att lägga till och lagra användarmedadata.

Först måste du installera och aktivera pluginet Advanced Custom Fields. För mer information kan du se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter pluginaktivering, gå till sidan ACF » Fältgrupper från WordPress admin sidofält. Klicka här på knappen '+ Lägg till fältgrupp'.

Detta kommer att dirigera dig till sidan 'Lägg till ny fältgrupp', där du kan börja med att skriva en titel för fältgruppen.

För den här handledningen kommer vi att skapa ett anpassat fält för detaljer om sociala mediekonton.

Skrolla sedan ner till rullgardinsmenyn 'Fälttyp' och välj en typ för det anpassade fältet. Du kan välja text, siffror, bilder, filer, kryssrutor, URL:er, lösenord och mycket mer.

När du har gjort det, ange en fältetikett som kommer att visas på profilsidan.

Om du till exempel vill lägga till ett anpassat fält för att samla in Facebook-profiler, kan du namnge fältetiketten 'Facebook'.

Du kommer att märka att fältnamnet genereras automatiskt när du anger en fältetikett, men du kan redigera det.

Byt sedan till fliken ‘Validering’ från sektionen ‘Etikett’. Här kan du aktivera omkopplaren ‘Obligatoriskt’ för att göra det obligatoriskt för användare att fylla i detta anpassade fält innan formuläret skickas in.

Du kan till och med ställa in en teckengräns för fältet härifrån.

När du har gjort det, byt bara till fliken ‘Presentation’ högst upp.

Du kan nu lägga till instruktioner för författare, platshållartext för fältet, omslutande attribut och mer.

Därefter kan du även lägga till villkorsstyrd logik till det anpassade fältet du skapar genom att växla till fliken ‘Villkorsstyrd logik’ högst upp.

När du har gjort dina ändringar, scrolla ner till avsnittet 'Placeringsregler'. Härifrån måste du skapa en uppsättning regler för att bestämma vilka skärmar som kommer att använda dessa anpassade fält.

Eftersom vi vill att detta fält ska visas för alla användarprofiler, måste vi välja alternativet 'Användarroll' från rullgardinsmenyn till vänster.

Lämna därefter rullgardinsmenyn i mitten som den är och välj sedan alternativet 'Alla' från rullgardinsmenyn till höger.

Nu kommer den anpassade fältgruppen som vi skapar att visas för alla användarprofiler.

Byt sedan till fliken 'Gruppinställningar' högst upp.

När du är där, se till att fältgruppen är aktiv genom att skjuta omkopplaren från Nej till Ja.

När du har gjort det kan du även lägga till andra anpassade fält i fältgruppen genom att klicka på knappen ‘Lägg till fält’ högst upp på sidan.

Om du till exempel vill skapa flera fält för sociala medier kan du klicka på knappen 'Lägg till fält' och börja anpassa fältet för andra sociala medieplattformar.

Tänk på att alla fält du skapar kommer att vara en del av samma fältgrupp.

När du är klar, glöm inte att klicka på knappen ‘Spara ändringar’ högst upp för att spara dina inställningar.

Du har nu framgångsrikt publicerat din fältgrupp.

Nu, för att se det anpassade fält du skapade, gå till sidan Användare » Profil från adminområdet.

Här ser du dina anpassade fält tillagda längst ner på profilsidan.

Nu när du har skapat ett anpassat användarprofilfält måste du lägga till det i det anpassade användarregistreringsformuläret i WPForms.

Därefter måste du också se till att mappa formulärfältet till anpassat fält så att data lagras korrekt.

För att göra detta, besök sidan WPForms » Alla formulär från WordPress-instrumentpanelen. Klicka sedan på länken 'Redigera' under registreringsformuläret för användare som du just skapade och sparade tidigare.

Detta öppnar ditt formulär i WPForms formulärbyggare. När du är där, dra helt enkelt ett fält från den vänstra panelen för att lägga till det i ditt formulär.

I det här exemplet lägger vi till ett fält av typen ‘Webbplats/URL’ i vårt formulär.

När du har lagt till fältet Webbplats/URL, klicka på det för att öppna fältets egenskaper i den vänstra kolumnen.

Gå nu vidare och ändra fältetiketten från Webbplats/URL till namnet på fältgruppen som du skapade.

Om du vill kan du också lägga till en beskrivning för fältet.

Glöm sedan inte att klicka på knappen ‘Spara’ för att spara ditt formulär.

Därefter måste du klicka på knappen 'Inställningar' i det högra hörnet för avancerade formulärinställningar och fältmappning. På sidan Inställningar klickar du på fliken 'Användarregistrering'.

WPForms kommer nu att visa dina formulärfält och en rullgardinsmeny under dem för att välja WordPress-registreringsfältet för att mappa det med.

Du kommer att märka att WPForms automatiskt kommer att mappa dina standardfält som namn, e-post, lösenord och mer.

Härifrån väljer du ditt fältgruppsnamn från rullgardinsmenyn under alternativet 'Webbplats'.

Scrolla sedan ner till sektionen ‘Anpassad användarmetadata’.

Du kan ange namnet på fältgruppen du skapade tidigare i alternativet för anpassad metanyckel och sedan välja det anpassade formulärfältet du vill mappa det med från rullgardinsmenyn.

Notera: Om du vill skicka e-postmeddelanden till registrerade användare kan du se vår handledning om hur man skickar bekräftelsemejl efter inlämning av WordPress-formulär.

Klicka slutligen på knappen 'Spara' i det övre högra hörnet av skärmen för att spara dina inställningar.

Lägga till ditt anpassade formulär för användarregistrering i WordPress

WPForms gör det superenkelt att lägga till formulär i dina WordPress-inlägg, sidor och sidofältswidgetar.

Först måste du öppna ett befintligt eller nytt inlägg/en sida där du vill lägga till det anpassade registreringsformuläret.

När du är där, klicka på knappen 'Lägg till block' (+) längst upp till vänster för att öppna blockmenyn.

Härifrån, leta upp och lägg till WPForms-blocket på sidan/inlägget.

Därefter kan du välja ditt anpassade registreringsformulär från rullgardinsmenyn i själva blocket.

Du kommer nu att se en förhandsgranskning av ditt registreringsformulär i WordPress-redigeraren. Fortsätt och publicera ditt inlägg eller din sida för att se det anpassade registreringsformuläret i aktion.

Lägg till det anpassade registreringsformuläret för användare i sidofältet

WPForms låter dig också lägga till ditt anpassade registreringsformulär för användare i ditt sidofält. Besök helt enkelt sidan Utseende » Widgets från administratörsområdet och klicka på knappen ‘Lägg till block’ (+).

Detta öppnar blockmenyn där du kan lägga till WPForms-blocket till sidofältsfliken på sidan ‘Widgets’.

Därefter väljer du helt enkelt registreringsformuläret för användare från rullgardinsmenyn i WPForms-blocket.

När du är klar, glöm inte att klicka på knappen 'Uppdatera' för att lagra dina inställningar.

Nu kan du besöka din webbplats för att se användarregistreringsformuläret i webbplatsens sidofält.

Lägg till anpassat användarregistreringsformulär i Full Site Editor

Om du använder ett blockbaserat WordPress-tema, då har du inte widgetsidan. För att lägga till registreringsformuläret i sidofältet med Full Site Editor (FSE), gå till sidan Utseende » Redigerare från sidomenyn i adminpanelen.

Klicka sedan på knappen ‘Lägg till block’ (+) längst upp till vänster för att öppna blockmenyn.

Härifrån måste du hitta och lägga till WPForms-blocket på din föredragna plats på din webbplats.

Välj därefter registreringsformuläret från rullgardinsmenyn i själva blocket.

Klicka slutligen på knappen 'Spara' för att spara dina inställningar.

Besök nu din webbplats för att se det anpassade användarregistreringsformuläret i aktion.

Bonus: Skapa en anpassad inloggningssida med ditt registreringsformulär

När du lägger till ditt registreringsformulär på en sida på din webbplats kommer WordPress som standard att använda ditt temas layout, mall och stil.

Men, du kan skapa en fantastisk registreringssida från grunden med hjälp av en WordPress landningssidbyggare.

SeedProd är den bästa sidbyggaren för WordPress. Den är användarvänlig och erbjuder en dra-och-släpp-byggare som hjälper dig att skapa alla typer av landningssidor. Pluginet erbjuder också förbyggda mallar och massor av anpassningsfunktioner.

Några av våra partner varumärken har använt det för att skapa anpassade teman, vilket gör deras webbplatser visuellt tilltalande och får uppskattning från deras användare. För att lära dig mer kan du läsa vår SeedProd-recension.

Först måste du installera och aktivera pluginet SeedProd på din webbplats. För detaljerade instruktioner kan du se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan SeedProd » Inställningar för att ange pluginets licensnyckel. Du hittar denna information på ditt konto på SeedProd-webbplatsen.

Efter att ha verifierat din nyckel är du nu redo att skapa en inloggningssida med ditt registreringsformulär.

För att börja, gå till skärmen SeedProd » Landningssidor från administratörs sidofältet och klicka sedan på knappen ‘Konfigurera en inloggningssida’.

Detta tar dig till skärmen 'Välj en ny sidmall', där du kan välja en förgjord mall för inloggningssidan som du håller på att skapa.

Efter att ha valt en mall visas ett popup-fönster.

Du måste nu ange ett namn för din landningssida och en URL. När det är gjort, klicka på knappen 'Spara och börja redigera sidan'.

Därefter kan du redigera din inloggningssida med SeedProds dra-och-släpp-byggare för landningssidor.

För att göra detta, välj ett block från menyn till vänster och dra det dit du vill lägga till det på din inloggningssida.

Till exempel kan du lägga till en rubrik, bild, video eller en block för social delning på din landningssida.

När du har gjort det, gå till avsnittet Avancerade block från den vänstra kolumnen.

Härifrån väljer du blocket 'Kontaktformulär' och placerar det på din inloggningssida.

Vi föreslår att du tar bort befintliga block för användarnamn och lösenord från mallen så att användarna inte behöver ange inloggningsuppgifterna två gånger.

Klicka sedan på WPForms-blocket på din inloggningssida för att öppna dess inställningar i den vänstra kolumnen.

Du kommer nu att se ett alternativ för att 'Välj ett formulär' i menyn.

Välj här ditt registreringsformulär från rullgardinsmenyn.

Du bör nu se en förhandsgranskning av ditt registreringsformulär i landningssidbyggaren.

Slutligen, glöm inte att klicka på knappen 'Spara' för att lagra dina ändringar.

Därefter kan du gå till fliken 'Anslut' och integrera olika e-postmarknadsföringstjänster med ditt registreringsformulär.

SeedProd integreras enkelt med populära e-postmarknadsföringstjänster som Drip, Constant Contact, AWeber och fler, vilket kan hjälpa till att förbättra din e-postlista.

Gå sedan till fliken 'Sidinställningar' och ändra sidstatus till Publicera under Allmänna inställningar.

Du kan till och med redigera sidtiteln och URL:en samt aktivera SeedProd-länken från denna flik.

Om du vill optimera din sida för sökmotorer, gå till fliken SEO.

Härifrån kan du konfigurera inställningarna genom att ange en SEO-titel, beskrivning, miniatyrbild för sociala medier och mer.

SeedProd låter dig också lägga till kodavsnitt under inställningarna för Skript. När du är nöjd med inställningarna klickar du helt enkelt på knappen 'Spara' högst upp och stänger sidbyggaren.

Därefter går du till skärmen SeedProd » Landningssidor och växlar omkopplaren under Inloggningssida för att göra din sida 'Aktiv'.

Du kan nu besöka din inloggningssida för att se registreringsformuläret i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till ett anpassat registreringsformulär för användare i WordPress. Du kanske också vill se vår ultimata guide till att använda WordPress-formulär eller våra toppval för bästa WordPress-plugins för användarregistrering.

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