Forminator er en svært god og brukervennlig plugin for å lage «Logg-Inn-skjema» på WordPress nettsiden. – I denne bloggposten vil jeg gå gjennom de viktigste innstillingene.
Forminator finnes både i en gratisversjon og en Pro-versjon som man må betale for. Vi skal imidlertid kun bruke plugin’en til å lage et enkelt «Logg-Inn-skjema», og det er derfor tilstrekkelig å laste inn gratisversjonen.
Installere Forminator-plugin
- Velg Utvidelser > Legg til ny
- I søkefeltet skriver du Forminator Login Form
- Klikk på Installer,
- Klikk deretter på Aktiver
- På bildet til høyre ser du at Forminator har mer enn 200.000 aktive installasjoner, noe som betyr at det er en god utvidelse | plugin.
- Når Forminator er installert, kommer det frem en egen Forminator-meny på kontrollpanelet til WordPress
- Du kan opprette et Login-skjema direkte fra dette bildet ved å velge Forms > Create.
- Når du velger Forms > Create får du muligheten til å velge mellom en rekke forskjellige templates.
- I dette blogginnlegget skal jeg kun gå gjennom Registration og Login Template.
- Klikk på Registration, og deretter Continue.
- Klikk på Create.
Templaten gir deg mulighet til å opprette et registreringsskjema på et innlegg eller en side uten å endre standardinnstillingene for skjemaet til Forminator. Dette er viktig å være klar over slik at vi kan sette opp Redirect-info senere, dvs. hvilken side besøkende skal komme til.
Til venstre finnes en meny der vi kan legge inn alle opplysninger vi trenger for å få registreringsskjemaet til å fungere slik vi ønsker.
I hovedseksjonen på midten ser vi de eksisterende feltene vi får med om vi bruker templaten. Vi kan sette inn nye felt, eller vi kan starte fra scratch og sette inn et felt om gangen slik at skjemaet blir nøyaktig slik vi ønsker det.
For mitt registreringsskjema, ønsker jeg å legge inn litt mer personlige opplysninger, og jeg vil derfor be om at også fornavn og etternavn blir registrert.
Når du klikker på Insert Fields (Sett inn felt) kan du velge mellom en rekke forskjellige felt, som navn, epost, telefonnummer etc. I dette eksempelet skal vi ha navn. Klikk på Name og deretter på Insert Fields. (under til venstre)
Vi blir tatt inn til et valg der vi kan konfigurere nøyaktig hvordan vi ønsker dette feltet skal fungere. (under i midten.)
Som standard er det satt til Single (enkelt), men du kan velge Multiple (mange). Siden det er et navnefelt, blir du bedt om å angi hvilken navneinfo du kommer til å bruke. I dette tilfellet har jeg bestemt meg for å «disable» Prefix og Middle Name. (under til høyre)
Du kan utvide feltene ved å klikke på pilen, og du får flere valt, inkl. spesialtilpasninger, slik at du kan sette opp nøyaktig hvilken angivelse du vil ha for de forskjellige feltene.
Under i midten har jeg satt inn norske benevnelser, dvs. Fornavn og Etternavn.
Under Settings kan du angi hvilke felt som er «required» eller valgfrie. I dette blogginnlegget lar jeg disse valgene stå som Optional | valgfrie.
Klikk på fanen for Styling
Dette er der du kan legge inn CSS-klasser. Om du ønsker å legge inn dine egne, spesialtilpassede CSS-klasser slik at du kan style skjemaet nøyaktig som du ønsker, gjør du det her.
Til slutt kan du velge fanen for Visibility | Synlighet der du kan angi betingelser for hva du ønsker å vise | skjule. Du kan legge til (Add a rule). Men hvis dette skal være et helt vanlig skjema for WordPress, trenger du ikke å angi alle disse betingelsene | valgene. – I denne oppgaven fokuserer jeg på de enkle, vanlige og nødvendige feltene.
Velg Apply.
Et nytt felt har kommet inn. Det er ikke så hensiktsmessig at navnet kommer nederst, så du kan dra feltet og plassere det nøyaktig der du ønsker det skal være, i dette tilfellet under brukernavnet.
Klikk på Save Draft for å forsikre deg om at du får lagre alle endringene du har utført.
Appearance-fanen
- Her kan du gjøre endringer på skjemaets utseende, legge til egendefinerte farger, osv.
- Ved å klikke på de forskjellige fanene, får du opp en forhåndsvisning av hvordan skjemaet vil se ut.
- Om du klikker på fanen for Colours, ser du at du kan endre fargene på det meste. I denne oppgaven bruker jeg standardfargene, da jeg primært er opptatt av funksjonalitet.
Det samme gjelder fontene. Du kan tilpasse dem eller bruke dem som de er.
Du kan gå dypere og mer nøyaktig til verks, og legge inn Customized CSS til hvert enkelt element i skjemaet. Det er altså utallige muligheter til å style skjemaet.
User Registration | Bruker-registrering
Under User Registration | Brukerregistrering kan du tilpasse alle feltene til de relevante WordPress-filene slik at alt er knyttet sammen og virker feilfritt.
User Name og Email fungere som de skal. De er også «required fields» | obligatoriske felt, noe som er angitt ved den røde asteriksen ved siden av feltene.
De siste feltene vi opprettet med Fornavn og Etternavn, er ikke kartlagt/tilknyttet.
Velg feltet for First Name. Klikk på pilen og velg feltet for Fornavn
Velg feltet for Last Name. Finn feltet for Etternavn.
Brukerrolle
Om vi scroller litt nedover, kan vi sette opp hvilken rolle de forskjellige innloggede skal ha.
- «Subscriber | Abonnent» er satt som standard. Disse har ikke skriverettigheter, kun leserettigheter og kan ikke gjøre endringer på siden. Om ønskelig kan vi endre, men det mest praktiske er å la det stå som standard, så kan de som har skriverettigheter få tildelt det manuelt. Personer som logger inn på siden har skjelden mulighet til å foreta endringer. De får kun tilgang til områder som er skjult for alle andre.
- Det er også fullt mulig å bruke epost-aktivisering, slik at vi kan forsikre oss om at eposten er sendt til den personen som vil ha tilgang, og de kan videresendes til en bekreftelsesside der de må bekrefte at de er den de utgir seg for før de får tilgang til områder på nettstedet.
- Lag en bekreftelsesside slik at den kommer opp i listen.
Additional Settings (Flere innstillinger)
- Mange ønsker at brukerne skal være innlogget så snart de har blitt godkjent og satt opp, og velger derfor «Automatically log in newly activated users».
- Du kan også angi hvorvidt du ønsker å skjule skjemaet når brukere er innlogget
- Til slutt kan du skrive en tilpasset melding om at de er innlogget.
Behaviour | Hva skal skje ved innlogging
Etter at de er godkjent som «subscriber | abonnenter» kan du angi hva som skal ske
- De kan få en melding om at «Registreringen var vellykket. Klikk her for å logge inn til kontoen din«
- Brukere kan bli «Redirected (omdirigert) til en spesifikk side.» Skriv i så fall inn URL.
- Du kan angi om skjemaet skal skjules. – men la meldingen om vellykket registrering bli stående.
La resten av valgene under Behaviour være som de er, såfremt du selv ikke ønsker å konfigurere noen av dem.
Email-notification
- Under Email-notification kan vi konfigurere og bekrefte nøyaktig hva eposten skal inneholde, og hvem den er sendt til.
- Dette gir oss mulighet til å velge hvem som skal være administrators epost-adresse, samt bekreftelses-eposten som blir sendt.
- Det finnes en rekke valg vi kan konfigurere.
Under E-mail-notifications kan du angi en rekke valg
- Hvem som skal være mottakere av eposten
- Hvem eposten er fra – navn og epostadresse, hvilken epost svaret skal sendes til, hvem som er mottakere av eposten (CC eller blind Copy)
- Du kan også sette opp en rekke betingelser.
Jeg lar standardinnstillingene stå som de er.
Integrations
Hvis du ønsker å koble dette opp til ulike og forskjellige integrasjoner (det er ganske mange – som Mail Chimp etc.), kan du koble dem opp på Integrations-siden. Når noen registrerer seg på siden, kan du legge dem til slik at de blir mottakere av automatiske eposter som sendes jevnlig.
Settings | Innstillinger
- Her får vi en rekke valg, eksempelvis om vi ønsker å lagre alle dataene.
- I denne oppgaven lar jeg standardinnstillingene stå som de er.
- Save Draft.
Forhåndsvise Registreringsskjemaet
Det siste du skal gjøre er å ta en forhåndsvisning av skjemaet for å se om det ser ut slik du planla.
Som du ser i eksempelet til høyre, har jeg glemt å oversette Username til Brukernavn, samt Email til Epost, og til slutt Password til Passord.
Disse innstillingene kan jeg derfor gå tilbake og endre, slik at skjemaet blir korrekt.
I eksempelet til høyre er skjemaet korrigert.
Publisere registreringsskjemaet
Nå som skjemaet er ferdig, og du har fått sjekket at alt er korrekt, klikker du på PUBLISH for å publisere skjemaet.
Når publiseringen er ferdig, kommer det opp en kode som du kan bygge inn på siden der du måtte ønske det. Du kan også bruke Elementor til å lage en landingsside og bygge inn skjemaet der.
Mitt forminator ID
Jeg har satt det inn i parentes for å forhindre at selve skjemaet kommer opp. Om jeg skal kopiere ID’et til Elementor, er det enkelt å finne det.
(
Opprette et Login-skjema
- I Kontroll-panelet velger du Forminator og klikker på Create.
- I neste bilde, der du blir bedt om å angi Template, velger du Login.
- Gi Templaten et navn, i dette tilfellet Medlems-Login.
Fields | Felt
- Du får opp et bilde – Under menyvalget Fields -der du ser hvilke felt som er medtatt
- Klikk på redigeringshjulet til høyre for Username or Email, og oversett til norsk i dialogboksen som kommer opp.
- Gjenta for feltet kalt Password. Skal være Passord.
- I skjemaet er terminologien oversatt til norsk.
- Klikk på Save Draft.
User Login
- Du har ikke lagt til et eneste felt, så alle feltene er mappet
- Både Brukernavn og Passord er Obligatoriske (required) felt. Se rød asteriks.
- Scroll deg nedover og oversett tekst til norsk; You are already logged in > Du er allerede logget inn.
- Behaviour kan være som den er med standardinnstillingene.
- Email-notifications kan være som den er med standardinnstillingene.
- Integrations kan være som den er med standardinnstillingene.
- Settings kan være som den er med standardinnstillingene.
Du kan alltids foreta endringer senere, om det skulle være nødvendig.
Publisere skjemaet
- Klikk på Publish, og skjemaet blir laget.
- Forminator-koden for Logg inn-skjemaet er
() - Koden settes inn i Elementor om du bestemmer deg for å lage skjemaet der.
