Je kunt contactgegevens automatisch laten bijwerken door een zogenaamd update-formulier naar je contacten te sturen. Standaard update formulieren bestaan al een tijdje in MailBlue, maar we kijken graag naar mogelijkheden om dit naar het volgende niveau te tillen. De manier waarop bespreken we in dit artikel. Binnen dit update-formulier wordt het e-mailveld verborgen middels een CSS-code, waarna dit veld vooraf automatisch ingevuld wordt met de personalisatietag '%EMAIL%' door het gebruik van een query string in de URL van het formulier.
Onderdelen van dit artikel:
Wat is een update-formulier?
Stel je eens voor: je verstuurt mailings naar je contacten met geconditioneerde content op basis van verzamelde informatie (bijvoorbeeld: woonplaats). In het geval dat één of meerdere van deze contacten verhuizen, wil je natuurlijk wel de juiste content in je mails blijven versturen. Voor dit soort situaties raden we je aan om een update-formulier uit te sturen naar je mailinglijst. Dit formulier werkt net als alle andere formulieren, met één verschil: waar je normaliter een formulier gebruikt om specifieke informatie te verzamelen, gebruik je een update-formulier om al verzamelde informatie aan te passen. Dit kan betrekking hebben tot informatie in alle mogelijke velden, van standaard velden tot eigen velden.
Let op: Het is dus belangrijk om bij een update-formulier je contacten de mogelijkheid te geven om al hun gegevens te wijzigen. Als er velden zijn die niet aangepast moeten worden hoeven je contacten deze niet in te vullen. Hun informatie blijft dan ook gewoon intact.
Hieronder kun je een voorbeeld bekijken van hoe een update-formulier er uit kan komen te zien, echter is het goed om te weten dat de invulling van dit formulier volledig afhankelijk van de velden die je gebruikt in jouw MailBlue-account.
Hoe maak je het update-formulier aan?
Stap 1: Maak een formulier aan en voeg alle opties toe
Als je nog even een geheugensteuntje nodig hebt met betrekking tot het aanmaken van formulieren kun je bij dit hulpartikel terecht. Eerder in dit hulpartikel bij het hoofdstuk Wat is een update-formulier? staat ook een voorbeeld van hoe je een update-formulier kunt inrichten.
Stap 2: Voeg de query string voor de personalisatietag %EMAIL% toe aan de URL van je formulier
Als je nog niet bekend bent met dit concept, is het handig om eerst even een stapje terug te nemen en te kijken naar het concept van formuliervelden vooraf automatisch laten invullen middels een query string. In stap 2 en 3 van dit artikel wordt uitgelegd hoe je een query string kan aanmaken om vervolgens toe te voegen aan de URL van je formulier.
Let op: We raden je aan om dit proces eerst te volgen voordat je de volgende stappen volgt om het e-mailveld te verbergen. Op deze manier kun je duidelijk controleren of het e-mailveld daadwerkelijk automatisch wordt ingevuld met de personalisatietag '%EMAIL%' voordat je dit veld gaat verbergen met de volgende stappen.
Als je dit proces goed hebt gevolgd, zou het e-mailveld in je formulier er zo uit moeten zien wanneer je de link met de query string hebt gevolgd:
De personalisatietag '%EMAIL%' wordt automatisch vervangen met het e-mailadres van het contact die je update-formulier invult.
Stap 3: Maak aanpassingen in de CSS van je formulier om het e-mailveld te verbergen
Binnen MailBlue-formulieren bieden we de optie om CSS-code in te zetten voor aanpassingen in de opmaak van je formulier. Normaliter zou je deze functie bijvoorbeeld gebruiken om de breedte van de verzendknop te veranderen, het lettertype aan te passen of de kleur van de tekst te wijzigen. In dit geval gaan we deze CSS-code gebruiken om het e-mailveld te verbergen. Deze functie vind je door in de ontwerper te navigeren naar 'Stijl → Aangepaste CSS'.
Als eerste zul je bij de optie Aangepaste CSS op de knop Inspecteren moeten klikken. Hierdoor krijg je toegang tot de inspectietool om de CSS-code van het e-mailveld op te halen. Dit e-mailveld heeft drie verschillende elementen waarvan je de CSS-code moet ophalen, namelijk:
- Het element waarin de naam van het veld wordt weergeven (Label)
- Het tekstveld waarin je contacten hun e-mailadres normaliter kunnen invullen (Input)
- Een verborgen element die functies heeft met betrekking tot opmaak (Uitlijning)
Met de inspectietool zul je dus één voor één op deze drie verschillende element moeten klikken om de broncode van deze elementen op te halen. Wanneer je eenmaal de broncode van een specifiek element hebt opgehaald, verschijnt deze automatisch in het veld bij 'Aangepaste CSS'. Hieronder geven we je instructies mee voor het verbergen van elk verschillend element:
Let op: de cijferwaarde in de voorbeeldcodes die hieronder worden weergeven verschillen voor iedereen, kopieer deze dus niet.
Label
Wanneer je de inspectietool hebt gebruikt om op de label van het e-mailveld te klikken, zou de onderstaande code in het veld bij 'Aangepaste CSS' moeten verschijnen:
._x89938723 label {
}
Vervolgens moet je onder de opgehaalde broncode een string toevoegen waarmee je dit element laat verdwijnen. Deze gaat als volgt:
display:none
De code in het veld bij 'Aangepaste CSS' zou er nu zo uit moeten zien:
._x89938723 label {
display:none;
}
Als je deze stappen netjes hebt gevolgd, zou het element 'Label' moeten verdwijnen.
Input
Voor dit element kun je dezelfde stappen volgen als bij het element 'Label'. Hierna zou de code in het veld bij 'Aangepaste CSS' er zo uit moeten zien:
._x89938723 label {
display:none;
}
._x89938723 input {
display:none;
}
Uitlijning
Bij dit element komen er een paar extra aandachtspuntjes kijken. Het is namelijk zo goed verborgen dat je waarschijnlijk veel moeite zult hebben om deze aan te klikken met de inspectietool. Om de broncode van dit element alsnog op te halen, kun je de broncode van een vorig element kopiëren. Hier zul je alleen nog een paar kleine aanpassingen aan moeten maken.
Ten eerste zul je de string achter de broncode die je hebt gekopieerd moeten verwijderen. Dit ziet er zo uit:
._x89938723{
Ten tweede zul je achter de string 'display:none' een nieuwe string moeten toevoegen. Deze gaat als volgt:
!important
De !important-regel heeft als functie om een eigenschap / waarde meer prioriteit te geven. Als je de !important-regel gebruikt, worden alle bestaande opmaakregels voor de eigenschap van een specifiek element overschreden.
Als je de stappen voor het verbergen van dit element hebt gevolgd, zou het gehele e-mailveld verdwenen moeten zijn en zou de code in het veld bij Aangepaste CSS er nu zo uit moeten zien:
._x89938723 label {
display:none;
}
._x89938723 input {
display:none;
}
._x89938723{
display:none !important;
}
Om deze stappen even visueel in kaart te brengen, geven we je graag de volgende (geluidloze) schermvideo mee:
Als je na het volgen van de stappen in dit hulpartikel nog problemen ervaart bij het aanmaken van een update-formulier, aarzel dan niet om een ticket in te sturen: https://help.mailblue.nl/hc/nl/requests/new