For the complete documentation index, see llms.txt. This page is also available as Markdown.

๐Ÿ” Typography & controls

Choose the typeface of your Dapta Form (nine built-in fonts or your own .woff2 file) and shape its controls: corner radius, button style, full-width button and the progress indicator (Bar, Dots, Count

Two cards in the Design panel decide how the form feels to use: Typography sets the typeface, and Shape and controls sets corners, buttons and how progress is shown. All of them update the live preview as you click.


Step 1: Open your form, stay on Build, click Design in the toolbar and scroll to the Typography card.


Step 2: Open the Typeface list and pick a font. The list is grouped into Sans, Serif and Your own. Every built-in font is served by Dapta Forms itself, so the public form loads nothing from an outside font service.

The Typeface list open, grouped into Sans (Figtree, Poppins, Inter, DM Sans, Space Grotesk, Manrope, Work Sans), Serif (Fraunces, Playfair Display) and Your own
The typeface list. Each option is drawn in its own font. Fraunces is selected here.
Group
Typefaces

Sans

Figtree (default), Poppins, Inter, DM Sans, Space Grotesk, Manrope, Work Sans

Serif

Fraunces, Playfair Display

Your own

A font file you host yourself (see Step 3)


Step 3: To use a brand font that is not in the list, choose Your own. Two fields appear: Font name (the family name, for example Sรถhne) and Font file URL (.woff2) (a public link to the font file). Both fields are required; until both are filled, the form keeps using the default typeface.

Typeface set to Your own, showing the Font name and Font file URL (.woff2) fields
Host the .woff2 file yourself and paste its link. Both fields are required.

๐Ÿ’ก Tip: Make sure the font file is reachable from any browser (a public URL, no login) and that your license allows web use. If the file cannot be loaded, respondents see the default typeface.


Step 4: Scroll to the Shape and controls card and set the four controls. The preview on the right shows the result on the current screen.

The Shape and controls card with Corners set to Round, Button set to Outline, Full-width button on and Progress set to Dots; the preview shows an outlined Next button and dots above the question
Round corners, an Outline button and Dots progress, reflected in the preview.
Control
Options
What it changes

Corners

Sharp, Soft, Round

The corner radius of inputs, option cards, buttons and the question card.

Button

Solid, Outline, Soft

Solid fills the button with the accent color. Outline draws an accent border with a transparent inside. Soft uses a light tint of the accent.

Full-width button

On / off

On (the default): the Next, Submit and Start buttons stretch across the content width. Off: they size to their label. On phones narrower than 480 px the button is always full width.

Progress

Bar, Dots, Counter, Hidden

How far along the respondent is. Bar is a thin line that fills up, Dots shows one dot per question, Counter shows "Step 2 of 6", Hidden removes the indicator from the screen (it is still announced to screen readers).

โš ๏ธ Note: Progress only applies to the Slides layout. On a One page form every question is on the same screen, so the control is not shown.

๐Ÿ’ก Tip: The Label on button contrast readout in the Colors card only appears while Button is Solid: with Outline or Soft the label sits on the form background, which the Text on background readout already covers.


Step 5: Click Publish and open the live form to check the result on a real device.

The published form on desktop using the Fraunces typeface, round corners, an outlined full-width Next button and dots as the progress indicator
The published form: serif typeface, round corners, outline button and dots progress.

What's next

Last updated