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?

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, is het aan te raden om...

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? Voor mezelf heb ik inmiddels een handige...

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...

Tips voor een goed gebruik van afbeeldingen op je website

Een goed gebruik van afbeeldingen op je website is belangrijk. In "Goede foto’s zijn belangrijk; ze maken je website" vertel ik over het belang van plaatsen van goede foto's. Maar als je dan de goede foto's hebt gevonden, dan is het ook nog belangrijk hoe je ze op je...

7 typen websites die niet garant staan voor succes

Er bestaan verschillende typen websites die weer onderverdeeld kunnen worden in succesvolle en niet succesvolle. Als je als ondernemer een website hebt, wil je natuurlijk ook dat die een succes wordt. Een website die bezoekers aantrekt en ervoor zorgt dat die...

WordPress geïnstalleerd? Dit kun je het beste als eerste doen

Het is je gelukt om WordPress te installeren en je staat te popelen om meteen aan de gang te gaan. Even wachten nog... Het is goed om even een paar dingen te doen voordat je verder gaat, je hoeft hier dan niet meer naar om te kijken. YouTube Ben jij meer een kijker...

Een favicon maken & toevoegen aan je WordPress website

Had je er al weleens van gehoord? Van een favicon? Gekke naam eigenlijk hè? Het is een samentreksel van de woorden 'favorite' en 'icon'. Favicon dus... Je hebt hem al wel vaak gezien. Het is namelijk dat kleine icoontje dat je links in een browser tabblad ziet staan...

Het beste WordPress theme kiezen voor je website, hoe doe je dat?

Een WordPress theme heb je nodig om je website aan de voorkant te kunnen laten zien. Hiermee bepaal je het voorkomen, het design en de uitstraling. Zie het als een auto, die bestaat uit de technische onderdelen om de auto te laten rijden en verder te laten doen wat...

De veranderingen van Mailchimp en de gevolgen voor je gratis account

Mailchimp heeft besloten om per 15 mei 2019 veranderingen aan te brengen in de abonnementen. Dit heeft voornamelijk voor de gratis versie best wel wat consequenties. Toen ik startte met mijn bedrijf heb ik voor het opbouwen van mijn e-maillijst en het versturen van...

Waarom het opbouwen van een mailinglijst zo belangrijk is

Veel ondernemers realiseren zich niet hoe belangrijk het opbouwen van een mailinglijst is als ze beginnen met hun bedrijf. Meestal ga je er pas over denken als je al een tijdje bezig bent en ziet hoeveel impact het bij anderen heeft op de groei van hun bedrijf. In dit...

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