Building forms
Design and branding
Colors, fonts, alignment and corners, pictures and videos on any screen, and your own logo in place of hootform's badge.
Every form has its own design. Open the Build tab and switch the settings pane from the selected screen to Design. The preview updates as you change things, and the design is published with the form.
Layout
Layout, at the top of the Design pane, decides how people move through the form:
| Layout | What respondents see |
|---|---|
| One question at a time | One question per screen, with a progress bar and keyboard shortcuts. The default. |
| All questions on one page | Every question on one scrolling page with a single Submit button, like a paper form or a Google Form. |
Both layouts are free on every plan, and everything else works the same way on one page:
- Logic shows and hides questions as people answer. A question a rule skips disappears, and it doesn't need an answer even if it's required.
- Answer recall and scores update in the titles as people type.
- Every change is saved as it's made. Someone who leaves halfway shows up as a partial response, their drop-off appears in Insights, and they pick up where they left off when they come back.
- Submit checks the whole page at once and points out every answer that needs another look.
The builder's preview shows the page the same way, with every question editable where it stands. A welcome screen's title and message head the page instead of coming before it. Files and signatures are uploaded when the respondent presses Submit. Follow-ups only run one question at a time, so a single-page form skips them. Your follow-up settings are kept, so they come back if you switch the layout back.
Review answers before submitting
On a form that shows one question at a time, turn on Review answers before submitting under Layout to add a review screen after the last question. It lists every question the respondent answered on their path, with their answer, and anything optional they skipped as Not answered. Selecting an answer goes back to that question; once it's answered again, they're taken straight back to the review rather than through the rest of the form. If the change sends them down a branch with a required question they haven't answered yet, they're asked it first.
The response is only submitted when they press Submit on the review screen, so the last question's button says OK or Next instead. Someone who leaves on the review screen is a partial response, shown as stopped at Review screen, and comes back to it when they return. The setting is free on every plan. A single-page form already shows every answer, so it has no review screen.
Themes
Start from one of the ready-made themes (Light, Dark, Midnight, Forest, Sunset, Ocean, Salon, Editorial and Mono) and adjust from there. A theme sets the colors and the font; nothing else changes.
Colors
| Color | Used for |
|---|---|
| Background | The page behind everything |
| Text | Titles, descriptions and answers |
| Accent | Selected choices, focused fields, the required marker and the progress bar |
| Button | The button that moves the form on |
| Button text | The words on that button |
The softer greys, lines and tints on the form are mixed from your text and accent colors, so a form never shows a color you didn't choose. If two colors are too close to read comfortably, the builder warns you that they're Hard to read.
Type and layout
| Setting | Options |
|---|---|
| Font | hootform's default pairing (Manrope for text, Space Grotesk for headings), or Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Work Sans, DM Sans, Space Grotesk, Playfair Display, Merriweather, Lora or IBM Plex Mono |
| Text size | Small, medium or large |
| Alignment | Left or center |
| Corners | Square, rounded or pill-shaped, for buttons, fields and choices |
Pictures and videos
Any screen can show a picture or a video: a question, the welcome screen, or an ending. Set one in that screen's settings under Picture or video.
A picture can come from two places:
- Upload: a PNG, JPEG, WebP or GIF from your computer, up to 10 MB. hootform keeps the file, so it can't stop working.
- Or paste a link: a direct
https://link to a picture on another site.
Choosing one replaces the other. A video is always a link.
| Setting | What it does |
|---|---|
| Kind | Picture or Video |
| Upload | For a picture: one from your computer |
| Or paste a link / Link | Where the picture or video lives. hootform shows it from there rather than storing a copy. |
| Alt text | A description read aloud to people who can't see the picture. Leave blank if it's only decoration. |
| Placement | Above the question, as a banner inside the card, or Half the screen, edge to edge with the question on the other half |
| Which half | For half-screen pictures: On the right or On the left |
On a phone there are no halves, so a half-screen picture sits above the question.
Links must start with https://. Videos can be YouTube, Vimeo or Loom links, or a direct link to a video file. A link that stops working leaves a gap rather than a broken picture.
The form's picture
The Design pane has its own picture or video for the whole form. Every screen that doesn't have one of its own shows it, which is the quickest way to give a whole form one look. It can be uploaded or linked, like any other picture.
Your brand
Under Wordmark in the Design pane, give your organization's Name, or a Logo that replaces it. A logo can be:
- Uploaded: a PNG, JPEG, WebP or GIF under 2 MB. SVG isn't accepted.
- Linked: a Logo link to a picture on your own site, starting with
https://.
If you set both, the upload is used. Alignment puts the wordmark on the left, in the center or on the right; if you don't choose, it follows the form's alignment.
The wordmark sits at the top of every screen, including follow-ups and endings.
Where the design applies
The design covers everything a respondent sees for this form: the questions, the welcome screen, endings, the password page and notices such as "This form is closed". It doesn't change the dashboard, or the emails hootform sends to your team.