FluidForms

    Editor Guide

    Master the FluidForms block-based visual editor

    The FluidForms editor is a powerful, block-based environment similar to modern document editors like Notion. This guide will help you navigate the interface and build beautiful forms efficiently.

    The Block Model

    Everything in FluidForms is a Block.

    • Content Blocks: Headings, Paragraphs, Images, Lists.
    • Form Blocks: Sections, Input Fields, AI Instruction Blocks.

    This unified model means you can mix and match content and form elements freely. You can add a paragraph of instructions right between two form fields, or insert an image to illustrate a question.

    Basic Actions

    Adding Blocks

    There are two ways to add new blocks:

    1. Slash Command: Type / on a new line to open the block menu. You can then type to filter (e.g., /text, /section, /email).
    2. Hover Menu: Hover over the left side of any block to see a + button. Click it to insert a block below.

    Moving Blocks

    Hover over the left side of any block to see the Drag Handle ⋮⋮. Click and drag this handle to reorder blocks. You can move fields between sections or rearrange questions easily.

    Deleting Blocks

    • Click the Drag Handle ⋮⋮ to open the block options menu and select Delete.
    • Or, simply highlight the block and press Backspace or Delete on your keyboard.

    Field Configuration

    When you click on the Drag Handle ⋮⋮ for a field block (e.g., a Text Input), a Properties Panel appears. Here you can configure:

    • Label: The question text.
    • Variable Name: The internal ID used for logic and data (e.g., customer_email).
    • Required: Whether the user must answer.
    • Validation: Format constraints (Email, URL, Min/Max).
    • Visibility: Hide fields that are only for internal use or calculations.

    Advanced Features

    Liquid Variables

    You can insert dynamic data anywhere in your form (in labels, paragraphs, or default values) using Liquid syntax.

    • Type { to open the variable suggestion menu.
    • Select a variable from previous questions (e.g., {{ first_name }}).
    • (Optional) Edit the Liquid expression directly for more complex logic.
    • Click Insert to add it.
    • Example: "Hello {{ first_name }}, welcome back!"

    Keyboard Shortcuts

    • /: Open block menu.
    • Cmd/Ctrl + Z: Undo.
    • Cmd/Ctrl + Shift + Z: Redo.
    • Enter: New block.
    • Shift + Enter: New line within the same block.

    Tips for Speed

    • Use the Slash Menu: It's much faster than clicking buttons. Learn the names of your most-used blocks (e.g., /text, /choice, /date).
    • Group with Sections: Use sections to break long forms into manageable steps.
    • Ask the AI: If you're stuck or want to make a complex change, use the AI Chat Editor to do it for you.