Så här skapar du ett customize-registreringsformulär för användare i WordPress

Om you runs a WordPress membership site or another website that allows user registration, then a seamless registration experience is very important. Standardformuläret för registrering av användare i WordPress är dock lite grundläggande.

Eftersom detta standardformulär inte har några alternativ för customize och visar WordPress-varumärket kan det kollidera med designen på din website.

Här på WPBeginner förstår vi vikten av att upprätthålla ett konsekvent varumärke i alla kontaktpunkter, inklusive registrering av användare.

Genom att lägga till ett customiserat registreringsformulär kan du förbättra användarupplevelsen för nya besökare, säkerställa en sammanhängande varumärkesidentitet och till och med öka antalet användarregistreringar på din WordPress website.

Den här artikeln guidar you genom processen att skapa customize front-end registreringsformulär i WordPress.

Varför add to ett customize registreringsformulär för användare i WordPress?

Standard WordPress registreringssida för användare visar WordPress varumärke och logga, som ej matchar resten av din WordPress website design.

Creating a new user registration form allows you to add the registration form on any page of the site and helps you deliver a more consistent user experience during the registration process.

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 ditt företag.

Det kan handla om ytterligare kontaktuppgifter, alternativ eller annan information som är relevant för din sites funktionalitet.

Om du t.ex. anordnar en händelse kan ett registreringsformulär hjälpa dig att samla in viktiga detaljer från deltagarna, t.ex. begränsningar i kosten, alternativ till sessioner eller särskilda krav.

Med ett customize-registreringsformulär för användare kan du också redirecta användare vid registrering. Du kan även displayed ytterligare fält för användarens profil, kombinera dem med ett custom front-end login-formulär och ansluta det till din tjänst för e-postmarknadsföring.

Med detta sagt, låt oss ta en titt på hur man skapar ett customize registreringsformulär för användare i WordPress, steg för steg.

Så här skapar du ett customize registreringsformulär för användare i WordPress

Det enklaste sättet att skapa ett customize registreringsformulär för användare är genom att använda WPForms. Det är det bästa pluginet för kontaktformulär i WordPress som allow you att skapa all typer av new formulär i WordPress.

WPForms är mycket lätt att använda och erbjuder en drag and drop form builder, så att du kan customize ditt registreringsformulär hur du vill. Tillägget integreras också med populära e-postmarknadsföringstjänster och betaltjänster som gillar PayPal.

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

Efter aktivering, heada över till WPForms ” Settings page från WordPress admin sidebar för att enter your license key.

You can get this key from your account on the WPForms website.

När nyckeln har kontrollerats måste du besöka WPForms ” Addons page från WordPress dashboard.

Härifrån, leta reda på ”User Registration Addon” och klicka sedan på knappen ”Install Addon” under den.

WPForms installerar och aktiverar nu Addon för användarregistrering på din WordPress site. Du kommer att se statusen ändras till ”Active” när addon har installerats.

You är nu redo att skapa ditt customize registreringsformulär för användare.

För att göra detta, besök WPForms ” Add New page från admin sidebar.

Du kommer då till page ”Select a Template”, där du kan börja med att skriva in ett namn på det formulär du ska skapa.

När du har gjort det, leta bara upp templaten ”User Registration Form” och klicka på knappen ”Use Template” under den.

Detta kommer att starta WPForms form builder på din vy. Här kommer du att notera fältalternativen i den högra colonnen och ett formulär preview i det vänstra hörnet av skärmen.

Nu kommer standardregistreringsformuläret redan att ha fälten namn, användarnamn, password, email och kort bio add to it.

Du kan dock enkelt add to fler fält i formuläret från den vänstra panelen och även dra fälten för att ändra ordern på dem.

Tillägget låter dig också edit varje formulärfält. För att göra detta klickar du bara på ett formulärfält och du kommer att se ”Field Options” visas i den vänstra colonnen.

Härifrån kan du ändra fältets etikett, editera dess format, lägga till en description, ställa in villkorlig formatering, ändra fältet till obligatoriskt med mera.

När du är klar, glöm inte att klicka på knappen ”Save” för att spara dina Settings.

Note: Om du vill skicka email notifications till registrerade användare, kan du se vår tutorial om hur du skickar bekräftelsemail efter WordPress formulärinlämning.

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

WPForms allow också att du ansluter fält för customize användarprofil till ditt registreringsformulär för användare.

För att göra detta måste du add to ytterligare fält i profilen för användare till din WordPress site, och det enklaste sättet att göra detta är att använda en WordPress plugin.

I denna tutorial använder vi pluginet Advanced Custom Fields. WPForms funktion för ompekning av fält fungerar dock med alla plugins som använder standard WordPress custom fields för att add to och lagra metadata för användare.

Först måste du installera och aktivera pluginet Advanced Custom Fields. För mer detaljer kan du läsa vår guide för nybörjare om hur man installerar ett plugin för WordPress.

När du aktiverat pluginet, heada över till ACF ” Fältgrupper page från WordPress admin sidebar. Här klickar du på knappen ”+ Add Field Group”.

Du kommer då till page ”Add New Field Group”, där du kan börja med att skriva en titel för fältgruppen.

För denna tutorial kommer vi att skapa ett customze-fält för social media account details.

Därefter rullar du ner till dropdown-menyn ”Fälttyp” och väljer en typ för det customize-fältet. You can select text, numbers, images, files, checkboxes, URLs, passwords, and much more.

När du har gjort det kan du enter en Field Label som kommer att visas på profilens page.

Om du till exempel vill add to ett customizer-fält för att samla in Facebook-profiler kan du namnge fältetiketten ”Facebook”.

You’ll notice that the Field Name will be automatically generated as you enter a field label, but you can edit it.

Därefter byter du till tabben ”Bekräftelse” från sektionen ”Etikett”. Här kan du toggle på ’Required’ switch för att göra det obligatoriskt för användare att fylla i detta custom field innan du skickar in formuläret.

Du kan även ställa in en teckenuppsättning för fältet härifrån.

När du har gjort det är det bara att växla till tabben ”Presentation” högst upp.

You can now add instructions for authors, placeholder text for the field, wrapper attributes, med mera.

Efter det kan du också add to villkorlig logik till det customize-fält som du skapar genom att byta till ”Conditional Logic” tabs från högst upp.

När du har gjort dina ändringar rullar du ner till ”Location Rules” section. Härifrån måste du skapa en uppsättning regler för att avgöra vilka vyer som ska använda dessa customze-fält.

Eftersom vi vill att det här fältet ska visas för alla användares profiler måste vi selecta alternativet ”User Role” i dropdown-menyn till vänster.

Efter det lämnar du dropdown-menyn i mitten som den är och väljer sedan alternativet ”All” från dropdown-menyn till höger.

Nu kommer den customize-fältgrupp som vi skapar att visas för alla profiler för användare.

Gå sedan till tabben ”Group Settings” högst upp.

När du väl är där kontrollerar du att fältgruppen är aktiv genom att slides toggle från No till Yes.

När du har gjort det kan du också lägga till andra customize-fält i fältgruppen genom att clicka på knappen ”Add Field” högst upp på sidan.

Om du till exempel vill skapa flera fält för sociala medier kan du klicka på knappen ”Add Field” och börja customize fältet för andra plattformar för sociala medier.

Tänk på att alla fält som du skapar kommer att ingå i samma fältgrupp.

När du är klar, glöm inte att klicka på knappen ”Save Changes” högst upp för att spara dina inställningar.

Du har nu publicerat din fältgrupp utan problem.

Nu, för att visa det anpassade fältet du skapade, head över till sidan Användare ” Profil från admin area.

Här kommer du att se dina customize-fält addade längst ner på profilens page.

Nu när du har skapat ett fält för en anpassad användarprofil måste du add to det till det anpassade registreringsformuläret för användare i WPForms.

Efter det måste du också se till att ompeka formulärfältet till customize-fältet så att data lagras på rätt sätt.

För att göra detta, besök WPForms ” All Forms page från WordPress dashboard. Klicka sedan på länken ”Edit” under registreringsformuläret för användare som du just skapade och sparade tidigare.

Detta kommer att öppna ditt formulär i WPForms form builder. När du väl är där drar du helt enkelt ett fält från den vänstra panelen för att add to ditt formulär.

I det här exemplet lägger vi till ett fält för ”Website/URL” i vårt formulär.

När du har lagt till fältet Website/URL klickar du på det för att öppna fältens egenskaper i den vänstra colonnen.

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

Om du vill kan du också add to en description för fältet.

Glöm sedan inte att klicka på knappen ”Save” för att spara ditt formulär.

Därefter måste du klicka på knappen ”Settings” i det högra hörnet för avancerade formulärinställningar och ompekning av fält. På sidan Settings klickar du på tabben ”User Registration”.

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

You will notice that WPForms will automatically map your standard fields like Name, Email, Password, and more.

From Name, välj ditt alternativ för fältgruppsnamn från dropdown-menyn under alternativet ”Website”.

Efter det rullar du ner till sektionen ”Custom User Meta”.

Du kan enter namnet på den fältgrupp du skapade tidigare i alternativet custom meta key och sedan selecta det custom formfält du vill mappa det med från dropdown-menyn.

Note: Om du vill skicka email notifications till registrerade användare kan du läsa vår tutorial om hur du skickar bekräftelsemail efter WordPress formulärinlämningar.

Slutligen klickar du på knappen ”Save” högst upp till höger på vyn för att spara dina settings.

Lägga till ditt customize registreringsformulär för användare i WordPress

WPForms gör det superenkelt att add formulär till dina posts, pages och sidebar widgets i WordPress.

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

När du är där klickar du på knappen ”Add Block” (+) högst upp till vänster för att öppna menyn för block.

Härifrån letar du upp och addar WPForms blocket till page/post.

Efter det kan du välja ditt customize registreringsformulär från dropdown-menyn i själva blocket.

Du kommer nu att se din Preview av registreringsformuläret i WordPress editor. Gå vidare och publicera din post eller page för att se det customize registreringsformuläret i action.

Add the Custom User Registration Form till sidebaren

WPForms tillåter dig också att add to ditt custom registreringsformulär för användare i din sidebar. Besök bara sidan Appearance ” Widgets från admin area och klicka på knappen ’Add Block’ (+).

Detta öppnar blockmenyn där du kan lägga till WPForms-blocket i sidebar-fliken på sidan ”Widgets”.

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

När du är klar, glöm inte att klicka på knappen ”Update” för att lagra dina settings.

Now you can visit your website to view the user registration form in the website sidebar.

Add to det anpassade registreringsformuläret för användare i hela Site Editor

Om du använder ett block-baserat WordPress theme, då kommer du inte att ha widgets page. För att add to registreringsformuläret i sidofältet med Full Site Editor (Redigering av hela webbplatsen), head över till sidan Appearance ” Editor från admin sidebar.

När du är där klickar du på knappen ”Add Block” (+) högst upp till vänster för att öppna menyn för block.

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

Därefter väljer du registreringsformuläret från dropdown-menyn i själva blocket.

Slutligen klickar du på knappen ”Save” för att spara dina Settings.

Besök nu din website för att view det customze formuläret för registrering av användare in action.

Bonus: Skapa en customize login page med ditt registreringsformulär

När du addar ditt registreringsformulär till en page på din website kommer WordPress som standard att använda ditt temas layout, template och stil.

Du kan dock skapa en fantastisk registreringssida from scratch med hjälp av en WordPress landing page builder.

SeedProd är den bästa page buildern för WordPress. Det är användarvänligt och erbjuder en drag and drop-byggare som hjälper dig att skapa alla typer av landing pages. Pluginet erbjuder också förbyggda templates och massor av utvalda funktioner.

Först måste du installera och aktivera SeedProd plugin på din site. För mer detaljerade instruktioner kan du läsa vår tutorial om hur du installerar ett plugin för WordPress.

Vid aktivering, besök SeedProd ” Settings page för att enter plugin license key. Du hittar den här informationen i ditt account på SeedProd website.

Efter att ha kontrollerat din nyckel är du nu redo att skapa en login page med ditt registreringsformulär.

För att börja, head över till SeedProd ”Landing Pages” -skärmen från admin sidebar och klicka sedan på knappen ”Ställ in en login page”.

Detta tar dig till vyn ”Välj en ny sidmall”, där du kan välja en förgjord template för login page som du ska skapa.

När du har valt en template visas ett popup-fönster.

Du måste nu ange ett namn för din landing page och en URL. När det är gjort går du vidare och klickar på knappen ”Save and Start Editing Page”.

Därefter kan du edit din login page med hjälp av SeedProd’s drag and drop landing page builder.

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

You can for instance add a headline, image, video, or social sharing block to your landing page.

När du har gjort det, head över till Advanced Blocks section från den vänstra kolumnen.

Härifrån väljer du blocket ”Contact Form” och placerar det på din login page.

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

Därefter klickar du på WPForms block på din login page för att skriva dess inställningar i den vänstra colonnen.

Du kommer nu att se ett alternativ för att ”Select a Form” i menyn.

Gå vidare och välj ditt registreringsformulär från insticksprogrammet i menyn.

Du bör nu se en preview av ditt registreringsformulär i landing page builder.

Slutligen, glöm inte att clicka på knappen ”Save” för att store dina ändringar.

Efter det kan du heada till tabben ”Connect” och integrera olika tjänster för e-postmarknadsföring med ditt registreringsformulär.

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

Därefter kan du gå till fliken ”Page Settings” och ändra sidans status till Publicera under de allmänna inställningarna.

Du kan till och med edit sidans rubrik och URL och aktivera SeedProd-länken från den här tabben.

Om du vill optimera din page för search engines går du till tabs sökmotorsoptimering.

Härifrån kan du konfigurera settings genom att enter en sökmotorsoptimering, description, social media thumbnail, med mera.

SeedProd låter dig också add code snippets under inställningarna för Scripts. När du är nöjd med inställningarna klickar du bara på knappen ”Save” högst upp och stänger page builder.

Efter det, head över till SeedProd ”Landing Pages” -skärmen och toggle omkopplaren under Login Page för att göra din sida ’Aktiv’.

You can now visit your login page to see the registration form in action.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till ett customize-registreringsformulär för användare i WordPress. Du kanske också vill se vår guide för nybörjare om hur man väljer den bästa webbplatsbyggaren eller våra toppval för de bästa tilläggen för användarregistrering i 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.