Banners

You can display an SVG pattern, image, video, or GIF alongside a question to enrich the submission experience.

Here's a quick example:

await form.short("Welcome! What is your name?", {
  banner: {
    random: 'landscape',
  }
});

Which generates a question that looks like:

Videos (or raw GIFs) are supported too:

Formulate can also generate SVG banner images based on patterns and constraints you specify. Simply pass in a pattern name:

let name = await form.short("Welcome to this form! First off, what is your name?", {
  banner: {
    pattern: 'boxes',
  },
});

To get a banner with that pattern (and randomly-generated colors):

For more control, pick your own colors, scaling factor, and opacity:

let name = await form.short("Welcome to our online store!", {
  banner: {
    pattern: {
      zoom: 5.0,
      opacity: 0.3,
      style: 'squaresInSquares',
      fg: '#c7d2fe', 
      bg: '#818cf8',
    },
  },
});

which creates:

The full list of available patterns is documented below. All patterns are from the (wonderful) Hero Patterns website.

Options

The banner object can contain one or more of these keys:

Key	Type
random	string	Load a random image based on keywords passed here. (Example: landscape or yellow+bird)
small	boolean	Use a small inset banner if true
imageUrl	string	The banner displays the image at this URL
videoUrl	string	The banner displays the video at this URL
pattern	string or Pattern	Pass a pattern name as a string, or pass a Pattern object (documented below) for more customization options

If the imageUrl, videoUrl, random and pattern keys are omitted, a random pattern is generated. {banner: true} is useful shorthand if you simply want a pattern.

---

A Pattern object can contain one or more of these keys:

Key	Type
zoom	float	Scaling factor for the pattern. 1.0 and above. (Default: 4.0)
style	string	The name of a pattern to use
fg	string	Foreground color in CSS hex color notation (Default: #000000)
bg	string	Background color in CSS hex color notation (Default: #FFFFFF)
opacity	float	How transparent the pattern should be: a float between 0.0 and 1.0. (Default: 1.0)

Pattern Styles

Note that you can customize the colors, scaling, and opacity for all these patterns.

Style Name
anchorsAway
architect
autumn
aztec
bamboo
bankNote
bathroomFloor
bevelCircle
boxes
brickWall
bubbles
cage
charlieBrown
churchOnSunday
circlesAndSquares
circuitBoard
connections
corkScrew
current
curtain
cutout
deathStar
diagonalLines
diagonalStripes
dominos
endlessClouds
eyes
fallingTriangles
fancyRectangles
flippedDiamonds
floatingCogs
floorTile
formalInvitation
fourPointStars
glamorous
graphPaper
groovy
happyIntersection
heavyRain
hexagons
hideout
houndstooth
iLikeFood
intersectingCircles
jigsaw
jupiter
kiwi
leaf
linesInMotion
lips
lisbon
melt
moroccan
morphingDiamonds
overcast
overlappingCircles
overlappingDiamonds
overlappingHexagons
parkayFloor
pianoMan
pieFactory
pixelDots
plus
polkaDots
rails
rain
randomShapes
roundedPlusConnected
signal
skulls
slantedStars
squares
squaresInSquares
stampCollection
steelBeams
stripes
temple
texture
ticTacToe
tinyCheckers
topography
volcanoLamp
wallpaper
wiggle
xEquals
yyy
zigZag