Styles let your forms match your organisation's brand and sit neatly in your website.
There are two levels:
- Organisation styles, on the Styles page. Named looks such as Main brand or Christmas appeal that any form can use. One is the default.
- A form's own settings, under Form settings → Style in the builder. Changes for one form only, on top of its style.
Anything you leave blank is taken from the level above. A form takes it from its style, and a style takes it from Vega's own look.
Vega's own look
A form whose style sets no colours and no font wears Vega's own look, from the Vega design system: the Aktiv Grotesk typeface, the brand purple as flat colour, sentence-case section titles and clean, light cards. As soon as a style sets a colour or font, the form follows that style instead.
The Styles page
Click Styles in the top menu.
Creating and managing styles
- + New style starts a new one. Duplicate copies the one you're looking at.
- Style name: e.g. Main brand.
- Default style: used by every form that doesn't pick another. To change the default, make a different style the default. You can't untick it.
- Delete style: any forms using it switch to the default. The default style can't be deleted. You're asked to confirm first.
- Reset to Vega look clears every setting.
- Click Save style (or Create style) when you're happy. Moving to another style with changes not saved asks whether to discard them.
Each style shows how many forms use it. Forms using this style lists them, and notes any that change some settings of their own.
Match my website
Type your website address under Website to match and click Match my website. Vega suggests colours, a font, corner style and logo from your site, and lists what it found and what it couldn't. Nothing is saved until you click Save, so check the preview first.
Previewing
The preview on the right updates as you change settings. Use Preview to see a sample form or one of your own forms in the style.
The settings
Brand
| Setting | What it does |
|---|---|
| Brand colour | Buttons, headings, highlights and selected options |
| Button text | The colour of text on buttons. Automatic picks whichever reads best |
| Logo | No logo, Left or Centred |
| Logo image | The logo's web address. Leave blank to use your organisation's logo from Vega |
| Header image | An optional banner across the top of the form |
Look
| Setting | Options |
|---|---|
| Font | A list of common fonts, Another Google font… (type its name exactly as Google Fonts shows it), or Adobe Fonts kit… |
| Corners | Square, Rounded or Pill |
| Spacing | Comfortable or Compact |
| Width | Narrow, Standard, Wide or Full width |
| Background | Vega gradient, Plain colour, or Transparent (your web page shows through) |
| Background colour, Text, Cards and fields | Colours for each |
If a colour combination would be hard to read, a warning appears at the top. Fix it before using the style.
Adobe Fonts: enter the Kit ID and the font's CSS name from your Adobe Fonts web project, and add forms.vega.works to that project's domains, or Adobe won't supply the font.
Advanced
Custom CSS is for web developers who want finer control. It only affects the form.
Styling one form
In the builder, click Form settings and choose the Style tab. The canvas shows the form itself in the style as you change it, including changes you haven't saved yet. While the Style tab is open the canvas shows the form view, even if you were using Outline.
- Style: choose which organisation style this form uses, or Default.
- The settings below change this form only. Leave one blank to use the style's.
- Click Edit styles → to go to the Styles page.
Style changes are saved like any other change to the form: automatically on an inactive form, or when you click Save on a live one. See Building a form.
Comments
0 comments
Please sign in to leave a comment.