Conditional logic form development for website

Form with Conditional Logic Development

Form with conditional logic shows or hides fields based on user answers. Instead of form with 30 fields, most irrelevant — each user sees only relevant questions.

Conditional Logic Engine

interface FieldRule {
  field:    string;       // field rule applied to
  action:   'show' | 'hide' | 'require' | 'set_value';
  conditions: Condition[];
  logic:    'and' | 'or';
}

interface Condition {
  field:    string;
  operator: 'equals' | 'not_equals' | 'contains' | 'greater_than' | 'is_empty';
  value:    unknown;
}

function evaluateCondition(condition: Condition, formValues: Record<string, unknown>): boolean {
  const fieldValue = formValues[condition.field];

  switch (condition.operator) {
    case 'equals':     return fieldValue === condition.value;
    case 'not_equals': return fieldValue !== condition.value;
    case 'contains':   return String(fieldValue).includes(String(condition.value));
    case 'is_empty':   return !fieldValue || fieldValue === '';
    case 'greater_than': return Number(fieldValue) > Number(condition.value);
    default: return false;
  }
}

function shouldShowField(rule: FieldRule, formValues: Record<string, unknown>): boolean {
  const results = rule.conditions.map(c => evaluateCondition(c, formValues));
  return rule.logic === 'and' ? results.every(Boolean) : results.some(Boolean);
}

Form Component with Conditional Logic

function ConditionalForm({ schema, onSubmit }: Props) {
  const { watch, register, handleSubmit } = useForm();
  const formValues = watch();

  const visibleFields = schema.fields.filter(field => {
    const rule = schema.rules.find(r => r.field === field.id);
    if (!rule) return true;  // without rules — always show
    return rule.action === 'show'
      ? shouldShowField(rule, formValues)
      : !shouldShowField(rule, formValues);
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <AnimatePresence>
        {visibleFields.map(field => (
          <motion.div
            key={field.id}
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
          >
            <FormField field={field} register={register} />
          </motion.div>
        ))}
      </AnimatePresence>
      <button type="submit">Submit</button>
    </form>
  );
}

Configuration Example

{
  "fields": [
    { "id": "contact_type", "type": "radio", "options": ["Individual", "LLC", "Corp"] },
    { "id": "company_name", "type": "text",  "label": "Company Name" },
    { "id": "inn",          "type": "text",  "label": "Tax ID" },
    { "id": "passport",     "type": "text",  "label": "Passport" }
  ],
  "rules": [
    {
      "field": "company_name",
      "action": "show",
      "logic": "or",
      "conditions": [
        { "field": "contact_type", "operator": "equals", "value": "LLC" },
        { "field": "contact_type", "operator": "equals", "value": "Corp" }
      ]
    },
    {
      "field": "passport",
      "action": "show",
      "logic": "and",
      "conditions": [
        { "field": "contact_type", "operator": "equals", "value": "Individual" }
      ]
    }
  ]
}

Configuration stored on server — logic changes without deploy.

Timeframe

Form with conditional logic engine and JSON configuration: 4–6 working days.