De embedcode van het opt-informulier aanpassen

Wanneer je een Flexmail opt-informulier op je website insluit, wordt het geleverd met standaardopmaak. Als die opmaak niet overeenkomt met het ontwerp van je website, kun je deze overschrijven met CSS. Dit artikel legt uit hoe de embedcode werkt en hoe je aangepaste stijlen veilig kunt toepassen.

Hoe de embedcode werkt

Wanneer je de embedcode voor een opt-informulier genereert in Flexmail, ontvang je drie onderdelen:

• Een JavaScript-fragment dat je aangepaste stijlen aan het formulier doorgeeft zodra het is geladen.
• Een iframe dat het formulier zelf laadt vanuit https://return.flexmail.eu.
• Een leeg <style id="flx-styles"> -blok waar je je eigen CSS kunt toevoegen.

Je plakt alle drie de onderdelen in de HTML van je website op de plek waar je het formulier wilt weergeven. Wanneer de pagina laadt, haalt het iframe het formulier op en voegt het JavaScript de inhoud van je stijlblok toe aan het formulier, zodat je opmaak wordt toegepast.

De embedcode ophalen:

1. Ga naar Formulieren > Opt-in formulieren.
2. Open het formulier dat je wilt insluiten.
3. Klik op de knop Formulier insluiten.
4. Kopieer de embedcode uit het pop-upvenster.

Aangepaste CSS toevoegen aan je website

Aangepaste stijlen komen in het <style id="flx-styles"> -blok. Het blok is standaard leeg en bevat commentaarplaceholders voor de meest gebruikte selectors:

• #flxml_frm > table > tbody > tr > td:nth-child(1)  — de veldlabels.
• #flxml_frm input[type="text"]  — de tekstinvoervelden.
• #flxml_frm button[type="submit"]  — de verzendknop.

Je kunt dit uitbreiden met selectors voor andere elementen, zoals #flxml_frm select  voor vervolgkeuzemenu's, #flxml_frm input[type="checkbox"]  voor selectievakjes of #flxml_frm input[type="number"]  voor numerieke velden. Gebruik altijd #flxml_frm  als prefix voor je selectors, zodat je stijlen alleen op het formulier worden toegepast.

Hier is een klein voorbeeld dat het formulier transparant maakt, responsief op mobiel en de verzendknop een aangepaste look geeft:

<style id="flx-styles">
    /* == Make the form transparent ================================ */
    body.fm_body, #flxml_frm table{
        background: transparent;
    }
    /* == Make the form fill its container ========================= */
    #flxml_frm, #flxml_frm table, #flxml_frm tr, #flxml_frm td {
        width: 100% !important;
    }
    #flxml_frm td {
        display: block;
    }
    #flxml_frm input[type="text"],
    #flxml_frm input[type="number"],
    #flxml_frm select {
        width: 100% !important;
        height: 2rem !important;
        box-sizing: border-box;
    }
    /* == Custom submit button =====================================*/
    #flxml_frm button[type="submit"] {
        background: #E8472B;
        color: #ffffff;
        border: none;
        border-radius: 4px !important;
        padding: 12px 24px;
    }
</style>

De markering !important  is soms nodig omdat de standaardstijlen van het formulier inline breedtewaarden gebruiken. Van hieruit kun je de rest verder uitwerken: lettertypen, kleuren, labelopmaak en meer aanpassen door extra regels toe te voegen met hetzelfde #flxml_frm -prefix.

Wat je kunt wijzigen

Je kunt elke visuele eigenschap van de formulierelementen veilig opmaken: kleuren, lettertypen, witruimte, randen, border-radius, breedte en achtergrond.

Wat je niet mag wijzigen

Verwijder of wijzig de volgende onderdelen niet uit de embedcode:

• De src -URL van het iframe. Hiermee wordt het formulier geladen vanuit de servers van Flexmail. Wijzigen zorgt ervoor dat het formulier niet meer werkt.
• Het id  van het iframe (iframe_flxml_form ) en het id  van het <style> -blok (flx-styles ). Het JavaScript-fragment gebruikt deze om je stijlen te vinden en door te geven aan het formulier.
• Het JavaScript-fragment zelf. Zonder dit fragment worden je aangepaste stijlen niet toegepast op het formulier en blijft het onzichtbaar na het laden.

Testen na aanpassing

Nadat je je aangepaste CSS hebt toegevoegd, doe je altijd een live test voor je publiceert:

1. Dien het formulier in met een echt e-mailadres.
2. Bevestig dat het contact verschijnt in je Flexmail-account onder Contacten > Alle contacten.
3. Bevestig dat de bevestigingsmail aankomt en de bevestigingslink werkt.
4. Controleer het formulier op mobiel. Sommige CSS-wijzigingen die er goed uitzien op desktop kunnen de mobiele weergave verstoren. Test op minstens één mobiel schermformaat.

Veelgemaakte fouten

Te brede selectors gebruiken die andere elementen op de pagina beïnvloeden

Selectors zoals input  of button  zonder het #flxml_frm -prefix passen je stijlen toe op elke invoer en knop op de pagina. Beperk je selectors altijd met #flxml_frm  om de impact te beheersen.

Een vaste breedte instellen die op mobiel niet werkt

Een vaste pixelbreedte voor het formulier past zich niet aan op kleinere schermen. Gebruik max-width  of een procentuele waarde om het formulier responsief te houden.

Volgende stappen

• Zie "Aan de slag met opt-in formulieren" voor een volledige doorloop van het aanmaken en configureren van een opt-informulier.
• Zie "Tips voor een effectief opt-in formulier" voor richtlijnen over tekst, plaatsing en incentives die de conversie verbeteren.