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 het aanmeldformulier voor op je website… Dat zag er best ouderwets en beperkt uit, niet heel uitnodigend. Gelukkig heeft Laposta In juni 2022 hun nieuwe ingebedde aanmeldformulier geintroduceerd. Daarmee kun je gemakkelijk en zonder technische kennis een aanmeldformulier opmaken in de kleuren van je huisstijl.

Het formulier kun op elke plek in je website plaatsen, of je kunt hem laten zien als pop-up of slide-in.

Zo doe je dat:

  • Je gaat naar ‘Relaties‘ en klikt op ‘bekijkenop de lijst waarvoor je het aanmeldformulier wil maken.
  • Vervolgens ga je naar het tab ‘Verrijken‘ en kiest dan voor ‘Ingebed aanmeldformulier – geen technische kennis vereist‘ en dan op ‘beginnen‘.
  • Kies voor ‘Configureren‘ en in een apart scherm opent zich dan de editor.
  • Doe de gewenste aanpassingen via de tabs ‘Inhoud, vormgeving en weergave‘. Je ziet in het scherm aan de rechterkant direct hoe je formulier eruit komt te zien.
  • Als het formulier naar je zin is dan sluit je de editor af en kopieert de code die je dan te zien krijgt. Deze plak je in je website op de plaats waar je het formulier wil laten zien.

Je kunt er ook nog voor kiezen om het formulier zelf vorm te geven door te werken met code:

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’



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)

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.

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

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:

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.

Geef een reactie

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