Image Assets: Add Logos and Images to Forms

Forms don't have to be just text inputs. Adding images - logos, product photos, illustrations - makes forms more visually appealing and helps users understand context at a glance.

The addImage() function displays images from your uploaded asset library. You control sizing, alignment, and visibility. Images can be static branding elements or dynamic visuals that change based on user selections.

Basic Image Setup

At minimum, an image needs an assetId (the ID of an uploaded asset) and an alt text for accessibility.

form.addRow(row => {
    row.addImage('logo', {
        assetId: 'formts_logo',
        alt: 'FormTs Logo'
    });
});

The asset ID references an image you've uploaded to your FormTs asset library. The alt text describes the image for screen readers and displays if the image fails to load.

Controlling Image Size

By default, images display at their natural size. Use the size property to constrain dimensions. Set width OR height - not both - to preserve aspect ratio.

// Correct: set only width, aspect ratio is preserved
form.addRow(row => {
    row.addImage('travelImage', {
        assetId: 'formts_travel',
        alt: 'Travel illustration',
        size: { width: 280 }
    });
});

// Wrong: setting both width and height can stretch the image!
form.addRow(row => {
    row.addImage('travelStretched', {
        assetId: 'formts_travel',
        alt: 'Travel illustration - stretched',
        size: { width: 280, height: 280 }
    });
});

Setting only width scales the image proportionally. Setting both width and height to different aspect ratios stretches the image - usually not what you want.

Image Alignment

Images can be aligned left, center, or right within their container. The default is center alignment.

// Left aligned (default)
form.addRow(row => {
    row.addImage('logoLeft', {
        assetId: 'formts_logo',
        alt: 'Left aligned',
        size: { width: 150 },
        alignment: 'left'
    });
});

// Center aligned
form.addRow(row => {
    row.addImage('logoCenter', {
        assetId: 'formts_logo',
        alt: 'Center aligned',
        size: { width: 150 },
        alignment: 'center'
    });
});

// Right aligned
form.addRow(row => {
    row.addImage('logoRight', {
        assetId: 'formts_logo',
        alt: 'Right aligned',
        size: { width: 150 },
        alignment: 'right'
    });
});

Use alignment: 'center' for hero images and logos at the top of forms. Left alignment works well for images alongside text content.

Adding Labels

Like other form fields, images can have labels. This is useful when the image represents a specific piece of information the user should note.

form.addRow(row => {
    row.addImage('companyLogo', {
        assetId: 'formts_logo',
        alt: 'Company Logo',
        label: 'Our Company Logo',
        size: { width: 200 },
        alignment: 'center'
    });
});

The label appears above the image, styled consistently with other field labels in your form.

Conditional Visibility

Images can show or hide based on other field values. This is powerful for showing relevant visuals as users make selections.

form.addRow(row => {
    row.addCheckbox('showLogo', {
        label: 'Show company logo'
    });
});

form.addSpacer({ height: '20px' });

// Image that shows/hides based on checkbox
form.addRow(row => {
    row.addImage('logo', {
        assetId: 'formts_logo',
        alt: 'Company Logo',
        size: { width: 200 },
        alignment: 'center',
        isVisible: () => form.checkbox('showLogo')?.value() === true
    });
});

The isVisible callback runs reactively - whenever the checkbox value changes, the image visibility updates automatically.

Hero Images

A large image at the top of a form sets the tone. Combine with text panels for a polished header section.

// Hero image at the top of the form
form.addRow(row => {
    row.addImage('heroImage', {
        assetId: 'formts_travel',
        alt: 'Travel illustration',
        alignment: 'center'
    });
});

form.addSpacer({ height: '20px' });

form.addRow(row => {
    row.addTextPanel('title', {
        computedValue: () => 'Plan Your Dream Trip',
        customStyles: {
            fontSize: '1.5rem',
            fontWeight: '600',
            textAlign: 'center'
        }
    });
});

Hero images work well for booking forms (show the destination), product forms (show the product category), and branded experiences (show your company imagery).

Dynamic Product Images

Show different images based on user selections. Each product option can display its own image, helping users visualize their choice.

form.addRow(row => {
    row.addDropdown('product', {
        label: 'Select Product',
        options: [
            { id: 'basic', name: 'Basic Package' },
            { id: 'pro', name: 'Pro Package' },
            { id: 'enterprise', name: 'Enterprise Package' }
        ]
    });
});

form.addSpacer({ height: '20px' });

// Show different product images based on selection
form.addRow(row => {
    row.addImage('productBasic', {
        assetId: 'product_basic',
        alt: 'Basic Package',
        size: { width: 300 },
        alignment: 'center',
        isVisible: () => form.dropdown('product')?.value() === 'basic'
    });
});

form.addRow(row => {
    row.addImage('productPro', {
        assetId: 'product_pro',
        alt: 'Pro Package',
        size: { width: 300 },
        alignment: 'center',
        isVisible: () => form.dropdown('product')?.value() === 'pro'
    });
});

Multiple image fields with conditional visibility create a "swap" effect - only the relevant image shows based on the dropdown selection.

When to Use Images

Images work well for:

• Branding: Company logos at the top of forms
• Context: Illustrations that explain what the form is for
• Product visualization: Show what users are selecting or configuring
• Instructions: Diagrams or screenshots that guide users

Avoid using images when:

• They're decorative only: Every image should serve a purpose
• They slow down loading: Optimize image sizes for web
• Text would work better: Don't use images of text

Configuration Options

The full set of options for addImage():

• assetId - ID of the uploaded asset to display
• alt - Alternative text for accessibility
• size - Object with optional width and height in pixels
• alignment - 'left', 'center', or 'right' (default: 'center')
• label - Optional label text above the image
• isVisible - Callback to control visibility
• tooltip - Help text shown on hover
• customStyles - Object with CSS properties for custom styling

Best Practices

Optimize image files: Upload appropriately sized images. A 200px display width doesn't need a 2000px source file. Smaller files load faster.

Use meaningful asset IDs: Name assets descriptively - company_logo or product_basic rather than img1.

Set explicit sizes: Even if you want natural size, setting a width prevents layout shifts as images load.

Test on mobile: Large images may need different sizes on mobile. Consider the form's responsive behavior when choosing dimensions.