Hoe maak je een Laposta aanmeld­formulier op je website in je eigen huisstijl?

Hoe maak je een Laposta aanmeld­formulier op je website in je eigen huisstijl?

Laposta is een e-mailmarketing programma en de perfecte tool om eenvoudig je nieuwsbrieven te maken en te versturen. Het is overzichtelijk, gebruiksvriendelijk, intuïtief en alles is lekker in het Nederlands. Als Laposta gebruiker zul je dit zeker herkennen.

Het dashboard ziet er simpel uit, haast ouderwets. Geen poespas of fancy dingetjes die het visueel aantrekkelijk maken zoals bijvoorbeeld GetResponse dat doet. Helemaal niets mis mee hoor, het maakt het vooral een stuk duidelijker en overzichtelijker. Je krijgt van Laposta gewoon alle tools om professioneel uitziende nieuwsbrieven te maken.


Lees ook: Laposta of Mailchimp: welke kies jij om gratis nieuwsbrieven te versturen?


Alleen dat aanmeldformulier voor op je website… Tja, dat ziet er ook best ouderwets uit, niet heel uitnodigend. Gelukkig kun je daar wel iets aan doen. Hoe? Ik leg het je hieronder uit.

Laposta heeft vier verschillende aanmeld­­­­­formulieren

  1. Zelfstandig aanmeldformulier
    Dit is een link naar een opt-in formulier en gaat buiten je website om. Wel mogelijk om vorm te geven in je huisstijl.
  2. Ingebed aanmeldformulier
    Opt-in voor je website, weinig mogelijkheden voor vormgeving.
  3. Zelf vormgeven aanmeldformulier
    Opt-in voor je website aan te passen aan je huisstijl
  4. Aanmeldformulier voor Facebook

Het ‘gewone’ ingebed aanmeld­formulier

Dit formulier (optie 2) zie ik het meeste gebruikt op websites. Het is eenvoudig aan te passen en te integreren. Zoals je hieronder op de afbeelding ziet zijn er maar weinig mogelijkheden voor de styling. Zo kun je de achtergrond van het aanmeldformulier aanpassen en het lettertype (soort, kleur en grootte) maar dan houdt het aardig op. De tekst van de button kun je aanpassen maar niet kleur van de button, welke toch wel vaak de kenmerken krijgt van de accentkleur van de huisstijl.

Laposta opt-in ingebed

Zelf vormgeven van het aanmeld­formulier

Met de 3e optie van het Laposta aanmeldformulier heb je iets meer mogelijkheden zoals:

  • Verder stylen van je formulier met css, waaronder je button in de kleur van je huisstijl.
  • Een link toevoegen naar een ‘bedankt’ pagina op je website. Na het invullen van de opt-in wordt de inschrijver doorgestuurd naar de pagina die je hiervoor zelf kiest.

Hoe doe je dat?

  • Klik op het ‘Relaties’ tab en kies de lijst waarvoor je de opt-in wil maken
  • Kies voor de tab ‘Verrijken’
  • Selecteer optie 3 ‘Zelf vormgeven van aanmeldformulier’ en vervolgens op ‘Beginnen’
Zelf vormgegeven aanmeldformulier Laposta
  • Kies onderaan voor: ‘Meer informatie over vormgeven met behulp van HTML/CSS’

Gebruik zonder API

Je ziet dan een blok staan met code (html). Op de afbeelding hieronder heb ik aangegeven hoe je de link naar je bedanktpagina kunt toevoegen en waar je de tekst van je button kunt veranderen.

  • Selecteer en kopieer de code.
  • Plak deze code op je website. Dit kun je doen in een ‘code’ blok of in een ‘tekst’ blok. Als je deze laatste gebruikt, zorg er dan wel voor dat je de code in het 2e tabje van de teksteditor plakt.

Kijk hier even welke mogelijkheden je thema/builder hiervoor heeft. Hieronder kun je zien hoe je het in DIVI kunt doen:

Voorbeeld Code module DIVI
Voorbeeld tekstmodule DIVI

Je opt-in formulier ziet er dan zoals op de foto hieronder. Nog helemaal niets spannends aan dus… (Als jij andere velden hebt ingesteld voor je lijst ziet het er uiteraard iets anders uit)

Laposta html opt-in zonder opmaak

CSS code toevoegen

  • Om je Laposta aanmeldformulier te stylen heb je CSS code nodig. de CSS die ik gebruik voor mijn formulier kun je hier kopiëren. Zoals je ziet kun je de kleurcodes aanpassen voor de tekst en achtergrond van je button.
  • Plak deze code in de ‘Extra CSS’ sectie van je customizer instellingen.

Deze ‘Extra CSS’ sectie vind je helemaal onderaan in je customizer instellingen. Als je hierop klikt opent zicht het volgende venster.

CSS customizer settings
  • Ga nu weer terug naar de module waar je de html code voor je opt-in formulier hebt geplakt. Je ziet dat er nog niets is veranderd. Dat komt omdat er aan de HTML code een ‘class’ gegeven moet worden om deze te linken met de CSS code.

Koppelen CSS aan HTML code

In DIVI kun je dit doen door de class toe te voegen in het tabje ‘Geavanceerd’ zoals de afbeelding laat zien. Andere builders hebben ook de mogelijkheid voor het toevoegen van een class aan een module zoals bijv. Elementor. En ook in Gutenberg kun je CSS classes toevoegen. Als je het blok selecteert zie je onderaan in de rechter zijbalk het tabje ‘Geavanceerd’ staan.

Laposta Class in Divi
Toevoegen CSS class in DIVI

Als je nergens een geavanceerde instelling tot je beschikking hebt, kun je de CSS class ook in je HTML code zetten. Je voegt dan: class=”laposta” toe tussen “form” en ‘method”. Dit ziet er zo uit:

Form class laposta

Eindresultaat

Als je alle bovenstaande stappen gevolgd hebt ziet je opt-in formulier er uit zoals het voorbeeld hieronder. Uiteraard met je eigen kleuren en het lettertype dat je hebt ingesteld voor je website.





Online training

Snel en eenvoudig nieuwsbrieven maken met Laposta

Wil je niet alles zelf uitzoeken? In deze training neem ik je aan de hand mee en laat je stap voor stap zien hoe je het e-mailmarketing programma Laposta instelt en gebruikt.

Snel en eenvoudig nieuwsbrieven maken met Laposta

3 Reacties

  1. Sandra

    Hi,

    Wat geweldig dat je het duidelijk hebt uitgelegd! En ook met divi, erg blij mee.
    Ik heb alleen een vraag. Ik wil graag de look en feel zoals in dit cotanct formulier, dus de balken en dan daarin naam (e-mail e.d.).
    Nu staat het er boven en wijkt het af van de rest van de website.

    Heb je enig idee hoe ik dat kan doen?

    Mvg

    Antwoord
    • Monique

      Fijn dat het duidelijk is Sandra 🙂 Het is wel mogelijk om te werken met zgn ‘placeholders’ zoals jij bedoeld. Je moet dan wel gaan ‘rommelen’ in de html code die Laposta geeft voor je formulier. Uitleg over placeholders vind je hier: https://www.w3schools.com/tags/att_input_placeholder.asp. Je moet dan ook ‘labels’ verwijderen omdat het anders dubbel staat.

      Antwoord
  2. Sandra

    Dankjewel, moest het voor een klant instellen en dit scheelt heel veel werk. (andere sandra)

    Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Verder lezen?

5 onderdelen die absoluut niet mogen ontbreken op jouw website

Als ondernemer ontkom je er niet aan om een website te hebben voor je bedrijf. Het is hét middel om de klanten aan te spreken die je graag aan wil trekken. Je hebt veel ruimte om je producten, diensten en iets van jezelf te laten zien.

Rank Math: de beste en fijnste WordPress SEO plugin? (Review)

Een goede WordPress SEO plugin mag zeker niet ontbreken op je website. Jarenlang gebruikte ik de Yoast SEO plugin voor mijn eigen websites en die van mijn klanten. Nadat ik steeds meer goede reviews las over Rank Math, ben ik daar mee gaan testen. In dit artikel lees...

Bepaal het doel van je website met deze 5 voorbeelden

Veel ondernemers zien hun website als een doel op zich en hebben niet in de gaten dat een website juist een middel is om andere doelen te behalen. Als je exact weet wat het doel van je website moet zijn, kun je veel beter bepalen wat er op je website aanwezig moet zijn om je doelen te behalen.

Hoe krijg je een goede voorvertoning van een link op Facebook?

Als je de link van je nieuwe blogpost of van webpagina deelt op Facebook, dan wil je natuurlijk dat het er netjes en aantrekkelijk uitziet. De bedoeling van het plaatsen van je Facebookbericht, is uiteraard dat er mensen op je link klikken en je website bezoeken.

Wat zijn testimonials en waar plaats je ze op je website?

Als je goed bent in wat je doet, dan wil je dat uiteraard dat je potentiële klanten dat weten. Je kunt dat zelf kunnen vertellen aan ze, maar ja, hoe komt dat over? De bezoekers van je website lezen liever van anderen dat ze door jou goed geholpen zijn…

Verbeter de snelheid van je website door het opschonen van je database

Snelheid is hartstikke belangrijk voor je website, als de bezoekers te lang moet wachten dan haken ze af. Zo simpel is het... Een belangrijke (zo niet de belangrijkste) factor in de snelheid van je website is natuurlijk het optimaliseren van je afbeeldingen. Hier heb...

Goede foto’s zijn belangrijk; ze maken je website

Foto’s zijn enorm belangrijk voor je website, ze bepalen voor een heel groot deel de sfeer en de uitstraling. Het design en je teksten kunnen nog zo goed in elkaar zitten, als je foto’s niet sprekend en van slechte kwaliteit zijn, dan heeft dat consequenties voor de ervaring van je bezoekers.

Maak een plan voor je website, dan ga je zeker goed van start!

Voordat je begint met het maken of laten maken van een website is het belangrijk dat je een goed plan hebt, een goede fundering waarop je website gebouwd kan worden. Als je al een website hebt en deze nog niet zo succesvol is als je gehoopt had…

Blogpost publiceren? Loop hem nog even na met deze checklist

Als je een blogpost geschreven hebt en de afbeeldingen geplaatst zijn, is het tijd om op ”publiceren” te drukken. Zelf voel ik dan altijd nog een lichte aarzeling. Is het nu echt wel goed zo? Is dit voor jou herkenbaar?

7 vaak voorkomende irritaties van website bezoekers (en wat je hier aan doet)

Een goed design is heus niet alles. Wat nog veel belangrijker is, is dat je website bezoekers een goede gebruikerservaring hebben als ze op je website komen. Als ze geïrriteerd raken, dan ben je ze kwijt, en dat wil je natuurlijk voorkomen. Er zijn een aantal vaak...

7 Stappen Voor Een Goede Voorbereiding Van Je Website

Schrijf je in om waardevolle tips & inspiratie te ontvangen. Je krijgt van mij de 7 stappen voor een goede voorbereiding cadeau!

7 Stappen Voor Een Goede Voorbereiding Van Je Website