Conditional form fields without drag-and-drop

Most WordPress form builders charge extra for “conditional logic.” It’s the line-item upsell that pushes a $99 plugin to $199. The pitch is that you need a visual logic graph to wire up “show this field when that field has this value.”

You don’t.

You need an attribute on the field. That’s it.

The pattern

In Core Forms, every field can have a data-show-if or data-hide-if attribute. The value is a comma-separated list of field-name=value pairs. The form watches the named fields and toggles visibility automatically.

Here’s a real example. A contact form where the “Tell me more” textarea only shows up when the user picks “Other” as their inquiry type:

<p>
  <label for="inquiry">What's this about?</label>
  <select name="inquiry" id="inquiry" required>
    <option value="">Pick one</option>
    <option value="quote">Quote request</option>
    <option value="support">Support question</option>
    <option value="other">Other</option>
  </select>
</p>

<p data-show-if="inquiry=other">
  <label for="details">Tell me more</label>
  <textarea name="details" id="details" rows="4"></textarea>
</p>

Type “Other” in the dropdown, the textarea appears. Pick anything else, it hides.

That’s the whole feature.

Multiple conditions

Stack them with commas. All conditions must be true for the field to show:

<p data-show-if="country=US, state=CA">
  <label for="ca-disclosure">California-specific consent</label>
  <input type="checkbox" name="ca-disclosure" id="ca-disclosure" />
</p>

The CA disclosure shows only when country is US AND state is CA. Either condition fails, the field hides.

Hide-if (the inverse)

Use data-hide-if when it’s clearer. Same syntax. Same comma rules.

<p data-hide-if="anonymous=yes">
  <label for="name">Your name</label>
  <input type="text" name="name" id="name" required />
</p>

Anonymous checkbox checked, name field hides. Unchecked, name shows.

Checkbox and radio handling

For checkboxes, the value matches what the field would submit. An unchecked checkbox doesn’t submit, so use data-show-if="newsletter=yes" paired with a value="yes" on the checkbox.

For radios, match the value of the chosen option. Same pattern.

<label><input type="radio" name="contact" value="email" checked /> Email me</label>
<label><input type="radio" name="contact" value="phone" /> Call me</label>

<p data-show-if="contact=phone">
  <label for="phone">Phone number</label>
  <input type="tel" name="phone" id="phone" />
</p>

Required fields

Hidden fields skip required validation automatically. So if details has required and the field is hidden because inquiry isn’t other, the form will submit fine. Show the field, the requirement comes back.

You don’t have to wire that up. It’s the default in Core Forms because anything else is a UX bug.

Where this falls short

Three honest limits:

1. No “any of” logic. All conditions must match. If you need “show this if country is US OR Canada”, you have to either duplicate the field or write custom JS.

2. No nested conditions. The data attribute only watches first-level field values. If you want “show field B when field A is shown” (cascade), you need to write the conditions for both at the leaf level.

3. No live “min/max” comparisons. The match is exact-equality on string value. You can’t write “show this field when amount > 1000.” For that, write a change handler.

For the 90% case (lead-gen forms, contact forms, application forms), the data-attribute approach handles it. The 10% case rarely needs the visual builder; it needs a developer for half a day, and that’s cheaper than a $200/year plugin upgrade for the rest of the site’s life.

How I actually use this

On client sites, my pattern is:

• Rough out the form in the Core Forms HTML editor with all fields visible.
• Wire conditional fields with data-show-if once the form is structurally right.
• Test the show/hide logic in the preview.
• Ship.

The whole conditional-logic step takes about three minutes for a typical form. Versus 30 minutes wiring it through a visual logic builder, half of which is figuring out the builder’s UI.

The next step

Pick one form on your site that has a “tell me more” field. Wire it with data-show-if. Watch the form get cleaner immediately.

Conditional logic is bundled with Core Forms at every plan level. It’s a string in an attribute, not a feature flag. The pricing page covers it.