.png?fit=max&auto=format&n=EQK5eX9kTD8NzWwA&q=85&s=878008bf159fcc4964d0c0d508b6e400)
.png?fit=max&auto=format&n=EQK5eX9kTD8NzWwA&q=85&s=e7fddd192d86dd299bb26a190e6a7e96)
Opening the builder
The builder opens automatically when you create or edit any form, survey, or quiz:- Sites > Forms > New Form or edit an existing form
- Sites > Surveys > New Survey or edit an existing survey
- Sites > Quizzes > New Quiz or edit an existing quiz
Builder layout
The builder interface is divided into three panels:Left panel — field library
Left panel — field library
Drag fields from the library onto the canvas in the center. Available field types depend on the content type (form, survey, or quiz). Common fields include text inputs, dropdowns, checkboxes, rating scales, and file uploads.
Center panel — canvas
Center panel — canvas
The canvas shows a live preview of the form, survey, or quiz as the respondent will see it. Drag, reorder, and resize fields directly on the canvas. Click any field to select it and edit its settings.
Right panel — field settings
Right panel — field settings
When a field is selected, the right panel shows all configuration options for that field: label, placeholder text, required status, validation rules, and conditional logic.
Common field types
| Field type | Best used for |
|---|---|
| Text (single line) | Short answers, names, addresses |
| Text (multi-line) | Comments, feedback, descriptions |
| Capturing email addresses with format validation | |
| Phone | Collecting phone numbers |
| Dropdown | Selecting one option from a long list |
| Single choice (radio) | Selecting one option from a short list |
| Multiple choice | Selecting several options |
| Rating scale | 1–5 or 1–10 satisfaction ratings |
| NPS | Net Promoter Score (0–10 scale) |
| Date / Time | Scheduling, birthdates, event dates |
| File upload | Collecting documents or images from respondents |
| Hidden field | Passing URL parameters (UTM, contact ID) invisibly |
| Signature | Collecting a digital signature |
Conditional logic
Conditional logic shows or hides fields based on a respondent’s previous answers. To set up a rule:- Click the field you want to conditionally show or hide.
- Click Conditional Logic in the right settings panel.
- Choose the trigger field, the condition (equals, contains, is not empty, etc.), and the value.
- Choose whether the current field should be shown or hidden when the condition is met.
Multi-step layout
Break a long form or survey into multiple pages to improve completion rates:- Click + Add Step in the top toolbar to add a new page.
- Move fields between steps by dragging them.
- The builder automatically shows a progress bar to respondents.
Submission settings
Configure what happens when a respondent submits:| Option | Description |
|---|---|
| Redirect to URL | Send the respondent to a thank-you page or external URL |
| Show message | Display an inline confirmation message without redirecting |
| Stay on page | Useful for popup forms — close the popup after submission |
Notifications
- Team notification — send an email to one or more team members when a form is submitted
- Auto-reply — automatically send a confirmation email to the respondent using the email address they entered
Styling and branding
Use the Styles tab (or theme settings for surveys and quizzes) to customize:- Background color or image
- Font family and size
- Button color and label
- Field border radius and padding
- Logo placement
Style changes in the builder apply to the form/survey/quiz wherever it is embedded — on a HoopAI page, an external website, or a direct link.