FluidForms

    Form Design Guide

    Best practices for creating effective, user-friendly, and powerful forms

    Building great forms goes beyond just adding fields. A well-designed form improves completion rates, gathers higher-quality data, and provides a better user experience. This guide consolidates best practices from across the FluidForms documentation to help you design effective, user-friendly, and powerful forms.

    1. Field Design

    The foundation of any form is its fields. Choosing the right fields and labeling them clearly is crucial for data quality and user experience.

    Field Selection

    1. Use the simplest field type that meets your needs. Don't use a text field when a number field with validation is more appropriate.
    2. Avoid JSON Schema fields unless absolutely necessary for complex, nested data.
    3. Consider the user experience: use dropdowns for long lists of options, and radio buttons for short ones.
    4. Use appropriate validation: email format for emails, number field for quantities, etc.

    Field Labels

    1. Be clear and concise: "Email Address" is better than "Your Email".
    2. Ask direct questions: "How can we help?" is better than a generic label like "Question".
    3. Indicate optional fields: Clearly mark fields that are not required, e.g., "Phone Number (optional)".
    4. Avoid jargon: Use language that your target audience will understand.

    Field Organization

    1. Group related fields together within the same section (e.g., all contact details).
    2. Order fields logically from top to bottom.
    3. Don't overwhelm users: Aim for 3-7 fields per section to keep it manageable.
    4. Use sections to break up long forms into smaller, logical steps.

    Validation Strategy

    1. Validate at the right time: Use real-time validation for simple formats (like email) and submit-time validation for more complex rules.
    2. Provide helpful errors: Error messages should explain what's wrong and how to fix it.
    3. Don't over-validate: Only enforce constraints that are truly necessary for your data quality.
    4. Test edge cases: Check how your form behaves with empty values, special characters, and very long inputs.

    2. Form Structure & Flow

    How you structure your form and guide users through it has a major impact on completion rates.

    Section Design

    1. One Topic Per Section: Keep each section focused on a single, clear topic (e.g., "Contact Info", "Project Details").
    2. Choose the Right Mode: Select the appropriate section mode (Standard, Interview, Autofill) for the type of information you're gathering.
    3. Use AI Instructions: Add comprehensive instruction blocks to Interview and Autofill sections to guide the AI.
    4. Ensure Clear Progression: Order your sections in a logical sequence that makes sense to the user.

    Form Length

    • Short Forms (1-2 sections): Ideal for simple contact or feedback forms.
    • Medium Forms (3-5 sections): Suitable for applications, detailed requests, or multi-step registrations.
    • Long Forms (5+ sections): Use for comprehensive data collection like medical intakes or detailed applications. Consider using Interview mode to keep users engaged.

    Mode Mixing

    Combine section modes strategically for the best experience:

    • Start with Standard mode for basic, structured data (it's fast).
    • Use Interview mode for open-ended, exploratory questions (it's thorough).
    • Use Autofill mode for efficient data extraction from unstructured text.
    • Always end with a Thank You mode section.

    3. Logic & Dynamic Content

    Use Liquid templating to create intelligent, adaptive forms that feel personalized and efficient.

    Planning Your Logic

    1. Map it out: Before you start building, draw a flowchart of your form's desired logic and branching paths.
    2. Keep it simple: Overly complex branching can confuse users and be difficult to maintain.
    3. Test all paths: Ensure every possible user journey through the form is tested and leads to the correct destination, ending with the thank you page.
    4. Provide feedback: Let users know why a field has appeared or why they are being taken down a specific path.

    Liquid Best Practices

    1. Use Variables for Clarity: Instead of long, chained expressions, use {% assign %} to store intermediate values. This makes your logic easier to read and debug.
    2. Provide Fallbacks: Always use the default filter to handle cases where a value might be missing or empty (e.g., {{ price | default: 0 }}).
    3. Use Static Field Names: When referencing a field in a Liquid expression, give it a static name in the properties panel. This prevents your logic from breaking if you later change the field's label.
    4. Keep Expressions Simple: For complex logic, break it down into multiple assign statements rather than creating a single, unreadable if condition.

    User Experience with Logic

    1. Be transparent: Briefly explain why certain fields appear (e.g., "Because you selected 'Other', please provide more details.").
    2. Avoid surprises: Sudden, unexplained changes in the form can be jarring.
    3. Use smart defaults: Pre-fill fields with calculated values or common selections whenever possible to save the user time.

    4. Integrations & Security

    Connecting your form to other systems requires careful planning and a focus on security.

    CRM Integration

    • Lead Scoring: Use Liquid to calculate a lead score based on responses and map it to your CRM.
    • Data Enrichment: Use integrations to enrich form data (e.g., converting an IP address to a location).
    • Deduplication: Check for existing contacts by email to avoid creating duplicate records in your CRM.

    Security

    1. API Keys: Rotate API keys regularly and never expose them in client-side code or commit them to version control.
    2. Webhook Signatures: Always validate the signature of incoming webhooks to ensure they are from FluidForms.
    3. HTTPS Only: Ensure all your endpoints and integrations use secure, encrypted connections.
    4. Least Privilege: Grant integrations the minimum level of access they need to perform their function.
    5. Data Encryption: Encrypt sensitive data both at rest and in transit.

    5. Advanced Logic & Performance

    For power users, following best practices ensures that advanced forms remain maintainable and performant.

    General Best Practices

    1. Document Your Logic: Use {% comment %} tags in Liquid or add notes to explain complex calculations and business rules.
    2. Test Edge Cases: Validate your form's behavior with empty, null, and extreme values.
    3. Prefer Clarity Over Cleverness: Write code and logic that is easy for others (and your future self) to understand.

    Performance Optimization

    1. Minimize Repeated Calculations: If you use the same calculation more than once, store it in a variable with {% assign %}.
    2. Cache Complex Lookups: For complex case or if/elsif chains, perform the logic once and store the result in a variable for reuse.
    3. Avoid Nested Loops: Where possible, restructure your data or use filters like map and where to avoid slow, nested for loops.

    Next Steps