Tutorial: How to Build a Form Using the Form Builder

Open the Form Builder

• Go to EBRAINS Form Builder
• The builder opens with a blank draft
• You’ll see a 3-panel layout (desktop):
  • Left: Field palette and settings
  • Center: Form canvas (drag fields here)
  • Right: Field properties (shows when field selected)
• Mobile: Use bottom tabs to switch between Builder, Palette, and Settings

Auto-save is always on! Your draft saves every second as you work. You can leave and return anytime via My Forms > Drafts.

Configure Form Details

In the General tab (left sidebar):

Form Name (required):

• URL-friendly identifier (e.g., user-feedback-2025)
• Use lowercase letters, numbers, and hyphens only
• This becomes part of your form URL: forms.ebrains.eu/f/user-feedback-2025

Form Title (required):

• Display title users see (e.g., “User Feedback Survey”)
• Can contain any characters, spaces, emoji

Description (optional):

• Explain the purpose of your form
• Example: “Help us improve EBRAINS by sharing your experience”
• Appears below the title on the form

Form Style:

• Default - Standard card layout
• Shadow - Card with subtle shadow
• Brand - EBRAINS branded styling

Submit Button:

• Label - Customize text (default: “Submit”)
• Style - Choose from primary, secondary, ghost, or brand

Add Your First Field

Now let’s add fields to your form.

Desktop - Drag and Drop:

• Find “Text Input” in the left sidebar palette
• Click and drag it to the center canvas
• Drop anywhere in the form area
• Field appears instantly

Mobile:

• Tap “Palette” tab (bottom)
• Tap field type to add it
• Switch to “Builder” tab to see it

Your first field:

• Add a Text Input field
• It auto-selects and shows properties on the right

Configure Field Properties

With your text field selected, configure it in the right sidebar:

Label (required):

• Enter: “What is your name?”
• This is the question users see

Required:

• Toggle ON (users must answer)

Hint (optional):

• Add help text: “First and last name”
• Shows below the field in lighter text

Placeholder:

• Enter: “John Doe”
• Shows inside empty field as example

Message (optional):

• Additional context or instructions
• Example: “We use this to personalize follow-up communications”

Add More Field Types

Let’s add variety to the form.

Select (Dropdown) Field:

• Add a “Select” field
• Label: “How often do you use EBRAINS?”
• Required: ON
• In properties, add Options:
  • Click "+ Add Option"
  • Add: “Daily”, “Weekly”, “Monthly”, “Rarely”
  • Each option needs a label (can be same as value)

Text Area (Long text):

• Add a “Text Area” field
• Label: “What do you like most about EBRAINS?”
• Required: OFF (optional question)
• Hint: “Share your thoughts…”

Rating Field:

• Add a “Rating” field
• Label: “How would you rate your overall experience?”
• Required: ON
• Configure:
  • Rating Type: Star
  • Count: 5 stars (recommended: 3-7)

You now have 5 fields! Let’s organize them.

Organize with Groups

Groups help structure multi-section forms:

Create a Group:

• Click "+ Add Group" (top panel)
• A group appears in the canvas
• Click the group name to rename it: “About You”

Assign Fields to Group:

• Drag the Name field and drop it to the group.
• Repeat for the Email field

Create a Second Group:

• Add another group
• Name it: “Your Feedback”
• Assign the remaining fields to this group

Reorder Groups:

• Hover over a group header
• Drag handle (☰) appears on the left
• Drag groups to reorder them

Add Conditional Logic

Let’s make a field appear only based on a previous answer:

Add a Conditional Field:

• Add a new Text Area field
• Label: “What improvements would you suggest?”
• Required: OFF

Set the Condition:

• In the field properties, find “Conditional Display”
• Show when: Select “How often do you use EBRAINS?”
• Equals: Select “Daily” or “Weekly”
• The field now only shows if user selected “Daily” or “Weekly”

How it works:

• Users who use EBRAINS frequently see this field
• Others don’t see it at all
• Reduces form clutter and improves UX

Limitations:

• Can only reference fields above the current field
• Prevents circular dependencies
• Works with: Select, Radio, Checkbox fields

Configure Advanced Settings

Click “Advanced” tab (left sidebar):

Multi-Step Form:

• Enable: Toggle ON
• Your groups automatically become separate pages/steps
• Show Progress Bar: Toggle ON to show completion %
• Users see “Next” and “Previous” buttons
• Each step validates before proceeding

Expiration Date:

• Set a deadline for accepting responses
• Click the date picker
• Choose date and time
• After expiration, form shows “This form is no longer accepting responses”

Submission Policy:

• Allow Multiple Submissions:
  • OFF (default) - One response per user
  • ON - Users can submit multiple times
• Max Submissions: Set a limit (e.g., 3 submissions max)

Visibility:

• Private (default) - Only authenticated EBRAINS users
• Public - Anyone with the link (no login required)
• Accepting Submissions: Toggle to temporarily pause responses

GitLab Integration (optional):

• Auto-create GitLab issues from submissions
• Requires:
  • GitLab Project ID (e.g., 12345)
  • Personal Access Token (with api scope)
• Each submission creates a new issue with form data

Preview Your Form

Before publishing, always preview:

• Click “Preview” button (top of page)
• A modal opens showing your live form
• Test everything:
  • Fill out all fields
  • Test required field validation
  • Check conditional logic (select “Daily” to see the conditional field)
  • Test multi-step navigation (Next/Previous buttons)
  • Try submitting with missing required fields (should show errors)

• Close preview when satisfied
• Make any final adjustments in the editor

Publish Your Form

• Click “Publish Form” (top right)
• System validates your form
• If valid, form goes live immediately
• Draft is deleted (no longer in Drafts)

Share and Manage

Manage Form Settings:

• Go to My Forms > Live
• Click your form
• You can:
  • Edit - Modify fields, settings (re-publish required)
  • Share - Copy link, embed code
  • Membership - Add collaborators (Admin, Editor, Viewer roles)
  • Delete - Remove form (careful - this is permanent!)
  • Toggle submissions - Pause/resume accepting responses

View Submissions:

• Click your form in My Forms
• See real-time submissions as they arrive
• Each shows:
  • Respondent name
  • Submission timestamp
  • All answers
• Filter and search submissions

Export Data

When ready to analyze responses:

• Open your form in My Forms
• Click the download icon
• CSV format downloads automatically