In dit artikel lees je hoe je MailBlue-formulieren aanpast aan je merk. Je leert kleuren, lettertypes, lay-outs, aangepaste CSS en ActiveCampaign-branding beheren.
Waar moet ik op letten?
HTML en CSS gebruiken in je formulier is bedoeld voor gevorderde gebruikers. Je moet bekend zijn met deze talen. Ben je niet bekend met HTML of CSS? Werk dan samen met een teamlid of gecertificeerde consultant die hier ervaring mee heeft. Het supportteam kan je niet helpen bij het maken of oplossen van problemen met HTML of CSS die je aan je formulier toevoegt.
Waar vind ik de aanpassingsopties voor mijn formulier?
De aanpassingsopties voor een formulier staan onder de tab 'Stijl' in de formulierbouwer.
Zo open je deze tab voor een formulier:
Klik in het linkermenu op 'Website' > 'Formulieren'.
Klik op de knop 'Formulier bewerken' of maak een nieuw formulier.
De formulierbouwer wordt geladen. Alle bewerkings- en stijlopties verschijnen in het rechterpaneel. Klik in het rechterpaneel op de tab 'Stijl'.
Hoe kies ik een lay-out voor mijn formulier?
Je kunt een lay-out kiezen voor inline formulieren, modale formulieren en zwevend-vak-formulieren. Voor zwevende-balk-formulieren zijn geen lay-outopties beschikbaar.
Lay-outopties voor inline formulieren
Voor een inline formulier kun je kiezen uit twee opties: een horizontale of verticale lay-out.
Lay-outopties voor modale formulieren en zwevend-vak-formulieren
Voor een modaal formulier of zwevend-vak-formulier kun je kiezen uit vier opties: geen afbeelding, afbeelding links, afbeelding bovenaan of afbeelding in het midden.
Hoe pas ik mijn formulier aan?
Met de stijlopties onder 'Lay-out' pas je aan hoe het formulier aan websitebezoekers wordt getoond. Hieronder vind je alle aanpassingsopties.
Algemeen
Algemene aanpassingsopties | Beschrijving |
'Maximale breedte' | Gebruik deze optie om de breedte van je formulier aan te passen. De breedte wordt ingesteld als pixelwaarde. |
'Opvulling' | Opvulling is de ruimte rondom je formulier. Met deze optie kun je de opvulling vergroten of verkleinen. Dit wordt ingesteld als pixelwaarde. |
'Achtergrond formulier' | Klik op de kleurkiezer om de kleur van je formulier te wijzigen of een achtergrondafbeelding toe te voegen. |
'Achtergrond pagina' | Klik op de kleurkiezer om de kleur van je formulier te wijzigen of een achtergrondafbeelding toe te voegen. |
'Randkleur' | Klik op de kleurkiezer om de kleur van de formulierranden te wijzigen. |
'Randstijl' | Gebruik deze optie om een rand aan je knop toe te voegen. Randen worden ingesteld als pixelwaarde. Je kunt de rand vergroten of verkleinen, de randkleur wijzigen en kiezen uit vier randtypes: effen, gestippeld, gestreept en dubbel. Klik op 'Aangepast' om per rand op het formulier een andere breedte en stijl te kiezen. |
'Randhoeken' | Gebruik deze optie om de hoeken van je formulier afgerond of hoekig te maken. De hoekradius wordt ingesteld als pixelwaarde. |
Invoervelden
Invoervelden zijn de velden die websitebezoekers gebruiken om persoonlijke gegevens naar je te versturen. Aanpassingsopties voor invoervelden zijn:
Aanpassingsopties voor invoervelden | Beschrijving |
'Veldachtergrond' | Klik op de kleurkiezer om de kleur van de invoervelden te wijzigen. |
'Veldrand' | Klik op de kleurkiezer om de kleur van de veldranden te wijzigen. |
'Hoeken' | Gebruik deze optie om de hoeken van invoervelden afgerond of hoekig te maken. De hoekradius wordt ingesteld als pixelwaarde. |
Velden
Met het vak 'Velden' pas je het uiterlijk van de velden in je formulier aan. Aanpassingsopties voor velden zijn:
Aanpassingsopties voor velden | Beschrijving |
'Letterkleur koptekst' | Klik op de kleurkiezer om de kleur van het lettertype van de koptekst te wijzigen. |
'Tekststijl koptekst' | Selecteer een lettertype, lettergrootte en of je de tekst vet, cursief of onderstreept wilt maken. |
'Kleur alineatekst' | Klik op de kleurkiezer om de kleur van het lettertype van de alinea te wijzigen. |
'Tekststijl alinea' | Selecteer een lettertype, lettergrootte en of je de tekst vet, cursief of onderstreept wilt maken. |
Knop
Met het vak 'Knop' pas je het uiterlijk van de verzendknop van je formulier aan. Aanpassingsopties voor de knop zijn:
Aanpassingsopties voor de knop | Beschrijving |
'Achtergrond knop' | Wijzig de achtergrondkleur van de verzendknop. |
'Knoptekst' | Wijzig de kleur van de knoptekst. |
'Opvulling knop' | Gebruik deze optie om de opvulling van je knop aan te passen. De opvulling wordt ingesteld als pixelwaarde. |
'Breedte knop' | Wijzig de breedte van de verzendknop. |
'Randkleur' | Klik op de kleurkiezer om de kleur van de knoprand te wijzigen. |
'Randstijl' | Gebruik deze optie om een rand aan je knop toe te voegen. Randen worden ingesteld als pixelwaarde. Je kunt de rand vergroten of verkleinen, de randkleur wijzigen en kiezen uit vier randtypes: effen, gestippeld, gestreept en dubbel. Klik op 'Aangepast' om per rand op het formulier een andere breedte en stijl te kiezen. |
'Randhoeken' | Gebruik deze optie om de hoeken van je knop afgerond of hoekig te maken. De hoekradius wordt ingesteld als pixelwaarde. |
Hoe wijzig ik de tekst op de knop 'Verzenden'?
Je kunt de tekst van de knop 'Verzenden' voor elk formulier wijzigen.
Klik op de pagina 'Formulieren' op de knop 'Ontwerp bewerken' bij het formulier dat je wilt bijwerken.
Klik in de formulierbouwer op de knop 'Verzenden'.
In het rechtermenu verschijnen het knoplabel en een veld. Typ de tekst die je voor de knop wilt gebruiken.
De nieuwe knoptekst wordt automatisch opgeslagen.
Hoe pas ik mijn formulier verder aan met CSS?
Elk formuliertype in MailBlue heeft een optie voor aangepaste CSS. Deze optie is bedoeld voor gevorderde gebruikers die bekend zijn met CSS en hier comfortabel mee werken.
Let op: CSS vraagt om een geavanceerde implementatie en kan complex zijn als je niet bekend bent met code. Het Customer Succes-team kan geen problemen met CSS-code oplossen. Neem contact op met een ontwikkelaar of iemand anders die bekend is met CSS voor hulp bij de implementatie.
De optie voor aangepaste CSS staat voor elk formulier onder de tab 'Stijl' en kan worden gebruikt om extra aanpassingen toe te voegen aan elk formulierelement. Je kunt deze optie bijvoorbeeld gebruiken om:
De breedte en hoogte van invoervelden aan te passen
De breedte en hoogte van de verzendknop aan te passen
De lettergrootte aan te passen
Het lettertype voor losse elementen aan te passen. Zo kun je bijvoorbeeld de knoptekst een ander lettertype geven dan de rest van het formulier.
Zo gebruik je de optie voor aangepaste CSS:
Klik rechtsboven in de formulierbouwer op de schakelaar 'Code-editor' om deze in te schakelen.
Onderaan de formulierbouwer verschijnt een HTML-editor. Typ de CSS in dit vak.
De CSS die je aan het formulier toevoegt, wordt automatisch opgeslagen.
Hoe zet ik ActiveCampaign-branding uit?
Gebruik je een Plus-, Professional- of Enterprise-abonnement? Dan kun je ActiveCampaign-branding uit je formulier verwijderen. Gebruikers met een Starter-abonnement kunnen branding niet uitschakelen.
Zo zet je ActiveCampaign-branding uit:
Klik in de formulierbouwer op de tab 'Stijl'.
Scrol omlaag naar de onderkant van de sectie 'Algemeen'.
Klik op de schakelaar 'ActiveCampaign-branding' om deze op 'Uit' te zetten.
Deze instelling wordt automatisch opgeslagen.
Welke aanvullende aanpassingsopties kan ik gebruiken?
Met de aanpassingsopties onder 'Opties' bepaal je wanneer modale formulieren, zwevend-vak-formulieren en zwevende formulieren op je website verschijnen, hoe berichten worden getoond nadat het formulier is verzonden, welke formulieracties worden uitgevoerd en welke formulierinstellingen gelden.
Moet je de grootte van een formulier op een mobiel apparaat aanpassen? Dan kun je dit doen met CSS en media queries.
Aanvullende aanpassingen voor modale formulieren, zwevend-vak-formulieren en zwevende-balk-formulieren
Deze formuliertypes bieden aanvullende aanpassingsopties waarmee je bepaalt wanneer en hoe het formulier aan websitebezoekers wordt getoond. Deze instellingen staan onder 'Opties' > 'Pop-upeffect' in het rechtermenu van de formulierbouwer.
Formuliertype | Opties |
'Modaal formulier' |
|
'Zwevend vak' |
|
'Zwevende balk' |
|
Video uitleg
In deze video wordt uitgelegd hoe je het Inline formulier kunt vormgeven.
Veelgestelde vragen
Kun je elk formulier een andere lay-out geven?
Kun je elk formulier een andere lay-out geven?
Je kunt lay-outs kiezen voor inline formulieren, modale formulieren en zwevend-vak-formulieren. Voor zwevende-balk-formulieren zijn geen lay-outopties beschikbaar.
Worden wijzigingen in knoptekst, CSS en branding automatisch opgeslagen?
Worden wijzigingen in knoptekst, CSS en branding automatisch opgeslagen?
Ja. De nieuwe knoptekst, toegevoegde CSS en de instelling voor MailBlue-branding worden automatisch opgeslagen.
Kan het supportteam helpen met HTML of CSS?
Kan het supportteam helpen met HTML of CSS?
Nee. Het supportteam kan je niet helpen bij het maken of oplossen van problemen met HTML of CSS die je aan je formulier toevoegt.