Formulär, knappar och widgets

Modul 4: Sidor, utseende och funktioner · Lästid: 8 minuter

Lärandemål: Efter den här lektionen kan du ställa in kontaktformuläret (mottagare, bekräftelse, tacksida, skräppostskydd, nyhetsbrev och sändningsmetod), lägga till flytande knappar för WhatsApp och kontakt och bädda in en widget från en annan tjänst. Du vet också när Egen kod och Egen HTML passar.

Nyckelbegrepp: kontaktformulär, mottagare, bekräftelsemejl, tacksida, captcha, dubbel registrering, sändningsmetod, flytande knapp, widget, inbäddningskod, samtycke, Egen kod, Egen HTML

Kontaktformuläret: två ställen

Ett formulär på din webbplats består av två delar. Själva formuläret, med fälten som besökaren fyller i, ligger på en sida. Du lägger in det med sektionen Kontakt (via Block eller Lägg till sektion) eller via chatten. Vad som händer när någon klickar på skicka ställer du in under Inställningar > Formulär. Den panelen ställer du alltid in själv. Det gör inte chatten.

Formuläret har alltid fälten namn, e-post och meddelande. Via chatten lägger du till extra fält, högst åtta: ett textfält, en vallista (till exempel "Inomhus eller utomhus?"), e-post, telefon, ett långt textfält, ett datum eller ett tal. Ett fält för att skicka med en fil eller ett foto finns inte. Vill Schildersbedrijf Example få foton av jobbet skriver han i tacktexten: "Skicka gärna foton till vår e-postadress."

Viktigt: på den gratis webbplatsen utan paket syns formuläret men är gråtonat, och det skickar inga mejl. Formulär skickar på riktigt först när din webbplats ligger i ett AI Builder-paket. Du kan ändå förbereda inställningarna nedan, så används de direkt.

Inställningar > Formulär

Panelen har fem block.

Ta emot meddelanden. Vid Skicka meddelanden till fyller du i e-postadressen dit ifyllda formulär ska gå. Lämnar du fältet tomt går de till e-postadressen för ditt konto hos WebOké. Fyll i det medvetet. Vid Ämne för mejlet väljer du ämnesraden (tomt: "Nytt meddelande via din webbplats"). Vid Efter att formuläret skickats väljer du Visa ett tack med din egen text, eller Skicka vidare till en sida: en tacksida som du skapar själv och håller utanför menyn (lektion 4.1). Då kan du senare mäta hur ofta formuläret skickas.

Skicka via. Så här skickas mejlet. WebOkés server fungerar direkt, med noreply@weboke.site som avsändare. Din egen e-postadress (SMTP) rekommenderas: då kommer mejlet från din egen domän och hamnar mer sällan i skräpposten. Med Ordna det åt mig skapar byggaren den adressen på din domän. Under din egen e-postadress kan du också välja en e-posttjänst, som Postmark, Brevo, Mailgun eller SendGrid. Varför avsändaren spelar så stor roll läser du i lektion 5.3.

Bekräftelse till besökaren. Slå på Skicka en kopia till besökaren, så får besökaren ett bekräftelsemejl. Det är ofta det första meddelandet någon får från dig. Du väljer ämnesraden, Din text (med {naam} för besökarens namn), Underskrift och om det ifyllda meddelandet ska följa med. Byggaren lägger din text i webbplatsens utseende, med din logotyp. Med Låt AI skriva den här texten får du ett förslag.

Stoppa spam. Varje formulär har alltid en osynlig kontroll: ett dolt fält och en tidsspärr. Den stoppar det mesta av skräpposten utan att besökarna märker något. Får du ändå mycket skräppost kan du välja en extra kontroll, en captcha: Cloudflare Turnstile eller hCaptcha. Du skapar då ett gratis konto hos den tjänsten och fyller i Site key och Secret key. Slå på en captcha först när det behövs: varje extra steg kostar besökare.

Nyhetsbrev. Du kan lägga till en kryssruta i formuläret där besökare anmäler sig till Mailchimp, Laposta, Brevo eller MailerLite. Bara den som själv kryssar i rutan läggs till. Alltid med dubbel registrering: besökaren bekräftar först via ett mejl. Hos Laposta och MailerLite slår du på det själv i tjänsten. Byggaren berättar var. Utan dubbel registrering kan vem som helst lägga in främmande adresser på din lista.

Dessutom: en besökare kan skicka högst 5 meddelanden per timme. Har du en integritetspolicy visas en länk till den under formuläret. Ett formulär samlar in personuppgifter. Vad du behöver ordna för det står i lektion 7.1.

Fallgrop: testa formuläret själv efter varje ändring, från en annan adress än mottagaradressen. Titta också i skräppostmappen och kontrollera att bekräftelsen kommer fram till "besökaren".

Flytande knappar

Under Inställningar > Knappar lägger du till knappar som stannar kvar längst ner i bild på varje sida, till höger eller vänster (Hörn: Nere till höger eller Nere till vänster).

• WhatsApp-nummer: i internationellt format, med landsnumret (till exempel +46 för ett svenskt nummer) och utan nollan först. Lämnar du fältet tomt blir det ingen WhatsApp-knapp. Ett Förifyllt meddelande går bra, till exempel "Jag vill gärna ha en offert på målningsarbete." Knappen öppnar en chatt med ditt nummer.
• Flytande kontaktknapp: öppnar ditt kontaktformulär i ett fönster. Meddelandet kommer till samma adress som ditt formulär. Du väljer Text på knappen.

I förhandsvisningen ligger knapparna lite högre än på din riktiga webbplats, så att de inte hamnar bakom byggarens hjälpknapp.

Obs! En WhatsApp-knapp lovar snabba svar. Läser du WhatsApp bara på kvällen är kontaktknappen ett bättre val.

Widgets från andra tjänster

En widget är en bit av en annan tjänst på din sida: en YouTube-video, en Google Maps-karta, en bokningskalender från Calendly, ditt Instagram, en Spotify-spellista. För många tjänster räcker länken. Byggaren skapar spelaren eller formuläret själv. Exempel: YouTube, Vimeo, Spotify, Calendly, Google Maps (adressen räcker), Google Kalender, Instagram och TikTok (ditt @namn räcker) och Google Formulär. Från andra tjänster, som Salonized, Trustpilot eller Bandcamp, klistrar du in inbäddningskoden: den kodsnutt du får hos tjänsten för att lägga på en webbplats.

Så här gör du: skriv det i chatten med länken ("lägg vår vägbeskrivningskarta under kontaktblocket, adress Byvägen 1"), klistra in koden i chatten eller välj sektionen Widget under Block. Byggaren känner igen tjänsten, föreslår höjd och rubrik och varnar om något inte kommer att fungera. Låter du AI placera den räknas det som en instruktion och kostar redigeringar. Du ser i förväg hur många. En placerad widget ändrar du med Ändra kod på blocket i förhandsvisningen.

Tre saker att känna till:

1. En widget laddas först efter samtycke. Andras tjänster sätter ofta cookies eller spårar besökare. När cookiebannern är på laddas en widget först när besökaren samtycker till den typen av cookies. Tjänsten hamnar automatiskt i din cookiebanner under "Det här körs på din webbplats nu". Kontrollera därefter också din integritetspolicy (lektion 7.1 och 7.2).
2. Google Kalender måste vara offentlig. En privat kalender kan ingen annan se. Gör bara en separat kalender offentlig i Google Kalender, med det besökarna får se. Aldrig din personliga kalender.
3. Osäker kod kommer inte med. Kod som kan skicka vidare besökares uppgifter, döljer vad den gör eller laddar något från en okänd webbplats lägger AI inte på din webbplats. Den förklarar varför.

Egen kod och Egen HTML i korthet

För avancerade användare finns två ställen.

Egen kod finns längst ner under Inställningar > Integrationer: kod som ska finnas på varje sida, I head på varje sida eller Längst ned på varje sida. Till exempel laddningsskriptet för en chattjänst eller en recensionswidget. Den koden kontrollerar byggaren inte ("Den här koden kontrollerar vi inte"). Kända tjänster blockeras av cookiebannern tills det finns samtycke. Kryssa bara i Den här koden är nödvändig för kod som inte spårar besökare, eftersom den då laddas direkt. I förhandsvisningen i byggaren körs egen kod inte, men på din riktiga webbplats gör den det. På den gratis webbplatsen fungerar egen kod inte. För ett mät-id som Google Analytics använder du inte Egen kod, utan det fasta fältet under Integrationer (lektion 7.2).

Egen HTML är en sektion under Block. Du klistrar in egen HTML och eventuellt CSS, och ändrar den senare med Redigera HTML. Färger och typsnitt följer din grafiska profil. Skript, iframes och formulär fungerar inte här. Använd en widget för det.

Använd båda bara när det inte går på annat sätt: andras kod är en risk för hastighet, säkerhet och integritet.

I byggaren: så gör du

1. Lägg sektionen Kontakt med formulär på din kontaktsida.
2. Öppna Inställningar > Formulär. Fyll i Skicka meddelanden till.
3. Välj din egen e-postadress vid Skicka via, eller låt den stå på WebOkés server tills din domän är klar (lektion 5.3).
4. Slå på Skicka en kopia till besökaren och skriv din egen text.
5. Välj ett tack eller en tacksida vid Efter att formuläret skickats.
6. Lägg vid behov till en WhatsApp- eller kontaktknapp under Inställningar > Knappar.
7. Publicera din webbplats och skicka ett testmeddelande.

Sammanfattning

• Formuläret ligger på en sida. Vad som händer med det ställer du in under Inställningar > Formulär.
• Fyll i Skicka meddelanden till medvetet och välj helst din egen e-postadress som avsändare.
• På den gratis webbplatsen skickar formuläret inga mejl. Att skicka med en fil går aldrig.
• Flytande knappar för WhatsApp och kontakt finns under Inställningar > Knappar.
• Widgets laddas först efter samtycke. Egen kod och Egen HTML är för avancerade användare.

Quiz

Uppgift

Uppgift D4.3: Ditt kontaktformulär och en widget. Ställ in ditt formulär helt och lägg in en widget som verkligen tillför något.

Checklista:

• [ ] sektionen Kontakt med formulär på din kontaktsida;
• [ ] Skicka meddelanden till ifyllt med en adress som du läser varje dag;
• [ ] sändningsmetod vald och du förstår varför;
• [ ] bekräftelse till besökaren med din egen text;
• [ ] tack eller tacksida inställd;
• [ ] en widget inlagd (till exempel en karta eller en bokningskalender) och du har sett att den finns i cookiebannern;
• [ ] webbplatsen publicerad och ett testmeddelande skickat (bara med ett paket; på den gratis webbplatsen kontrollerar du inställningarna).

Frågor:

1. Till vilken adress kommer dina formulärmeddelanden, och via vilken sändningsmetod?
2. Vilken widget valde du, vad tillför den för din besökare och vad ser en besökare som inte ger samtycke?
3. Kom ditt testmeddelande fram, och kom bekräftelsen fram till "besökaren", eller hamnade den i skräpposten?

Efter "klart" ser du ett exempelsvar: Schildersbedrijf Example skickar meddelanden till info@example.com via den egna e-postadressen på domänen; widgeten är en Google Maps-karta med adressen, som laddas först efter samtycke och annars visar en yta med en knapp för att ge samtycke; testmeddelandet kom fram, bekräftelsen också, inte i skräpposten.

Läs mer

• Ett kontaktformulär på din webbplats: skicka fälten via e-post och stoppa spam
• Gratis kurs E-post i ordning: installation och korrekt leverans 7.3: Mejl från din webbplats och formulär
• Gratis kurs E-post i ordning: installation och korrekt leverans 7.2: Samtycke, avregistrering och en ren lista
• Använda klicka för att chatta (WhatsApps hjälpcenter): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (hjälp för Google Kalender, på engelska): https://support.google.com/calendar/answer/37083