Web forms: font, colours and preview

A web form is shown on your website inside a frame. A frame does not take your website's own styles, so the form has a look of its own, which you set on the Theme tab of the form. ASTRO turns your choices into the form's styling; you cannot paste styling code of your own, which keeps every form safe and readable.

Start from a look

Select Light, Dark or Minimal to start from a ready-made look, or Use brand colours to take the button colour and the text colour from the form's brand. You can change everything afterwards.

Font

Choose a Font from the standard list (System default, Arial / Helvetica, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Garamond and Courier New) and a Size. These fonts are on every computer and phone, so nothing is loaded from elsewhere.

Colours

Each colour has a colour picker and a box for the colour code. Click the square to pick a colour, or type the code in the box, for example #1A73E8 or the short form #17E; the # is optional. The picker and the box always show the same colour. Reset to default puts the standard colour back.

  • Text and Labels: the words on the form.
  • Form background, or tick Transparent background to let your page show behind the form.
  • Field background, Field border and Field focus (the outline of the field being typed in).
  • Button, Button text and Button when pointed at (worked out from the button colour until you change it).
  • Errors: the messages under a field that needs attention.

If text would be hard to read on its background, ASTRO shows a warning with the contrast it measured. It is a warning only: you can still save and publish.

Shape, spacing and layout

Choose the Corners, whether Fields are outlined or filled, the Button width, the Spacing and how wide the form may grow. Under Layout, put the fields in one or two Columns, the Labels above or left of the fields, the form on the left or centred, and choose whether the title and introduction show. Each field's own width is in its Settings.

Preview

The Preview under the builder shows the form as visitors will see it, with every change as you make it. Switch between Desktop and Phone, and between On a white page and On a dark page to see the form on your website's background. The preview's button does not send anything. Save and publish to make the look live.

Related