In dit artikel laten we je graag zien hoe je HTML-codeblokken gebruikt en delen we enkele eenvoudige HTML- en CSS-trucs die je kunt gebruiken om jouw formulieren te optimaliseren en personaliseren.
Let op: dit artikel gaat over een relatief geavanceerde functie binnen MailBlue. Bij het inzetten van deze tips is minimaal de basiskennis van CSS en HTML vereist. Ben je niet bekend met CSS en HTML? Dan raden we je aan het ontwerp hiervan op te pakken met iemand die hier wel verstand van heeft om teleurstelling te voorkomen.
Wil je graag meer leren over de basis van CSS en HTML? Op het internet zijn hierover enorm veel uitgebreide artikelen beschikbaar.
Wat we behandelen in dit artikel:
- Wat kun je met HTML binnen de MailBlue formulieren?
- Hoe voeg ik een HTML-codeblok toe aan mijn formulier?
- Wat zijn de basis HTML-codes die je kunt gebruiken in het MailBlue formulier?
- Wat je kunt met CSS binnen de MailBlue formulieren?
- Waar in het MailBlue formulier kan ik mijn CSS-codering toevoegen?
- Welke basis CSS-codes kan ik gebruiken?
Wat kun je met HTML binnen de MailBlue formulieren?
Met het ingebouwde HTML-codeblok kun je tekst met ingesloten links toevoegen aan jouw inline-formulier. Je kunt deze functie gebruiken wanneer je bijvoorbeeld contacten de mogelijkheid wil bieden om een video of het privacybeleid op jouw website te bekijken. Ook heb je met het HTML-codeblok de mogelijkheid tekst en uitlijning meer naar wens te ontwerpen.
Houd er rekening mee dat een HTML-blok alleen kan worden gebruikt bij inline-formulieren. De zwevende balk, zwevende box of het modaal formulier ondersteunen deze optie niet.
Hoe voeg ik een HTML-codeblok toe aan mijn formulier?
Om dit HTML-blok toe te voegen aan het formulier kun je de drag-and-drop functie gebruiken. Hiermee 'sleep' je het HTML-blok gemakkelijk naar elke plek binnen het formulier. Je vindt dit blok onder 'Velden' → 'Standaard velden'.
Om te beginnen met het invullen van het HTML-blok kun je op het blok in jouw formulier klikken. Wanneer je hier op klikt, krijg je aan de rechterkant van het scherm de mogelijkheid het blok in te vullen.
Wat zijn de basis HTML-codes die je kunt gebruiken in het MailBlue formulier?
Het is mogelijk de volgende stijlopties te gebruiken om jouw HTML-inhoudsblok vorm te geven.
Regeleinde
In dit voorbeeld hebben we een regeleinde tussen twee zinnen ingevoegd. Je kunt dit op de volgende manier toevoegen:
<p>Laat hier jouw naam en e-mailadres achter om je in te schrijven voor onze nieuwsbrief.</p><p>Vergeet niet ons toe te voegen aan je contactenlijst!</p>
Dikgedrukte tekst
Hiervoor kun je de tags <b> </b> gebruiken.
In dit voorbeeld maken we tekst van een bepaalde zin uit het HTML-blok dikgedrukt. Dit kun je als volgt opzetten:
Laat hier jouw naam en e-mailadres achter om je in te schrijven voor onze nieuwsbrief. <b>Vergeet niet ons toe te voegen aan je contactenlijst!</b>
Onderstreepte tekst
Gebruikte tags: <u> </u>
In dit voorbeeld is het de bedoeling dat de tekst onderstreept wordt. Je kunt dit als volgt toepassen:
Laat hier jouw naam en e-mailadres achter om je in te schrijven voor onze nieuwsbrief. <u>Vergeet niet ons toe te voegen aan je contactenlijst!</u>
Voeg een link toe
Gebruikte tags: <a href> </a href>
Bij het gebruik van deze tags kun je een link toevoegen aan jouw HTML-tekst. Je kunt bijvoorbeeld jouw privacy policy toevoegen of verwijzen naar juridische informatie, zodat contacten hierop kunnen klikken. Dit kun je bijvoorbeeld als volgt opstellen:
Laat hier jouw naam en e-mailadres achter om je in te schrijven voor onze nieuwsbrief. <a href="https://mailblue.nl/legal/">Lees alle juridische informatie hier.</a>
Voeg een scheidingslijn toe
De voorbeeldcode die is gebruikt:
<div style="height:10px;border-bottom:1px solid #CCCCCC">
</div>
Door deze code toe te voegen kun je een lijn creëren die onderscheid geeft tussen twee elementen.
Maak een lijst met opsommingstekens
De tags die hiervoor worden gebruikt zijn: <li> </li>
In dit voorbeeld is het de bedoeling dat er een opsommingslijst wordt gecreëerd. In deze opsomming kun je bijvoorbeeld opnoemen wat contacten kunnen verwachten wanneer ze zich inschrijven voor jouw nieuwsbrief/mailings. Je kunt dit als volgt doen:
Lees en leer meer over het volgende: <li>Campagnes</li><li>Automatiseringen</li><li>Lijsten</li>
Voeg kleur toe aan de tekst
Voeg kleur toe aan jouw tekst door de volgende codes te gebruiken:
<span style="color: #267ec2"; <p>Laat hier jouw naam en e-mailadres achter om je in te schrijven voor onze nieuwsbrief.</p> </span>
Wat kun je met CSS binnen MailBlue formulieren?
Via het aangepaste CSS-vak en de Inspecteur knop kun je jouw formulier naar wens aanpassen. Hier kun je bijvoorbeeld d.m.v. CSS de breedte van de verzendknop veranderen, het lettertype en de lettergrootte aanpassen, tekst centreren, de kleur van tekst wijzigen en nog veel meer. Deze optie bevindt zich onder het tabblad 'Stijl'. Alle type formulieren bevatten een aangepast CSS-vak en Inspecteur knop.
Waar in het MailBlue formulier kan ik mijn CSS-codering toevoegen?
Om het aangepaste CSS-vak en de Inspecteur te gebruiken, klik je op het tabblad 'Stijl' in de rechterbovenhoek van de formulieren bewerker. Klik vervolgens op de Inspecteur knop en kies het gewenste element. Door op het element te klikken kun je deze naar wens aanpassen.
Welke basis CSS-codes kan ik gebruiken?
Pas de breedte van een formulier element aan
Je kunt een percentage of pixel gebruiken om de breedte van een element te bepalen. In dit voorbeeld gaan we de breedte van de knop 'Verzenden' aanpassen:
1. Ga naar 'Stijl' en klik vervolgens op 'Inspecteur'.
2. Kies de verzendknop als doelwit door er op te klikken.
3. Type in het CSS-vak: width: nummerpx;
En vervang 'nummer' door een daadwerkelijk getal. In dit voorbeeld gebruiken we 250px.
Pas het lettertype en de lettergrootte aan
Via deze CSS-box kun je ook het lettertype van jouw formulier aanpassen. In dit voorbeeld gaan we de verzendknop personaliseren door het lettertype te veranderen naar 'Georgia'. Daarbij veranderen we de lettergrootte naar 25 pixel.
1. Ga naar 'Stijl' en klik op de inspecteur functie.
2. Nadat je op 'Inspecteur' in het CSS-menu hebt geklikt, kun je de verzendknop of een ander gewenst onderdeel 'selecteren'.
3. Vul in het CSS-vak het volgende in: font-size: 25px;font-family: Georgia !important:
4. Het gekozen lettertype Georgia en de grootte 25 pixel is nu toegepast.
Centreer tekst door middel van het CSS-blok
1. Ga naar 'Stijl' en klik op de inspecteur functie.
2. Kies een stuk tekst als doelwit door er op te klikken.
3. Type in de CSS-box het volgende: text-align: center
4. De tekst zal nu in het midden uitgelijnd zijn.
Voeg kleur toe via CSS
1. Ga naar 'Stijl' en klik op de inspecteur functie.
2. Kies een stuk tekst of knop als doelwit door er op te klikken.
3. Type in de CSS-box het volgende: color:#hexcodeforcolor;
Vervang het stukje 'hexcodeforcolor' door een daadwerkelijke kleurcode.
In dit voorbeeld gebruiken we de kleurcode #f441b8
4. Voeg de code toe en de kleur zal veranderen. Gebruik dus bijvoorbeeld color:#f441b8