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?

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

5 belangrijke plugins voor je WordPress website

Een belangrijke reden dat WordPress zo flexibel is, is de enorme keuze uit diverse plugins. Heel kort gezegd is een plugin een pakketje code dat je toe kunt voegen aan je WordPress installatie, zodat je extra functionaliteiten krijgt…

Wat is WordPress en wat zijn de voordelen?

Heel kort gezegd; WordPress is een Content Management Systeem (CMS). Dat wil zeggen, een systeem om de content van je website te managen. Uhh.. en nu in Nederlands graag! WordPress is een pakket software, een programma, waarmee je de inhoud van je website…

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

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.

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…

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

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…

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.

Zo werk je aan een succesvolle website! 15+ acties waar je direct mee kan starten

Als je ondernemer bent wil je uiteraard een succesvolle website! Een website die veel bezoekers trekt en die van deze bezoekers vervolgens klanten of leads kan maken. Om dit voor elkaar te krijgen zul je regelmatig tijd moeten besteden aan het nóg beter maken van je...

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