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

Met MailBlue kun je het HTML-codeblok gebruiken om je formulier aan te passen met HTML, en kun je CSS gebruiken om elementen te wijzigen.

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 verstand van heeft. Anders zijn er ook vele online kennisbanken zoals deze. 

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 kun je met CSS binnen MailBlue formulieren?
• Hoe pas ik de CSS-code van mijn formulier aan?

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?

Je kunt het HTML-blok gebruiken om je eigen HTML-code aan je formulier toe te voegen. De HTML-code die je toevoegt, wordt alleen toegepast op dit blok, niet op het hele formulier.

Je kunt dit blok gebruiken om links in tekst in te sluiten, opsommingstekens te maken, tekst in dit blok op te maken en nog veel meer.

Houd er rekening mee dat het HTML-blok alleen kan worden gebruikt op inline formulieren. Drijvende box, drijvende balk en modale formulieren bieden niet de mogelijkheid om een HTML-blok toe te voegen.

Voeg het HTML-codeblok toe aan je formulier:

1. Ga vanuit de formulierbouwer naar Velden > Contactvelden.
2. Sleep het "HTML-code" blok naar je formulierlay-out.
3. Klik op de HTML-code op je formulierlay-out.
4. In het rechterpaneel wordt voorbeeldtekst en HTML-code weergegeven. Typ of plak je code in dit vak aan de rechterkant.
5. Terwijl je de code en tekst aan dit vak toevoegt, zie je deze nieuwe tekst en opmaak toegepast op het blok op je formulierlay-out.

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. 

Hoe pas ik de CSS-code van mijn formulier aan?

Je kunt het CSS-invoerpaneel en de Inspecteur-modus gebruiken om visuele elementen van je formulier aan te passen, zoals de breedte van je verzendknop, het aanpassen van het lettertype en de grootte, het centreren van tekst in een element, het wijzigen van de kleur van je tekst en nog veel meer. Alle formuliertypen bevatten het aangepaste CSS-invoerpaneel en de Inspecteur-modus.

1. Klik op de CSS-knop in de rechterbovenhoek van je formulier.
   
   
   
   

2. Een aangepast invoervenster wordt onderaan het scherm van de je formulier weergegeven. 

3. Klik op 'Inspecteur' en klik vervolgens op het element in het formulier dat je wilt aanpassen.

4. Voeg je aangepaste CSS toe in het aangepaste invoervenster.

5. Om de Inspectuer-modus te verlaten, klik je opnieuw op de knop 'Inspecteur'.

6. Om het CSS-invoerpaneel op je formulier te sluiten, klik je op de CSS-knop bovenaan.