What You'll Build

A well-organized form that uses subforms to group related fields together. You'll create a user registration form with contact information, address details, and nested subforms for better organization.

What You'll Learn

How to create and organize subforms
Grouping related fields together
Creating nested subforms for complex organization
Using subforms to improve form structure and readability
Making subforms sticky to keep summaries always visible

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our subform-organized form step by step.

Step 2: Creating Your First Subform

Let's add a basic subform to organize contact information. Subforms help group related fields together for better organization.

💡 Tip:

Use form.addSubform() to create a subform. The returned subform object has the same methods as the main form, so you can add rows and fields to it!

Step 3: Multiple Subforms

Now let's add another subform for address information. Multiple subforms help organize complex forms into logical sections.

💡 Tip:

Each subform can have its own title and contains related fields. This makes the form much more organized and easier to understand!

Step 4: Nested Subforms

Finally, let's create a nested subform within the address subform. This demonstrates how subforms can contain other subforms for complex organization.

💡 Tip:

You can call addSubform() on any subform to create nested subforms. This is perfect for organizing complex forms with multiple levels of grouping!

Step 5: Sticky Subforms

Sticky subforms stay visible at the edge of the screen as you scroll, perfect for order summaries or totals that users need to see while filling out a long form.

💡 Tip:

Use sticky: 'bottom' to pin a subform to the bottom of the viewport. When users scroll down to its natural position, it "unsticks" and becomes part of the normal flow. You can also use sticky: 'top' for headers!

Try It Yourself

Challenge 1: Add a "Preferences" subform with fields for newsletter subscription and communication preferences
Challenge 2: Create a nested subform within the contact information for "Social Media" accounts
Challenge 3: Add a "Work Information" subform with nested "Emergency Contact" subform

Next Steps

Excellent! You've learned how to organize forms using subforms. Ready to explore more advanced form organization techniques?

Continue to Computed Values Tutorial

Other learning paths:

Learn about conditional subform visibility
Master complex form layouts
Create dynamic subform generation