Using Contao’s Built‑in Conditional Fields to Create Dynamic Forms

Problem: Forms that need to adapt to user input

Many Contao projects require forms where certain questions appear only after a specific answer is given. For example, a support request form should ask for a ticket number only when the user selects “Support” as the contact reason. Traditionally developers add custom JavaScript or third‑party plugins to achieve this behavior, which increases maintenance overhead and can break if JavaScript is disabled.

Thesis: Contao’s Form Generator already provides a server‑side conditional‑fields feature that solves this use case without extra code.

How the feature works

When you edit a field in the Form Generator, a “Visibility” tab lets you define a rule of the form "Show if ". The rule is evaluated by Contao’s PHP rendering engine each time the form is built, so the correct fields are present in the HTML markup before it reaches the browser. Because the logic runs on the server, the form behaves correctly even when JavaScript is turned off, and the same rules are respected during validation and email submission.

Worked example: Support‑only details field

1. Log into the Contao backend and go to System → Form Generator.
2. Click New to create a form, name it "Contact Request".
3. Add a Select field:
   • Label: Contact Reason
   • Name: contact_reason
   • Options: Sales|Sales, Support|Support, Feedback|Feedback
4. Add a Textarea field:
   • Label: Details
   • Name: details
   • Leave it optional for now.
5. Open the Details field’s settings, switch to the Visibility tab.
6. Set:
• Visibility: Show if
• Field: Contact Reason
• Operator: equals
• Value: Support
7. Save the form.

Verification steps

1. In the backend, click the Preview button for the form.
2. Select “Sales” or “Feedback” in the Contact Reason dropdown – the Details textarea should remain hidden.
3. Select “Support” – the Details textarea should appear immediately.
4. Disable JavaScript in your browser (most browsers have a setting under Developer Tools → Settings → Disable JavaScript) and repeat the preview. The textarea still appears only when “Support” is chosen, proving the rule is applied server‑side.
5. Submit the form with “Support” selected but leave Details empty. Because the field is not marked required, the submission will succeed; if you need the field to be mandatory when shown, edit the Details field and set Required to Yes.

Trade‑offs and limitations

• Simple AND‑only rules: The UI lets you combine multiple conditions only with AND logic. To express an OR (e.g., show if Reason is Sales or Support) you must either create duplicate fields or override the form template.
• Validation coupling: Visibility does not automatically affect the Required flag. Forgetting to adjust required settings can let empty data slip through when a field is conditionally shown.
• Complex nesting: Deeply nested conditions (e.g., show A only if B equals X and C equals Y, unless D equals Z) become hard to manage in the backend and may require a custom template or a small JavaScript enhancement.

Actionable closing

Start by mapping out the visibility logic you need on paper, marking which fields depend on which values. Use the Form Generator’s Visibility tab for each dependent field, and always double‑check the Required setting when a field’s presence changes. If you encounter a scenario that requires OR logic or complex nesting, consider creating a helper template that adds a custom CSS class based on the server‑evaluated rule, then use a tiny bit of JavaScript solely for UI polish — keeping the core logic safely on the server.

By relying on Contao’s native conditional fields, you reduce custom code, improve accessibility (the form works without JavaScript), and keep validation and email pipelines in sync.