Tutorial: Image Assets (PRO)
Form Preview

What You'll Build

A form with images - logos, product photos, or illustrations. You'll learn how to display uploaded assets in your forms with full control over size and alignment.

What You'll Learn

  • How to display images using asset IDs
  • Controlling image size (width and height)
  • Aligning images (left, center, right)
  • Adding labels to images
  • Showing/hiding images dynamically
🖼️

PRO Feature

Image Assets is a PRO feature. You can upload up to 50 images (5MB each) in your account settings.

This tutorial uses formts_logo - a sample asset available for everyone to try.

Tutorial Steps

Step 1: Basic Image

Display an image using addImage() with an assetId. The asset ID matches what you set when uploading the image.

💡 Tip:
Always provide an alt text for accessibility. It describes the image for screen readers and shows if the image fails to load.

Step 2: Controlling Size (Aspect Ratio!)

Use the size option to control image dimensions. Best practice: set only width OR height, not both!

💡 Tip:
Setting only one dimension preserves the aspect ratio. Setting both forces exact dimensions and can stretch or squash your image - see the ugly example below!

Step 3: Alignment

Control horizontal alignment with the alignment option: left, center, or right.

💡 Tip:
Center alignment works great for logos and headers. Left alignment is better for inline content.

Step 4: Adding a Label

Add a label to display text above the image, just like other form fields.

💡 Tip:
Labels are useful when the image represents a choice or needs context in the form flow.

Step 5: Dynamic Visibility

Use isVisible with a callback to show or hide images based on form state.

💡 Tip:
Great for showing product images only when a product is selected, or logos based on user preferences.

Step 6: Complete Form with Image Header

Let's build a complete contact form with a logo header!

💡 Tip:
Combine images with spacers and dividers for professional-looking forms. A centered logo with a subtle divider makes a great header.

ImageConfig Reference

  • assetId: The ID of your uploaded asset (required)
  • alt: Alternative text for accessibility
  • label: Optional label displayed above the image
  • size: Object with optional width and height in pixels
  • alignment: Horizontal alignment: 'left', 'center', or 'right' (default: 'left')
  • isVisible: Callback to control visibility dynamically

Uploading Your Assets

To use your own images:

  1. Go to Settings in the FormTs editor
  2. Navigate to the Assets tab
  3. Click Upload and select your image
  4. Set an Asset ID (e.g., "company-logo", "product-photo")
  5. Use that ID in your form code
💡 Tip:
Supported formats: PNG, JPEG, GIF, WebP. Max size: 5MB. Images are automatically optimized for web delivery.

Try It Yourself

  • Challenge 1: Create a form header with a centered logo and your company name below
  • Challenge 2: Build a product selector that shows different images based on dropdown selection
  • Challenge 3: Create a multi-column layout with an image on one side and form fields on the other

Next Steps

Great job! You've learned how to add images to your forms. Ready to learn more?

Continue to Spacers & Dividers

Other learning paths:

  • Learn about multi-column layouts for better image placement
  • Master conditional visibility for dynamic image displays
  • Explore PDF generation to include images in documents