Hoe gebruik ik HTML en CSS in mijn formulier(en)?

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 betreft een item waarin gesproken wordt 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. 

HTML

Met het ingebouwde HTML-blok 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 hiermee de mogelijkheid tekst en uitlijning naar wens te ontwerpen. 

Houd er rekening mee dat een HTML-blok alleen kan worden gebruikt bij inline-formulieren. Een zwevende balk, vak of modale formulieren ondersteunen deze optie niet. 

Voeg het HTML-blok toe aan jouw 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 in het formulier. Je vindt dit blok onder 'Velden' -> 'Standaard'. 

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. 

Schermafbeelding_2022-01-27_om_15.09.30.png

Schermafbeelding_2022-01-27_om_15.11.00.png

Basis HTML codes

Het is mogelijk de volgende stijlopties te gebruiken om jouw HTML-blok 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>

Schermafbeelding_2022-01-27_om_15.13.44.png

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>

Schermafbeelding_2022-01-27_om_15.15.09.png

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>

Schermafbeelding_2022-01-27_om_15.16.26.png

Voeg een link toe

Gebruikte tags: <a href> </a href>

Bij het gebruik van bovenstaande 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>

Schermafbeelding_2022-01-27_om_15.17.49.png

Voeg een scheidingslijn toe

Voorbeeldcode die is gebruikt:
<div style="height:10px;border-bottom:1px solid #CCCCCC">
&nbsp;
</div>

Door deze code toe te voegen kun je een lijn creëren die onderscheid geeft tussen twee elementen. 

Schermafbeelding_2022-01-27_om_15.19.42.png

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>

Schermafbeelding_2022-01-27_om_15.21.08.png

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>

Schermafbeelding_2022-01-27_om_15.23.43.png

CSS

Via het aangepaste CSS-vak en 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. 

Om het aangepaste CSS-vak en Inspecteur te gebruiken, klik je op het tabblad 'Stijl' in de rechterbovenhoek van de formulier editor. Klik vervolgens op de Inspecteur knop en kies het gewenste element. Door op het element te klikken kun je deze naar wens aanpassen.

Schermafbeelding_2022-01-27_om_14.23.52.png

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: numberpx;
En vervang 'number' door een daadwerkelijk getal. In dit voorbeeld gebruiken we 250px.

Schermafbeelding_2022-01-27_om_14.33.52.png Schermafbeelding_2022-01-27_om_14.34.05.png

Schermafbeelding_2022-01-27_om_14.34.35.png Schermafbeelding_2022-01-27_om_14.34.42.png

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 verzend-knop 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. 

Schermafbeelding_2022-01-27_om_14.33.52.png Schermafbeelding_2022-01-27_om_14.34.05.png

Schermafbeelding_2022-01-27_om_14.47.01.png Schermafbeelding_2022-01-27_om_14.47.09.png

Centreer tekst middels 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.

Schermafbeelding_2022-01-27_om_14.33.52.png Schermafbeelding_2022-01-27_om_14.58.29.png

Schermafbeelding_2022-01-27_om_14.57.35.png Schermafbeelding_2022-01-27_om_14.57.46.png

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

Schermafbeelding_2022-01-27_om_14.33.52.png Schermafbeelding_2022-01-27_om_14.58.29.png

Schermafbeelding_2022-01-27_om_15.05.36.png Schermafbeelding_2022-01-27_om_15.06.26.png

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0