LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page
  • Overview
  • Prerequisites
  • Implementing Multiple and Single Choice Orientation
  • JSON Structure Example
  • Steps to Configure the Orientation Field in JSON
  • Implementing New Form Layout Presets
  • Layout Presets
  • Steps to Configure Form Layout Presets in JSON
  • Implementing the fullWidth Field
  • Steps to Configure the fullWidth Field in JSON
  • End User Interaction

Was this helpful?

Export as PDF
  1. Forms
  2. Integrating and using the Form block

Form layout customization

Explore how to implement customization options for a form's layout.

PreviousForm structure and parametersNextAllowed form fields

Last updated 6 months ago

Was this helpful?

This feature is available on all and applies only to and builders.

Overview

This document outlines how you can customize a form’s layout, and discusses the available layout customization options. These options allow you to adjust various elements of forms to improve your end's user experience creating them. Form layout options ensure your application's end users have more tools to create a more effective presentation of their forms.

Key form layout customization options include:

  • Multiple choice and radio button orientation: You can adjust the orientation of multiple choice and radio button elements, choosing between horizontal or vertical alignment to suit your design preferences or space constraints.

  • New layout presets: Three layout presets are available: horizontal, vertical, and grid. These presets define the overall structure of the form, allowing you to easily apply a consistent layout across fields.

The form field width includes the following customization option:

  • Form field width property: A new boolean property, fullWidth, enables you to manage form field widths. When set to true, the field will expand to 100% width. When set to false, it the field width is set to 50%.

The following video provides a visual representation of these customization options and how they function within the user interface.

Prerequisites

Prior to getting started, ensure you have the following:

Implementing Multiple and Single Choice Orientation

For this implementation, there is a field called orientation in the JSON at the field object level. This field controls the layout orientation for multiple-choice and single-choice fields, which include radio buttons and checkboxes. The orientation field accepts the following two values:

  • horizontal

  • vertical

Default behavior: If the orientation field is not included in the JSON, the form will default to horizontal orientation both on the backend and the frontend.

JSON Structure Example

The following JSON display an example of the updated structure for a radio button field with the orientation field included:

{
    "structure": {
        "fields": {
            "gender": {
                "type": "radio",
                "label": "Gender",
                "orientation": "vertical",  // Newly added field for layout orientation
                "attributes": {},
                "options": [
                    {
                        "type": "option",
                        "value": "M",
                        "label": "Male"
                    },
                    {
                        "type": "option",
                        "value": "F",
                        "label": "Female"
                    },
                    {
                        "type": "option",
                        "value": "-",
                        "label": "Not telling"
                    }
                ]
            }
        },
        "layout": [
            [
                "gender"
            ]
        ]
    },
    "attributes": {},
    "style": {
        "labels": {},
        "fields": {},
        "buttons": {}
    }
}

Steps to Configure the Orientation Field in JSON

Take the following steps to configure the orientation field:

  1. Locate the form field object in the JSON: Find the field you want to configure, such as a radio button or checkbox field. This will be under the "fields" key within the JSON structure.

  2. Add the orientation property: Inside the field object, add a new property called orientation.

  3. Set the value: Assign the orientation field a value of either "horizontal" or "vertical", depending on how you want the options displayed in the form.

    "orientation": "vertical"
  4. Save the changes: After making the necessary updates to the JSON structure, ensure that the changes are saved.

  5. Test the form: Once the JSON is updated, test the form to ensure that the options are displayed in the correct orientation. If the field is missing, check if the default horizontal orientation is applied.

These steps will allow you to effectively control the layout orientation of multiple-choice fields in your forms.

Implementing New Form Layout Presets

The layout of the form fields can be controlled using a new layoutPreset field. This field is located in the structure object of the JSON and supports three possible values:

  • vertical

  • horizontal

  • grid

Note: If the layoutPreset is not defined in the JSON file, the Form will use a horizontal layout structure.

JSON Structure Example

Here is an example of a form JSON structure utilizing layout presets:

{
    "structure": {
        "layoutPreset": "grid",  // New field to define form layout
        "fields": {
            "email": {
                "type": "email",
                "label": "Email Address",
                "fullWidth": true,  // Only applicable for 'grid' preset
                "attributes": {}
            }
        }
    },
    "attributes": {},
    "style": {
        "labels": {},
        "fields": {},
        "buttons": {}
    }
}

Layout Presets

The following list shows the available options for layout presets.

  • Vertical: Fields will be stacked vertically, one on top of another.

  • Horizontal: Fields will be aligned horizontally, side by side.

  • Grid: Fields will be organized into a grid layout, allowing for more complex positioning.

Steps to Configure Form Layout Presets in JSON

Take the following steps to configure the layoutPreset field:

  1. Locate the structure object in the JSON: Find the structure key within the form’s JSON definition where the fields and layout are defined.

  2. Add or modify the layoutPreset field: Inside the structure object, add a new property called layoutPreset.

  3. Set the desired value: Assign the layoutPreset field one of the following values to control the layout of the form:

    • "vertical": Stack fields vertically.

    • "horizontal": Align fields horizontally.

    • "grid": Organize fields in a grid format.

    Example:

    "layoutPreset": "horizontal"
  4. Configure field properties (if applicable): If you are using the grid layout, you may also need to adjust other field properties like fullWidth to control the width of individual fields. For example, set "fullWidth": true to make a field span the full width of the grid column.

  5. Save and test the form: After setting the layoutPreset, save the updated JSON structure and test the form layout to ensure the fields are displayed according to the selected preset.

By following these steps, you can easily configure and control the layout of your form fields using the new layoutPreset field.

Implementing the fullWidth Field

A new boolean field, fullWidth, has been introduced within each form field object. This field is applicable only when the layout preset is set to grid. If a layout other than grid is used, the fullWidth field will be ignored or removed from the JSON structure.

In a grid layout, setting fullWidth to true will cause the form field to span the entire width of the grid column, while setting it to false will restrict the field's width to a smaller portion of the grid.

Steps to Configure the fullWidth Field in JSON

Take the following steps to configure the fullWidth field:

  1. Ensure the layout preset is set to grid: The fullWidth field only functions when the form’s layout preset is set to "grid". Verify that the "layoutPreset" field in the JSON is set to "grid".

  2. Locate the desired form field: In the JSON structure, find the field you want to configure, such as an email or text field.

  3. Add the fullWidth field: Inside the form field object, add a new property called fullWidth.

  4. Set the boolean value:

    • Set fullWidth to true to make the form field span the entire width of the grid column.

    • Set fullWidth to false if you want the form field to occupy half or a portion of the grid column.

    Example:

    "fullWidth": true
  5. Save the changes: After adding or modifying the fullWidth field, save the updated JSON structure.

  6. Test the form in grid layout: Ensure that the form’s layout is set to grid and that the field's width behaves as expected.

By following these steps, you can effectively configure the fullWidth property to control the width of form fields in grid layouts.

End User Interaction

  • Layout Widget: End users can change the layout preset using a layout widget available in the form sidebar.

  • Field Width Widget: When the form is using the grid preset, the fullWidth field can be modified by users through a field width widget available in the Manage Fields section or the Edit Form Modal.

Page builder or Popup builder application within your

The Submit field will always have fullWidth set to true, and the corresponding widget will be disabled to ensure it spans the full width. For more details on the end user experience, reference the .

Beefree SDK Plan
Dev Console
Form Layout Customization end user documentation
Beefree SDK plan types
Page
Popup