Skip to main contentCarbon Design System

Creating Forms

Learn how to create effective forms using Jadawel’s form builder, from setup to publication.

Before You Start

Prerequisites

  • Access to a workspace with form creation permissions
  • A table to connect your form to
  • Clear understanding of what data you want to collect

Planning Your Form

Consider these questions:

  1. Purpose: What data are you collecting and why?
  2. Audience: Who will fill out this form?
  3. Required Fields: What information is essential?
  4. Validation: What rules ensure data quality?
  5. Follow-up: What happens after submission?

Creating a Form

Step 1: Access Forms

  1. Navigate to /forms from the main navigation menu
  2. Click the Create Form button
  3. The form creation wizard opens

Step 2: Configure Form Basics

Set up essential form information:

  1. Form Name: Choose a clear, descriptive name
  2. Description: Explain the form’s purpose
  3. Select Space: Choose the workspace space
  4. Select Table: Pick the table to store responses
  5. Form Type: Choose between connected or standalone

Step 3: Build Your Form

Adding Fields

  1. Click Add Field or drag fields from the table
  2. Choose from available field types:
    • Text Input: Single-line text
    • Text Area: Multi-line text
    • Number: Numeric values
    • Date: Date picker
    • Dropdown: Selection from options
    • Checkbox: Yes/no or multiple selections
    • Radio Buttons: Single selection from list
    • File Upload: Attach documents or images
    • Email: Email address with validation
    • Phone: Phone number field

Configuring Fields

For each field, configure:

  • Field Label: The name shown to users
  • Help Text: Additional instructions or context
  • Placeholder: Example or hint text
  • Required: Whether the field must be filled
  • Validation Rules: Format or value constraints
  • Default Value: Pre-filled value
  • Visibility: Always shown or conditional

Arranging Fields

Organize your form layout:

  1. Drag and Drop: Reorder fields by dragging
  2. Sections: Group related fields together
  3. Page Breaks: Split long forms into multiple pages
  4. Columns: Arrange fields side-by-side
  5. Spacing: Adjust visual spacing

Step 4: Add Conditional Logic

Show or hide fields based on responses:

  1. Select a field to add conditions
  2. Click Add Condition
  3. Define the trigger:
    • If field X equals/contains/is greater than value
    • Then show/hide field Y
  4. Add multiple conditions for complex logic
  5. Test the conditional behavior

Step 5: Customize Appearance

Form Styling

  • Theme: Choose color scheme
  • Fonts: Select typography
  • Layout: Choose form width and alignment
  • Branding: Add logo or custom header
  • Background: Set background color or image

Field Styling

  • Field Size: Adjust width and height
  • Label Position: Above, beside, or inside field
  • Required Indicator: Asterisk or other symbol
  • Error Messages: Customize validation messages

Step 6: Configure Form Settings

Submission Settings

  • Submit Button Text: Customize button label
  • Success Message: What users see after submitting
  • Redirect URL: Optional redirect after submission
  • Allow Multiple Submissions: Per user or unlimited
  • Submission Deadline: Close form after date

Notification Settings

  • Email Notifications: Alert on new submissions
  • Notification Recipients: Who receives alerts
  • Confirmation Email: Send to respondent
  • Custom Email Template: Personalize messages

Access Settings

  • Form Visibility: Public, workspace only, or specific users
  • Require Authentication: Login required or anonymous
  • Password Protection: Optional password for access
  • Allowlist: Specific email domains or users

Advanced Settings

  • Response Editing: Allow users to edit submissions
  • Response Limits: Maximum number of submissions
  • Rate Limiting: Prevent spam
  • CAPTCHA: Add bot protection
  • Save Progress: Allow partial submissions
  • Audit Trail: Track form changes

Step 7: Preview and Test

Before publishing:

  1. Click Preview to see form as users will
  2. Test on different devices (desktop, tablet, mobile)
  3. Submit test responses
  4. Check data appears correctly in the table
  5. Test conditional logic and validations
  6. Verify notifications work

Step 8: Publish Your Form

When ready:

  1. Review all settings one final time
  2. Click Publish Form
  3. Form status changes from Draft to Active
  4. Generate shareable link
  5. Copy form URL or embed code

Form Builder Interface

Toolbar

Quick access to common actions:

  • Save: Save current changes
  • Preview: See form as users will
  • Settings: Access form configuration
  • Publish: Make form live
  • Share: Get form link or embed code

Field Panel

Browse available field types:

  • Basic Fields: Text, number, date, etc.
  • Choice Fields: Dropdown, radio, checkbox
  • Advanced Fields: File upload, signature, location
  • Table Fields: Fields from connected table

Properties Panel

Configure selected field:

  • General: Label, placeholder, help text
  • Validation: Required, format rules, constraints
  • Logic: Conditional visibility
  • Styling: Custom appearance

Canvas

The main form building area:

  • Drag and Drop: Add and arrange fields
  • Visual Editing: Click to edit inline
  • Section Management: Organize form structure
  • Responsive Preview: See different screen sizes

Best Practices

Form Design

  • Start Simple: Begin with essential fields only
  • Logical Order: Flow from general to specific
  • Group Related Fields: Use sections for organization
  • One Question at a Time: Don’t overwhelm users
  • Clear Labels: Use simple, descriptive text

User Experience

  • Mobile First: Design for small screens
  • Progress Indicators: Show completion status
  • Helpful Errors: Provide clear validation messages
  • Smart Defaults: Pre-fill when possible
  • Save Progress: For long forms, allow resuming later

Data Quality

  • Validate Early: Check input as users type
  • Format Hints: Show expected format (e.g., DD/MM/YYYY)
  • Dropdown Over Text: When options are limited
  • Required Wisely: Only mark truly essential fields
  • Confirmation Fields: For critical data like email

Performance

  • Optimize Images: Compress logos and backgrounds
  • Limit Fields: Keep forms concise
  • Load Speed: Test on slow connections
  • Auto-save: Prevent data loss

Common Form Types

Contact Form

Essential fields:

  • Name (text)
  • Email (email)
  • Message (textarea)
  • Optional: Phone, Company

Registration Form

Typical structure:

  • Personal Information section
  • Account Details section
  • Preferences section
  • Terms and Conditions (checkbox)

Survey Form

Characteristics:

  • Mix of question types
  • Optional vs required questions
  • Rating scales
  • Open-ended responses

Feedback Form

Key elements:

  • Rating field
  • What went well? (textarea)
  • What could improve? (textarea)
  • Follow-up permission (checkbox)

Tips for Success

  • Test Thoroughly: Submit multiple test responses
  • Get Feedback: Have others review before launch
  • Iterate: Update based on user feedback
  • Monitor Responses: Check submissions regularly
  • Keep It Updated: Maintain current information
  • Backup Forms: Export form configuration