Formulieren, knoppen en widgets

Module 4: Pagina's, uiterlijk en functies · Leestijd: 8 minuten

Leerdoel: Na deze les kun je het contactformulier instellen (ontvanger, bevestiging, bedankpagina, spamcontrole, nieuwsbrief en verzendmethode), zwevende knoppen voor WhatsApp en contact plaatsen, een widget van een andere dienst insluiten, en weet je wanneer Eigen code en Eigen HTML passen.

Kernbegrippen: contactformulier, ontvanger, bevestigingsmail, bedankpagina, captcha, dubbele aanmelding, verzendmethode, zwevende knop, widget, insluitcode, toestemming, Eigen code, Eigen HTML

Het contactformulier: twee plekken

Een formulier op je site bestaat uit twee delen. Het formulier zelf, met de velden die een bezoeker invult, staat op een pagina. Je plaatst het met de sectie Contact (via Onderdelen of Sectie toevoegen) of via de chat. Wat er gebeurt als iemand op verzenden klikt, stel je in bij Instellingen > Formulieren. Dat paneel stel je altijd zelf in; de chat doet dat niet.

Het formulier heeft altijd de velden naam, e-mail en bericht. Via de chat voeg je er extra velden aan toe, hoogstens acht: een tekstveld, een keuzelijst (bijvoorbeeld "Binnen of buiten?"), e-mail, telefoon, een lang tekstveld, een datum of een getal. Een veld om een bestand of foto mee te sturen bestaat niet. Wil Schildersbedrijf Example foto's van de klus ontvangen, dan zet hij in de bedanktekst: "Stuur gerust foto's naar ons e-mailadres."

Belangrijk: op de gratis site zonder pakket is het formulier zichtbaar maar uitgegrijsd, en het verstuurt geen mail. Formulieren versturen pas echt als je site in een AI Builder-pakket staat. Je kunt de instellingen hieronder wel al klaarzetten; ze worden dan meteen gebruikt.

Instellingen > Formulieren

Het paneel heeft vijf blokken.

Berichten ontvangen. Bij Berichten sturen naar vul je het e-mailadres in waar ingevulde formulieren heen gaan. Laat je het leeg, dan gaat het naar het e-mailadres van je account bij WebOké. Vul het bewust in. Bij Onderwerp van de mail kies je het onderwerp (leeg: "Nieuw bericht via je website"). Bij Na versturen kies je Toon een bedankje met je eigen tekst, of Stuur door naar een pagina: een bedankpagina die je zelf maakt en uit het menu laat (les 4.1). Daarmee kun je later meten hoe vaak het formulier verstuurd wordt.

Verzenden via. Hoe de mail verstuurd wordt. Server van WebOké werkt direct, met als afzender noreply@weboke.site. Je eigen mailadres (SMTP) is aanbevolen: de mail komt dan van je eigen domein en belandt minder snel in de spam. Met Regel het voor me maakt de bouwer dat adres op je domein aan. Onder je eigen mailadres kun je ook een maildienst kiezen, zoals Postmark, Brevo, Mailgun of SendGrid. Waarom de afzender zo veel uitmaakt, lees je in les 5.3.

Bevestiging aan de bezoeker. Zet Bezoeker een kopie sturen aan, dan krijgt de bezoeker een bevestigingsmail. Dat is vaak het eerste bericht dat iemand van je krijgt. Je kiest het onderwerp, Jouw tekst (met {naam} voor de naam van de bezoeker), de Ondertekening en of het ingevulde bericht meegaat. De bouwer zet je tekst in de opmaak van je site, met je logo. Met Laat AI deze tekst schrijven krijg je een voorstel.

Spam tegenhouden. Elk formulier heeft altijd een onzichtbare controle: een verborgen veld en een tijdslot. Die houdt de meeste spam tegen zonder dat bezoekers er iets van merken. Krijg je toch veel spam, kies dan een extra controle, een captcha: Cloudflare Turnstile of hCaptcha. Je maakt daarvoor een gratis account bij die dienst en vult de Site key en Secret key in. Zet een captcha pas aan als het nodig is: elke extra stap kost bezoekers.

Nieuwsbrief. Je kunt een vinkje in het formulier zetten waarmee bezoekers zich inschrijven bij Mailchimp, Laposta, Brevo of MailerLite. Alleen wie het vinkje zelf aanzet, wordt toegevoegd. Altijd met dubbele aanmelding: de bezoeker bevestigt eerst via een mail. Bij Laposta en MailerLite zet je dat zelf aan in die dienst; de bouwer vertelt je waar. Zonder dubbele aanmelding kan iedereen vreemde adressen op jouw lijst zetten.

Verder: een bezoeker kan hoogstens 5 berichten per uur sturen. Heb je een privacyverklaring, dan staat er onder het formulier een link naar. Een formulier verzamelt persoonsgegevens; wat je daarvoor moet regelen staat in les 7.1.

Valkuil: test het formulier na elke wijziging zelf, vanaf een ander adres dan het ontvangstadres. Kijk ook in je spammap, en controleer of de bevestiging bij de "bezoeker" aankomt.

Zwevende knoppen

Bij Instellingen > Knoppen zet je knoppen die onderaan in beeld blijven op elke pagina, rechts of links (Hoek: Rechtsonder of Linksonder).

• WhatsApp-nummer: in internationale vorm, met +31 voor een Nederlands nummer en zonder de 0 ervoor. Laat je het leeg, dan is er geen WhatsApp-knop. Een Voorgevuld bericht mag, bijvoorbeeld "Ik wil graag een offerte voor schilderwerk." De knop opent een gesprek met jouw nummer.
• Zwevende contactknop: opent je contactformulier in een venster. Het bericht komt op hetzelfde adres binnen als je formulier. Je kiest de Tekst op de knop.

In het voorbeeld staan de knoppen iets hoger dan op je echte site, zodat ze niet achter de hulpknop van de bouwer vallen.

Let op: een WhatsApp-knop belooft snelle reactie. Lees je WhatsApp alleen 's avonds, kies dan liever de contactknop.

Widgets van andere diensten

Een widget is een stukje van een andere dienst op je pagina: een YouTube-video, een Google Maps-kaart, een afsprakenplanner van Calendly, je Instagram, een Spotify-playlist. Van veel diensten is de link genoeg; de bouwer maakt de speler of het formulier zelf. Voorbeelden: YouTube, Vimeo, Spotify, Calendly, Google Maps (het adres is genoeg), Google Agenda, Instagram en TikTok (je @naam is genoeg) en Google Formulieren. Van andere diensten, zoals Salonized, Trustpilot of Bandcamp, plak je de insluitcode: het stukje code dat je bij die dienst krijgt om op een website te zetten.

Zo doe je het: zeg het in de chat met de link erbij ("zet onze route-kaart onder het contactblok, adres Dorpsstraat 1"), plak de code in de chat, of kies in Onderdelen de sectie Widget. De bouwer herkent de dienst, stelt hoogte en kop voor en waarschuwt als iets niet gaat werken. Laat je de AI hem plaatsen, dan is dat een opdracht en kost het bewerkingen; je ziet vooraf wat. Een geplaatste widget pas je aan met Code aanpassen op het blok in het voorbeeld.

Drie dingen om te weten:

1. Een widget laadt pas na toestemming. Diensten van anderen plaatsen vaak cookies of volgen bezoekers. Met de cookiebanner aan laadt een widget pas als de bezoeker toestemming geeft voor die soort cookies. De dienst komt vanzelf in je cookiebanner bij "Wat er nu op je site draait". Controleer daarna ook je privacyverklaring (les 7.1 en 7.2).
2. Google Agenda moet openbaar zijn. Een privé-agenda kan niemand anders zien. Maak in Google Agenda alleen een aparte agenda openbaar met wat bezoekers mogen zien, nooit je persoonlijke agenda.
3. Onveilige code komt er niet op. Code die gegevens van bezoekers kan doorsturen, verhult wat hij doet of iets laadt van een onbekende website, zet de AI niet op je site. Hij legt uit waarom.

Eigen code en Eigen HTML, op hoofdlijnen

Voor gevorderden zijn er twee plekken.

Eigen code staat onderaan bij Instellingen > Koppelingen: code die op elke pagina moet staan, In de head van elke pagina of Onderaan elke pagina. Bijvoorbeeld het laadscript van een chatdienst of een reviewwidget. Die code controleert de bouwer niet ("Deze code controleren wij niet"). Bekende diensten houdt de cookiebanner tegen tot er toestemming is. Vink Deze code is noodzakelijk alleen aan voor code die geen bezoekers volgt, want dan laadt hij meteen. In het voorbeeld in de bouwer wordt eigen code niet uitgevoerd, op je echte site wel. Op de gratis site werkt eigen code niet. Voor een meet-id zoals Google Analytics gebruik je niet Eigen code, maar het vaste veld bij Koppelingen (les 7.2).

Eigen HTML is een sectie in Onderdelen. Je plakt eigen HTML en eventueel CSS, en past hem later aan met HTML bewerken. Kleuren en letters volgen je huisstijl. Scripts, iframes en formulieren werken hier niet; daarvoor gebruik je een widget.

Gebruik beide alleen als het niet anders kan: code van een ander is een risico voor snelheid, veiligheid en privacy.

In de bouwer: zo doe je het

1. Zet de sectie Contact met formulier op je contactpagina.
2. Open Instellingen > Formulieren. Vul Berichten sturen naar in.
3. Kies bij Verzenden via je eigen mailadres, of laat het op de server van WebOké staan tot je domein klaar is (les 5.3).
4. Zet Bezoeker een kopie sturen aan en schrijf je eigen tekst.
5. Kies bij Na versturen een bedankje of een bedankpagina.
6. Zet zo nodig bij Instellingen > Knoppen een WhatsApp- of contactknop.
7. Zet je site online en verstuur een testbericht.

Samenvatting

• Het formulier staat op een pagina; wat ermee gebeurt regel je in Instellingen > Formulieren.
• Vul Berichten sturen naar bewust in; kies bij voorkeur je eigen mailadres als afzender.
• Op de gratis site verstuurt het formulier geen mail; een bestand meesturen kan nooit.
• Zwevende knoppen voor WhatsApp en contact staan bij Instellingen > Knoppen.
• Widgets laden pas na toestemming; Eigen code en Eigen HTML zijn voor gevorderden.

Quiz

Opdracht

Opdracht D4.3: Je contactformulier en een widget. Stel je formulier volledig in en plaats één widget die echt iets toevoegt.

Checklist:

• [ ] sectie Contact met formulier op je contactpagina;
• [ ] Berichten sturen naar ingevuld met een adres dat je dagelijks leest;
• [ ] verzendmethode gekozen en begrepen waarom;
• [ ] bevestiging aan de bezoeker met je eigen tekst;
• [ ] bedankje of bedankpagina ingesteld;
• [ ] één widget geplaatst (bijvoorbeeld een kaart of een afsprakenplanner) en gezien dat hij in de cookiebanner staat;
• [ ] site online en een testbericht verstuurd (alleen met een pakket; op de gratis site controleer je de instellingen).

Vragen:

1. Op welk adres komen je formulierberichten binnen, en via welke verzendmethode?
2. Welke widget koos je, wat voegt hij toe voor je bezoeker en wat ziet een bezoeker die geen toestemming geeft?
3. Kwam je testbericht aan, en kwam de bevestiging bij de "bezoeker" aan, of in de spam?

Na "gedaan" zie je een voorbeeldantwoord: Schildersbedrijf Example stuurt berichten naar info@example.com via het eigen mailadres op het domein; de widget is een Google Maps-kaart met het adres, die pas laadt na toestemming en anders een vlak met een knop om toestemming te geven toont; testbericht kwam binnen, de bevestiging ook, niet in de spam.

Verder lezen

• Een contactformulier op je website: velden laten mailen en spam voorkomen
• Gratis cursus E-mail op orde: instellen en goed laten aankomen 7.3: Mail vanaf je website en formulieren
• Gratis cursus E-mail op orde: instellen en goed laten aankomen 7.2: Toestemming, afmelden en een schone lijst
• Klik en chat gebruiken (WhatsApp-helpcentrum): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Google Agenda Help, Engels): https://support.google.com/calendar/answer/37083