Skjemaer, knapper og widgets

Modul 4: Sider, utseende og funksjoner · Lesetid: 8 minutter

Læringsmål: Etter denne leksjonen kan du sette opp kontaktskjemaet (mottaker, bekreftelse, takkeside, spamkontroll, nyhetsbrev og sendemetode), legge til flytende knapper for WhatsApp og kontakt og bygge inn en widget fra en annen tjeneste. Du vet også når Egen kode og Egen HTML passer.

Nøkkelbegreper: kontaktskjema, mottaker, bekreftelsese-post, takkeside, captcha, dobbel påmelding, sendemetode, flytende knapp, widget, innebyggingskode, samtykke, Egen kode, Egen HTML

Kontaktskjemaet: to steder

Et skjema på nettsiden din består av to deler. Selve skjemaet, med feltene en besøkende fyller ut, ligger på en side. Du legger det inn med seksjonen Kontakt (via Blokker eller Legg til seksjon) eller via chatten. Hva som skjer når noen klikker på send, stiller du inn under Innstillinger > Skjemaer. Det panelet stiller du alltid inn selv; chatten gjør ikke det.

Skjemaet har alltid feltene navn, e-post og melding. Via chatten legger du til ekstra felt, høyst åtte: et tekstfelt, en nedtrekksliste (for eksempel "Innendørs eller utendørs?"), e-post, telefon, et langt tekstfelt, en dato eller et tall. Et felt for å sende med en fil eller et bilde finnes ikke. Vil Schildersbedrijf Example få bilder av jobben, skriver de i takketeksten: "Send gjerne bilder til e-postadressen vår."

Viktig: på den gratis siden uten pakke er skjemaet synlig, men nedtonet, og det sender ingen e-post. Skjemaer sender først på ordentlig når siden din ligger i en AI Builder-pakke. Du kan likevel gjøre klar innstillingene nedenfor allerede nå; da tas de i bruk med en gang.

Innstillinger > Skjemaer

Panelet har fem blokker.

Motta meldinger. Under Send meldinger til fyller du inn e-postadressen som utfylte skjemaer skal gå til. Lar du feltet stå tomt, går de til e-postadressen for kontoen din hos WebOké. Fyll det inn med vilje. Under Emne for e-posten velger du emnet (tomt: "Ny melding via nettsiden din"). Under Etter sending velger du Vis en takkemelding med din egen tekst, eller Send videre til en side: en takkeside som du lager selv og holder utenfor menyen (leksjon 4.1). Da kan du senere måle hvor ofte skjemaet blir sendt.

Send via. Hvordan e-posten blir sendt. Serveren til WebOké virker med en gang, med noreply@weboke.site som avsender. Din egen e-postadresse (SMTP) anbefales: e-posten kommer da fra ditt eget domene og havner sjeldnere i søppelposten. Med Ordne det for meg oppretter byggeren den adressen på domenet ditt. Under din egen e-postadresse kan du også velge en e-posttjeneste, som Postmark, Brevo, Mailgun eller SendGrid. Hvorfor avsenderen betyr så mye, leser du i leksjon 5.3.

Bekreftelse til den besøkende. Slå på Send den besøkende en kopi, så får den besøkende en bekreftelse på e-post. Det er ofte den første meldingen noen får fra deg. Du velger emnet, Teksten din (med {naam} for navnet til den besøkende), Signatur og om den utfylte meldingen skal være med. Byggeren setter teksten din i utseendet til nettsiden din, med logoen din. Med La KI skrive denne teksten får du et forslag.

Stopp spam. Hvert skjema har alltid en usynlig kontroll: et skjult felt og en tidssperre. Den stopper det meste av spam uten at besøkende merker noe. Får du likevel mye spam, velger du en ekstra kontroll, en captcha: Cloudflare Turnstile eller hCaptcha. Du oppretter da en gratis konto hos den tjenesten og fyller inn Site key og Secret key. Slå på en captcha først når det trengs: hvert ekstra steg koster deg besøkende.

Nyhetsbrev. Du kan legge til en avkrysningsboks i skjemaet som besøkende bruker for å melde seg på hos Mailchimp, Laposta, Brevo eller MailerLite. Bare de som selv krysser av, blir lagt til. Alltid med dobbel påmelding: den besøkende bekrefter først via en e-post. Hos Laposta og MailerLite slår du det på selv i tjenesten; byggeren forteller deg hvor. Uten dobbel påmelding kan hvem som helst legge fremmede adresser på listen din.

Ellers: en besøkende kan sende høyst 5 meldinger i timen. Har du en personvernerklæring, står det en lenke til den under skjemaet. Et skjema samler inn personopplysninger; hva du må ordne for det, står i leksjon 7.1.

Fallgruve: test skjemaet selv etter hver endring, fra en annen adresse enn mottakeradressen. Se også i søppelpostmappen, og sjekk at bekreftelsen kommer frem til den "besøkende".

Flytende knapper

Under Innstillinger > Knapper legger du til knapper som blir værende nederst i bildet på hver side, til høyre eller venstre (Hjørne: Nede til høyre eller Nede til venstre).

• WhatsApp-nummer: i internasjonal form, med landskode, for eksempel +47 for et norsk nummer eller +31 for et nederlandsk, og uten 0 foran. Lar du feltet stå tomt, blir det ingen WhatsApp-knapp. En Forhåndsutfylt melding er lov, for eksempel "Jeg vil gjerne ha et tilbud på malerarbeid." Knappen åpner en samtale med nummeret ditt.
• Flytende kontaktknapp: åpner kontaktskjemaet ditt i et vindu. Meldingen kommer inn på samme adresse som skjemaet ditt. Du velger Tekst på knappen.

I forhåndsvisningen står knappene litt høyere enn på den ekte siden din, slik at de ikke havner bak hjelpeknappen til byggeren.

Obs: en WhatsApp-knapp lover raskt svar. Leser du WhatsApp bare om kvelden, bør du heller velge kontaktknappen.

Widgets fra andre tjenester

En widget er en bit av en annen tjeneste på siden din: en YouTube-video, et Google Maps-kart, en timebestilling fra Calendly, Instagram-kontoen din, en Spotify-spilleliste. For mange tjenester holder lenken; byggeren lager spilleren eller skjemaet selv. Eksempler: YouTube, Vimeo, Spotify, Calendly, Google Maps (adressen holder), Google Kalender, Instagram og TikTok (@navnet ditt holder) og Google Skjemaer. For andre tjenester, som Salonized, Trustpilot eller Bandcamp, limer du inn innebyggingskoden: kodebiten du får hos tjenesten for å legge på en nettside.

Slik gjør du det: si det i chatten med lenken ("legg kartet med veibeskrivelse under kontaktblokken, adresse Storgata 1"), lim inn koden i chatten, eller velg seksjonen Widget under Blokker. Byggeren gjenkjenner tjenesten, foreslår høyde og overskrift og advarer hvis noe ikke kommer til å virke. Lar du KI-en legge den inn, er det en instruksjon som koster redigeringer; du ser på forhånd hvor mange. En widget som allerede er lagt inn, endrer du med Rediger kode på blokken i forhåndsvisningen.

Tre ting du bør vite:

1. En widget lastes først etter samtykke. Andres tjenester setter ofte informasjonskapsler eller sporer besøkende. Med cookiebanneret slått på lastes en widget først når den besøkende samtykker til den typen informasjonskapsler. Tjenesten kommer automatisk med i cookiebanneret ditt under "Dette kjører på nettstedet ditt nå". Sjekk deretter også personvernerklæringen din (leksjon 7.1 og 7.2).
2. Google Kalender må være offentlig. En privat kalender kan ingen andre se. Gjør bare en egen kalender offentlig i Google Kalender, med det besøkende får se, aldri din personlige kalender.
3. Usikker kode kommer ikke på siden. Kode som kan sende videre opplysninger om besøkende, skjuler hva den gjør eller laster noe fra et ukjent nettsted, legger ikke KI-en på siden din. Den forklarer hvorfor.

Egen kode og Egen HTML, i hovedtrekk

For viderekomne finnes det to steder.

Egen kode ligger nederst under Innstillinger > Integrasjoner: kode som må stå på hver side, I head på hver side eller Nederst på hver side. For eksempel lasteskriptet til en chattjeneste eller en anmeldelseswidget. Den koden kontrollerer ikke byggeren ("Denne koden kontrollerer vi ikke"). Kjente tjenester holdes tilbake av cookiebanneret til det er gitt samtykke. Kryss bare av for Denne koden er nødvendig for kode som ikke sporer besøkende, for da lastes den med en gang. I forhåndsvisningen i byggeren kjøres ikke egen kode, men på den ekte siden din gjør den det. På den gratis siden virker ikke egen kode. For en måle-ID som Google Analytics bruker du ikke Egen kode, men det faste feltet under Integrasjoner (leksjon 7.2).

Egen HTML er en seksjon under Blokker. Du limer inn egen HTML og eventuelt CSS, og endrer den senere med Rediger HTML. Farger og skrift følger den visuelle profilen din. Skript, iframes og skjemaer virker ikke her; til det bruker du en widget.

Bruk begge bare når det ikke finnes noen annen løsning: kode fra andre er en risiko for hastighet, sikkerhet og personvern.

I byggeren: slik gjør du det

1. Legg seksjonen Kontakt med skjema på kontaktsiden din.
2. Åpne Innstillinger > Skjemaer. Fyll inn Send meldinger til.
3. Velg din egen e-postadresse under Send via, eller la det stå på serveren til WebOké til domenet ditt er klart (leksjon 5.3).
4. Slå på Send den besøkende en kopi og skriv din egen tekst.
5. Velg en takkemelding eller en takkeside under Etter sending.
6. Legg om nødvendig til en WhatsApp- eller kontaktknapp under Innstillinger > Knapper.
7. Publiser siden din og send en testmelding.

Oppsummering

• Skjemaet ligger på en side; hva som skjer med det, ordner du under Innstillinger > Skjemaer.
• Fyll inn Send meldinger til med vilje; velg helst din egen e-postadresse som avsender.
• På den gratis siden sender skjemaet ingen e-post; å sende med en fil går aldri.
• Flytende knapper for WhatsApp og kontakt finner du under Innstillinger > Knapper.
• Widgets lastes først etter samtykke; Egen kode og Egen HTML er for viderekomne.

Quiz

Oppgave

Oppgave D4.3: Kontaktskjemaet ditt og en widget. Sett opp skjemaet ditt helt og legg inn én widget som virkelig tilfører noe.

Sjekkliste:

• [ ] seksjonen Kontakt med skjema på kontaktsiden din;
• [ ] Send meldinger til fylt inn med en adresse du leser daglig;
• [ ] sendemetode valgt, og du forstår hvorfor;
• [ ] bekreftelse til den besøkende med din egen tekst;
• [ ] takkemelding eller takkeside satt opp;
• [ ] én widget lagt inn (for eksempel et kart eller en timebestilling), og du har sett at den står i cookiebanneret;
• [ ] siden publisert og en testmelding sendt (bare med en pakke; på den gratis siden sjekker du innstillingene).

Spørsmål:

1. Hvilken adresse kommer skjemameldingene dine inn på, og via hvilken sendemetode?
2. Hvilken widget valgte du, hva tilfører den den besøkende, og hva ser en besøkende som ikke gir samtykke?
3. Kom testmeldingen frem, og kom bekreftelsen frem til den "besøkende", eller havnet den i søppelposten?

Etter "ferdig" ser du et eksempelsvar: Schildersbedrijf Example sender meldinger til info@example.com via sin egen e-postadresse på domenet; widgeten er et Google Maps-kart med adressen, som først lastes etter samtykke og ellers viser et felt med en knapp for å gi samtykke; testmeldingen kom frem, bekreftelsen også, ikke i søppelposten.

Les mer

• Et kontaktskjema på nettstedet ditt: send feltene på e-post og unngå spam
• Gratis kurs E-post på stell: sette opp og sørge for god levering 7.3: E-post fra nettstedet ditt og skjemaer
• Gratis kurs E-post på stell: sette opp og sørge for god levering 7.2: Samtykke, avmelding og en ren liste
• Bruke klikk for å chatte (WhatsApp-hjelpesenteret): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Google Kalender-hjelp, engelsk): https://support.google.com/calendar/answer/37083