Get Pro
Download Free Get Pro

Docs Getting started

Customize form CSS

Style Sobi Forms on the front end with CSS variables, your theme stylesheet, or a full custom sheet—without breaking AJAX submit.

The problem

Default form styles are intentionally minimal. You want the form to match your theme—colors, radius, spacing—without fighting heavy plugin CSS or breaking AJAX validation.

The solution

Sobi Forms ships a small front-end stylesheet (handle sobiforms) that loads only on pages that render a form. You can:

  1. Override with CSS variables (fastest)
  2. Add rules in your theme that target .sobiforms-form
  3. Dequeue the default CSS and write your own (keep the JS)

Option 1 — CSS variables (recommended)

Override tokens on .sobiforms-form in your theme or Customizer → Additional CSS:

.sobiforms-form {
  --sobiforms-border: #d4d4d4;
  --sobiforms-focus: #2563eb;
  --sobiforms-radius: 8px;
  --sobiforms-gap: 1.25rem;
  --sobiforms-error: #b32d2e;
  --sobiforms-success: #00a32a;
  --sobiforms-max-width: 32rem;
}

Useful variables:

| Variable | Role | |---|---| | --sobiforms-border | Input borders | | --sobiforms-focus | Focus ring / accent | | --sobiforms-radius | Corner radius | | --sobiforms-gap | Space between fields | | --sobiforms-error / --sobiforms-success | Feedback colors | | --sobiforms-max-width | Optional form max width | | --sobiforms-control-padding-y / --sobiforms-control-padding-x | Input padding |

You do not need to dequeue the default stylesheet for variables to work.

Option 2 — Theme CSS overrides

Target the wrapper and common parts:

```css .sobiforms-form .sobiforms-submit { background: #171717; color: #fff; border: 0; border-radius: 8px; padding: 0.75rem 1.25rem; }

.sobiforms-form p.sobiforms-field > input, .sobiforms-form p.sobiforms-field > select, .sobiforms-form p.sobiforms-field > textarea { border-color: #e5e5e5; } ```

Handy selectors:

  • .sobiforms-form — form wrapper (data-form-id, data-form-instance)
  • .sobiforms-field — field row
  • .sobiforms-row — multi-column row
  • .sobiforms-submit — submit button
  • .sobiforms-feedback — success / error messages
  • .sobiforms-step, .sobiforms-step-next, .sobiforms-step-back — multi-step
  • .sobiforms-progress — progress segments

Prefer .sobiforms-form[data-form-id="3"] over legacy #sobiforms-form-3 ids—instance suffixes change when the same form is embedded twice.

Option 3 — Remove default CSS, keep JavaScript

If you want a blank canvas but still need AJAX submit, validation, multi-step, and Turnstile:

add_action( 'wp_enqueue_scripts', function () {
	wp_dequeue_style( 'sobiforms' );
}, 100 );

Then style everything in your theme. Do not remove the sobiforms script.

Do not use this unless you replace submit handling

add_filter( 'sobiforms_enqueue_front_assets', '__return_false' );

That filter disables both CSS and JS. Forms will no longer submit via the plugin’s front-end script. Only use it if you fully replace submission behavior.

Tips

  • Same guidance lives in wp-admin under Sobi Forms → Resources → Custom styling.
  • Assets stay off pages without a form—your global CSS can still target .sobiforms-form when a form is present.
  • Multi-column rows stack under 600px; override .sobiforms-row carefully on mobile.
  • For layout tips without custom CSS, see Multi-column layout.

Next steps