Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Set Up a Staging Environment
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Bulk Edit Extraction Configuration Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • PowerPoint Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page
  • Design
  • Flow
  • Logic
  • Results
  • Settings

Was this helpful?

  1. Platform

Build Forms

A detailed guide for navigating the Feathery dashboard while building a form.

PreviousCustom Field Input FormatNextElements

Last updated 4 days ago

Was this helpful?

Design

The Design tab is where you can:

  • Create responsive page layouts

  • Add and style your form elements

  • Create new steps

  • Set up conditional show/hide logic & navigation rules

  • Preview & publish your form

Easily Undo and Redo changes with the buttons in the top right corner next to Publish

How do form layouts work?

For simple forms, just drag elements in directly below and above each other.

For more complex layouts, use containers to group elements together and edit the container styles to control alignment, gaps, margin, & padding.

Containers can also be nested in other containers to create hierarchical structures for more complex layouts.

Two designers can simultaneously edit different steps of the form, but they cannot edit the same step at the same time.

Flow

In the Flow tab, you can:

  • Add and edit step connections

  • Customize your form navigation rules

  • Add conditional logic for navigation

Create a new connection by dragging from the + on the step. This will create an arrow to the step you need to connect.

Logic

The Logic tab is where you can set up advanced behavior for your form, including calculations, custom Javascript, API connections, and more.

Two designers can simultaneously edit different logic rules, but they cannot edit the same logic rule at the same time.

Results

The Results tab is where you can:

  • View and manage all form submissions

  • Review individual user submissions

  • Download submissions as a CSV file

  • Upload submissions from a CSV file

  • Locate user IDs

Upload Submissions From CSV File

Feathery supports the ability to bulk upload submission data from a CSV file:

  • In your CSV file, the first row must contain a 'User ID' (case-insensitive) column along with Feathery field IDs from your form. Each subsequent row represents a submission entry.

  • If an existing User ID is specified, the existing submission for that user will be updated.

Settings

The Settings tab is where you can:

  • Edit the form name

  • Switch your form theme

  • Edit the URL the form redirects to upon completion

  • Find the form ID, used to embed your form

  • Configure how form validation errors are displayed to the user

    • Inline: Feathery-styled error messages that appear within the form flow

  • Toggle general user tracking

    • If on, users will automatically be tracked from one session to another, including across different forms. All of their submitted data will appear as one submission. If off, each session will count as a separate submission.

    • If user tracking is on, you can optionally configure location tracking

      • If on, users will automatically start from the step they left off when they leave the form and come back.

    • If user tracking is on, you can optionally configure data tracking

      • If on, users will automatically see their previously filled-in form data when they leave the form and come back.

    • Note that the user tracking config applies across all forms but location and data tracking can be configured per-form.

  • Change the theme associated with the form

  • And much more.

: browser-native, non-stylable error messages that float on the form

Design
Logic
Built In