Dynamic Forms in Drupal 10: How We Use AJAX, Conditional Logic, and Custom Modules to Do More

If you're building dynamic forms in Drupal 10, the Form API is your best friend. But to really go pro, you need AJAX callbacks, conditional visibility, dynamic field rendering, and sometimes even custom module logic. In this guide, we’ll show you exactly how we do it — with working code you can copy and extend.

🧱 The Foundation: Drupal 10 Form API

All dynamic behavior in Drupal forms starts with the Form API. Here's a basic custom form we use to trigger AJAX behavior:

// my_module/src/Form/DynamicExampleForm.php
namespace Drupal\my_module\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class DynamicExampleForm extends FormBase {
  public function getFormId() {
    return 'dynamic_example_form';
  }
  public function buildForm(array $form, FormStateInterface $form_state) {
    $options = ['yes' => 'Yes', 'no' => 'No'];
    $form['toggle'] = [
      '#type' => 'radios',
      '#title' => $this->t('Do you want to show more options?'),
      '#options' => $options,
      '#ajax' => [
        'callback' => '::updateAdditionalFields',
        'wrapper' => 'conditional-fields-wrapper',
      ],
    ];
    $form['conditional_fields'] = [
      '#type' => 'container',
      '#attributes' => ['id' => 'conditional-fields-wrapper'],
    ];
    if ($form_state->getValue('toggle') == 'yes') {
      $form['conditional_fields']['extra_text'] = [
        '#type' => 'textfield',
        '#title' => $this->t('Extra Text Field'),
      ];
    }
    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];
    return $form;
  }
  public function updateAdditionalFields(array &$form, FormStateInterface $form_state) {
    return $form['conditional_fields'];
  }
  public function submitForm(array &$form, FormStateInterface $form_state) {
    \Drupal::messenger()->addMessage($this->t('Form submitted successfully!'));
  }
}
    

💡 What’s Happening Here?

We're using #ajax on a radio button, and wrapping our dynamic fields inside a #type = 'container' with a specific wrapper ID. When a user selects “Yes”, the form refreshes that portion and adds new fields without reloading the page.

🧠 Real Use Case: Vendor Feedback Form

We built a form where:

• ✅ Users select a vendor
• ✅ AJAX fetches vendor details from the database
• ✅ Additional rating and feedback fields appear dynamically

🔄 Conditional Logic With #states

Want to toggle fields without AJAX? Use Drupal’s built-in #states like this:

$form['show_extra'] = [
  '#type' => 'checkbox',
  '#title' => $this->t('Show extra settings?'),
];
$form['extra_settings'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Extra settings'),
  '#states' => [
    'visible' => [
      ':input[name="show_extra"]' => ['checked' => TRUE],
    ],
  ],
];
    

The field extra_settings will only show if the checkbox is ticked. This logic works client-side and is great for quick UI toggles.

⚙️ When to Use Custom Modules for Dynamic Forms

We use custom modules when:

• 📦 You need to save complex data structures
• 🔁 You want to attach forms to custom routes or modals
• 📊 You need AJAX to pull database data dynamically

📡 Pro Tip: Add Autocomplete to Your Field

$form['vendor_name'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Vendor Name'),
  '#autocomplete_route_name' => 'my_module.vendor_autocomplete',
];
    

Then define the route + controller that returns the matching vendors from DB.

🔐 Validation + Secure Submit

We always validate form fields with custom validateForm() logic, especially for dynamic fields that may appear/disappear via AJAX.

🧰 Tools & Modules We Use With Dynamic Forms

• Webform module (when UI-based forms are needed)
• Modal Forms (Ajax Form in modal windows)
• Custom JavaScript (for edge behaviors)