Een formulier vormgeven.

Ontwerp uit BrandStudio overnemen

Elk nieuw formulier krijgt de kleuren en het lettertype van je merk uit BrandStudio — ook een formulier uit een sjabloon of van Kenji. In de stap “Ontwerp” staat daarvoor bovenaan de kaart “Merk” met de schakelaar “Ontwerp uit BrandStudio overnemen”. Zolang die aan staat, zijn de regelaars eronder vergrendeld; verander je iets in BrandStudio, dan volgt het formulier vanzelf.

Zet je de schakelaar uit, dan houdt het formulier het uiterlijk dat het op dat moment heeft en geef je het vanaf daar zelf vorm; de kaart toont “eigen ontwerp”. Zet je hem weer aan, dan volgt het opnieuw het merk — je eigen ontwerp wordt opzijgelegd en met “Ongedaan maken: eigen ontwerp van …” haal je het terug. Heeft je merk nog geen kleuren, dan geldt tot die tijd het eenvoudige thema met het lettertype van het merk.

De kaart “Merk” verschijnt alleen als je account een merk heeft. De schakelaar werkt meteen, zonder “Opslaan”.

1. 1Open het formulier in de stap “Ontwerp”.
2. 2Zet “Ontwerp uit BrandStudio overnemen” uit als je het zelf vorm wilt geven.
3. 3Stel kleuren, lettertype en velden in en klik op “Opslaan”.

Logo en bedrijfsgegevens

Met “Logo en bedrijfsgegevens van het merk tonen” in dezelfde kaart staan boven het formulier het logo en de naam van je merk, en daaronder bedrijfsnaam, e-mail, telefoon, website en de pictogrammen van je socialemediakanalen die je in SocialStudio hebt vastgelegd. Melding, kopie en pdf-kopie bevatten dezelfde gegevens, en de paginatitel in de browser luidt dan bijvoorbeeld “Tafel reserveren · Café Lumen”.

De schakelaar staat standaard aan en hangt niet af van het ontwerp: wie zelf vormgeeft, toont toch zijn logo. Ontbreken er bedrijfsgegevens bij het merk, dan gebruikt het formulier de afzender uit Invoice. De schakelaar geldt na “Opslaan”; hoe het eruitziet, laat “Voorbeeld in de browser” zien.

1. 1Open de stap “Ontwerp”.
2. 2Zet in de kaart “Merk” de optie “Logo en bedrijfsgegevens van het merk tonen” aan of uit.
3. 3Klik op “Opslaan” en controleer het met “Voorbeeld in de browser”.

Sferen en kleuren

Geef je het zelf vorm, dan stelt één klik onder “Sferen” alles in één keer in: Sober, Middernacht, Salie, Zand, Roze, Oceaan, Inkt of Hemel. Daarna verfijn je onder “Kleuren” elk onderdeel afzonderlijk: “Achtergrond”, “Kaart” — het vlak waarop de velden staan —, “Tekstkleur” en “Knoppen en accent”.

Voor “Achtergrond” en “Kaart” is er bovendien de regelaar “Dekking”, zodat een achtergrondafbeelding erdoorheen kan schijnen. Tekst en accent blijven volledig dekkend: halfdoorzichtige tekst zou afhangen van wat eronder ligt en ongemerkt onleesbaar kunnen worden. Kies een tekstkleur en kaartkleur die duidelijk van elkaar verschillen — samen bepalen ze de leesbaarheid van je formulier.

1. 1Zet in de stap “Ontwerp” het overnemen uit BrandStudio uit.
2. 2Klik op een sfeer, bijvoorbeeld “Zand”.
3. 3Pas afzonderlijke kleuren en de dekking aan en klik op “Opslaan”.

Lettertype

Onder “Lettertype” kies je een van elf vrije lettertypen — “Systeem”, Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope of IBM Plex Mono. Het voorbeeld toont het meteen.

Een eigen lettertype upload je als bestand: “Eigen lettertypebestand uploaden (woff2, hoogstens 2 MB)”. De bestandsnaam wordt de naam ervan, en met “Verwijderen” haal je het weer weg. Staat je lettertype bij een lettertypedienst, open dan “Eigen lettertype via link” en vul de link naar het CSS-bestand (https) en de naam van de lettertypefamilie in — het voorbeeld laat zien of die twee bij elkaar passen. Het lettertype wordt dan geladen vanaf de plek waar de link naar verwijst. Een geüpload bestand gaat voor op de link en de keuzelijst.

1. 1Zet in de stap “Ontwerp” het overnemen uit BrandStudio uit.
2. 2Kies onder “Lettertype” een lettertype — of upload een woff2-bestand.
3. 3Klik op “Opslaan”.

Veldstijl en afronding

Onder “Velden” bepaal je hoe de invoervelden eruitzien: “Rand” met een fijne omlijning, “Vlak” met een licht getinte achtergrond of “Lijn” met alleen een basislijn — de rustigste vorm. De regelaar “Afronding” maakt kaart, velden en knoppen hoekiger of ronder.

Zoals alle regelaars in deze stap werkt dit alleen als je het overnemen uit BrandStudio hebt uitgezet, en het geldt na “Opslaan”.

Achtergrondafbeelding

Achter de kaart kan een afbeelding liggen. Onder “Achtergrondafbeelding” staan drie bronnen: een eigen bestand (PNG, JPEG of WebP tot 3 MB), de zoekfunctie “Of vrije afbeeldingen zoeken …” en “Of kies uit mijn afbeeldingen” uit je MediaStudio. In alle gevallen wordt de afbeelding naar je formulier gekopieerd en vanaf je eigen adres geleverd — er komt geen externe dienst aan te pas.

De kaart met de velden blijft erboven leesbaar; hoeveel van de afbeelding erdoorheen schijnt, regel je met de dekking van “Kaart”. Met “Afbeelding verwijderen” haal je haar weer weg. Een gekozen afbeelding wordt meteen opgeslagen. Uploaden, zoeken en je eigen bibliotheek zijn vergrendeld zolang het formulier je merk volgt.

1. 1Zet in de stap “Ontwerp” het overnemen uit BrandStudio uit.
2. 2Typ onder “Achtergrondafbeelding” een zoekterm zoals “café” en klik op “Zoeken”.
3. 3Klik op een afbeelding — die ligt meteen achter het formulier.

Voorbeeld en testen

In het midden van “Ontwerp” staat je formulier zoals je gasten het zien — met dezelfde kleuren, lettertypen en rijen als op de invulpagina. Met “Desktop”, “Tablet” en “Telefoon” wissel je van breedte; op telefoonbreedte komen rijen onder elkaar te staan, precies zoals bij de gast. Links staat de opbouw: een klik op een veld brengt je naar “Bouwen”, met dat veld al geselecteerd.

“Testen” maakt het voorbeeld invulbaar: voorwaarden werken, maar er wordt niets opgeslagen. “Voorbeeld” schakelt terug. “Voorbeeld in de browser” slaat eerst op en opent dan de echte invulpagina in een nieuw tabblad — daar zie je ook logo en bedrijfsgegevens, richtprijs en besteltotaal. Dat kan ook zolang het formulier nog gesloten is; een balk bovenaan meldt “Voorbeeld”, en vanaf daar wordt niets verzonden.

In de stap “Bouwen” wordt het formulier bewust neutraal weergegeven; het uiterlijk zie je in deze stap.

1. 1Open de stap “Ontwerp” en kies “Telefoon”.
2. 2Klik op “Testen” en vul het formulier bij wijze van proef in.
3. 3Klik op “Voorbeeld in de browser” om de echte pagina te zien.