Structure:<\/strong><\/p>\nDo you have a website?\r\n\u25cb Yes \u25cb No\r\n\r\nIF Yes \u2192 Show: \"Website URL\" field\r\nIF No \u2192 Show: \"Would you like help creating one?\" field\r\n<\/pre>\nUse for:<\/strong> Qualifying questions with different follow-ups<\/p>\nPattern 2: Category Branching<\/h3>\n
Structure:<\/strong><\/p>\nWhat type of inquiry?\r\n\u25cb Sales \u25cb Support \u25cb Billing \u25cb Other\r\n\r\nIF Sales \u2192 Show: Budget, Timeline, Company Size\r\nIF Support \u2192 Show: Order Number, Issue Description\r\nIF Billing \u2192 Show: Invoice Number, Account Email\r\nIF Other \u2192 Show: \"Please describe\" text area\r\n<\/pre>\nUse for:<\/strong> Different questions for different user types<\/p>\nPattern 3: “Other” Specification<\/h3>\n
Structure:<\/strong><\/p>\nHow did you hear about us?\r\n\u2610 Google \u2610 Social Media \u2610 Friend \u2610 Other\r\n\r\nIF Other checked \u2192 Show: \"Please specify\" text field\r\n<\/pre>\nUse for:<\/strong> Capturing custom responses<\/p>\nPattern 4: Progressive Disclosure<\/h3>\n
Structure:<\/strong><\/p>\nBasic Info: Name, Email (always shown)\r\n\r\nWant to provide more details?\r\n\u25cb Yes \u25cb No\r\n\r\nIF Yes \u2192 Show: Company, Phone, Project Description, Budget\r\n<\/pre>\nUse for:<\/strong> Optional detailed information<\/p>\nPattern 5: Conditional File Upload<\/h3>\n
Structure:<\/strong><\/p>\nDo you have supporting documents?\r\n\u25cb Yes \u25cb No\r\n\r\nIF Yes \u2192 Show: File Upload field\r\n<\/pre>\nUse for:<\/strong> Optional attachments<\/p>\nPattern 6: Customer vs. Prospect<\/h3>\n
Structure:<\/strong><\/p>\nAre you a current customer?\r\n\u25cb Yes \u25cb No\r\n\r\nIF Yes \u2192 Show: Customer ID, Account Email\r\nIF No \u2192 Show: Company, How did you hear about us?\r\n<\/pre>\nUse for:<\/strong> Different flows for existing vs. new<\/p>\n<\/span>Building a Complete Dynamic Form: Example<\/span><\/h2>\nService Inquiry Form<\/h3>\n
Always visible fields:<\/strong><\/p>\n\n- Name (required)<\/li>\n
- Email (required)<\/li>\n
- Service Interest (dropdown – trigger)<\/li>\n<\/ul>\n
Service Interest options:<\/strong><\/p>\n\n- Web Design<\/li>\n
- SEO<\/li>\n
- Marketing<\/li>\n
- Consulting<\/li>\n
- Other<\/li>\n<\/ul>\n
Conditional fields:<\/strong><\/p>\nIF Web Design:<\/em><\/p>\n\n- Current Website URL<\/li>\n
- Number of Pages Needed<\/li>\n
- Design Preferences (dropdown)<\/li>\n<\/ul>\n
IF SEO:<\/em><\/p>\n\n- Current Website URL<\/li>\n
- Target Keywords (textarea)<\/li>\n
- Monthly Budget Range<\/li>\n<\/ul>\n
IF Marketing:<\/em><\/p>\n\n- Marketing Channels (checkboxes)<\/li>\n
- Target Audience<\/li>\n
- Monthly Budget Range<\/li>\n<\/ul>\n
IF Consulting:<\/em><\/p>\n\n- Consulting Topic<\/li>\n
- Preferred Meeting Time<\/li>\n<\/ul>\n
IF Other:<\/em><\/p>\n\n- Please Describe (textarea)<\/li>\n<\/ul>\n
Always visible (after conditional):<\/strong><\/p>\n\n- Additional Notes (optional)<\/li>\n
- Submit button<\/li>\n<\/ul>\n
Result<\/h3>\n\n- Web Design visitors see 6 fields<\/li>\n
- SEO visitors see 6 fields<\/li>\n
- Marketing visitors see 6 fields<\/li>\n
- Consulting visitors see 5 fields<\/li>\n
- Other visitors see 4 fields<\/li>\n<\/ul>\n
<\/span>Condition Types<\/span><\/h2>\nEquals<\/h3>\nIF [Field] equals \"Value\"\r\n<\/pre>\nExact match required.<\/p>\n
Not Equals<\/h3>\nIF [Field] does not equal \"Value\"\r\n<\/pre>\nAnything except that value.<\/p>\n
Contains<\/h3>\nIF [Field] contains \"text\"\r\n<\/pre>\nValue includes the text somewhere.<\/p>\n
Is Empty<\/h3>\nIF [Field] is empty\r\n<\/pre>\nNo value entered.<\/p>\n
Is Not Empty<\/h3>\nIF [Field] is not empty\r\n<\/pre>\nAny value entered.<\/p>\n
Greater Than \/ Less Than<\/h3>\nIF [Number Field] is greater than 100\r\nIF [Number Field] is less than 50\r\n<\/pre>\nNumeric comparisons.<\/p>\n
<\/span>Multiple Conditions<\/span><\/h2>\nAND Logic<\/h3>\nShow field IF:\r\n Service = \"Enterprise\" AND\r\n Budget > 10000 AND\r\n Timeline = \"This Quarter\"\r\n<\/pre>\nALL conditions must be true.<\/p>\n
OR Logic<\/h3>\nShow field IF:\r\n Service = \"Web Design\" OR\r\n Service = \"SEO\" OR\r\n Service = \"Marketing\"\r\n<\/pre>\nANY condition being true is enough.<\/p>\n
Combined AND\/OR<\/h3>\nShow field IF:\r\n (Service = \"Web Design\" OR Service = \"SEO\") AND\r\n Budget > 5000\r\n<\/pre>\nMix for complex logic.<\/p>\n
<\/span>Best Practices for Dynamic Forms<\/span><\/h2>\n1. Start Simple<\/h3>\n\n- Begin with one or two conditions<\/li>\n
- Add complexity gradually<\/li>\n
- Test each addition<\/li>\n<\/ul>\n
2. Keep Logic Clear<\/h3>\n\n- Use obvious trigger questions<\/li>\n
- Avoid confusing dependencies<\/li>\n
- Document your logic<\/li>\n<\/ul>\n
3. Position Fields Logically<\/h3>\n\n- Conditional fields appear after trigger<\/li>\n
- Maintain natural flow<\/li>\n
- Group related fields<\/li>\n<\/ul>\n
4. Handle Required Fields<\/h3>\n\n- Hidden fields shouldn’t be required<\/li>\n
- Make required only when visible<\/li>\n
- Test submission with hidden required fields<\/li>\n<\/ul>\n
5. Provide Visual Feedback<\/h3>\n\n- Smooth animations for appearing fields<\/li>\n
- Clear transitions<\/li>\n
- No jarring changes<\/li>\n<\/ul>\n
6. Test All Paths<\/h3>\n\n- Every trigger option<\/li>\n
- Every combination if using AND\/OR<\/li>\n
- Mobile and desktop<\/li>\n
- Different browsers<\/li>\n<\/ul>\n
<\/span>Real-World Dynamic Form Examples<\/span><\/h2>\nExample 1: Event Registration<\/h3>\n
Trigger:<\/strong> Attendance type<\/p>\n\n- In-Person \u2192 Show: Dietary restrictions, T-shirt size, Emergency contact<\/li>\n
- Virtual \u2192 Show: Time zone, Platform preference<\/li>\n
- Hybrid \u2192 Show: All of the above<\/li>\n<\/ul>\n
Example 2: Job Application<\/h3>\n
Trigger:<\/strong> Position type<\/p>\n\n- Full-time \u2192 Show: Salary expectations, Start date<\/li>\n
- Part-time \u2192 Show: Hours available, Schedule preferences<\/li>\n
- Contract \u2192 Show: Hourly rate, Project duration<\/li>\n<\/ul>\n
Example 3: Support Ticket<\/h3>\n
Trigger:<\/strong> Issue category<\/p>\n\n- Technical \u2192 Show: Browser, OS, Error message, Screenshot upload<\/li>\n
- Billing \u2192 Show: Order number, Invoice number<\/li>\n
- Account \u2192 Show: Username, Account email<\/li>\n
- Feature Request \u2192 Show: Feature description, Use case<\/li>\n<\/ul>\n
Example 4: Quote Request<\/h3>\n
Trigger:<\/strong> Project type<\/p>\n\n- New website \u2192 Show: Industry, Page count, Features needed<\/li>\n
- Redesign \u2192 Show: Current URL, What to keep, What to change<\/li>\n
- Maintenance \u2192 Show: Current URL, Tasks needed, Frequency<\/li>\n<\/ul>\n
Example 5: Feedback Form<\/h3>\n
Trigger:<\/strong> Satisfaction rating<\/p>\n\n- 1-3 (Low) \u2192 Show: “What went wrong?” textarea<\/li>\n
- 4-5 (High) \u2192 Show: “What did we do well?” textarea<\/li>\n<\/ul>\n
<\/span>Troubleshooting Dynamic Forms<\/span><\/h2>\nField Not Showing<\/h3>\n\n- Check condition is set correctly<\/li>\n
- Verify trigger field value matches exactly<\/li>\n
- Check for typos in condition values<\/li>\n
- Confirm action is “Show” not “Hide”<\/li>\n<\/ul>\n
Field Not Hiding<\/h3>\n\n- Verify default state (should start hidden)<\/li>\n
- Check condition logic<\/li>\n
- Clear browser cache<\/li>\n<\/ul>\n
Required Field Blocking Submission<\/h3>\n\n- Hidden fields shouldn’t be required<\/li>\n
- Set required only when visible<\/li>\n
- Check conditional required settings<\/li>\n<\/ul>\n
Logic Not Working on Mobile<\/h3>\n\n- Test on actual device<\/li>\n
- Check JavaScript errors<\/li>\n
- Verify responsive behavior<\/li>\n<\/ul>\n
Data Not Saving Correctly<\/h3>\n\n- Verify hidden field data handling<\/li>\n
- Check if hidden values should be cleared<\/li>\n
- Test submission for each path<\/li>\n<\/ul>\n
<\/span>Advanced Dynamic Form Techniques<\/span><\/h2>\nChained Conditions<\/h3>\n
Field A triggers Field B, which triggers Field C:<\/p>\n
Service Type \u2192 IF \"Enterprise\"\r\n \u2192 Show: Company Size \u2192 IF \"1000+\"\r\n \u2192 Show: Dedicated Account Manager checkbox\r\n<\/pre>\nConditional Sections<\/h3>\n
Show\/hide groups of fields together:<\/p>\n
IF \"Shipping needed\" = Yes\r\n \u2192 Show entire Shipping Address section (5 fields)\r\n<\/pre>\nConditional Email Routing<\/h3>\n
Different recipients based on selections:<\/p>\n
IF Department = \"Sales\" \u2192 Email to sales@company.com\r\nIF Department = \"Support\" \u2192 Email to support@company.com\r\n<\/pre>\n