Skip to main content

WordPress Form CSS: CF7, WPForms, and WooCommerce

WordPress form plugins generate their own HTML structure and often inject opinionated inline styles. This guide provides targeted CSS overrides for the three most common form systems.

1. Contact Form 7 (CF7)​

CF7 generates a consistent HTML structure. The challenge is its inline width: 100% and varying <span> wrappers.

HTML Structure Reference​

<div class="wpcf7">
  <form class="wpcf7-form">
    <p>
      <label>Name *</label>
      <span class="wpcf7-form-control-wrap" data-name="your-name">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"
               type="text" name="your-name" required>
      </span>
      <span class="wpcf7-not-valid-tip">Please enter your name.</span>
    </p>
    <p>
      <input class="wpcf7-form-control wpcf7-submit" type="submit" value="Send">
    </p>
  </form>
</div>

Complete CF7 Styling​

/* ── Wrapper ── */
.wpcf7 { max-width: 640px; }
.wpcf7-form p { margin-bottom: 1rem; }

/* ── All inputs, textarea, select ── */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-surface, #1a1a1a);
  border: 1.5px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 8px);
  color: var(--color-text, #f0f0f0);
  font-family: var(--font-body, system-ui);
  font-size: var(--text-base, 1rem);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-primary, #6c63ff);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}

/* ── Submit button ── */
.wpcf7-form-control.wpcf7-submit,
input.wpcf7-submit {
  appearance: none;
  background: var(--color-primary, #6c63ff) !important;
  color: white !important;
  border: none !important;
  padding: 0.8rem 2rem !important;
  border-radius: var(--radius-full, 9999px) !important;
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  width: auto !important;
}
.wpcf7-form-control.wpcf7-submit:hover { background: var(--color-primary-dark, #5048d4) !important; }

/* ── Validation error ── */
.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-danger, #e53e3e);
  margin-top: 0.25rem;
}
.wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--color-danger, #e53e3e) !important;
}

/* ── Response output (sent / error message) ── */
.wpcf7-response-output {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  font-size: var(--text-sm);
  border-left: 4px solid;
}
.wpcf7-mail-sent-ok {
  border-color: var(--color-success, #38a169);
  background: rgba(56, 161, 105, 0.1);
  color: var(--color-success);
}
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-acceptance-missing {
  border-color: var(--color-danger, #e53e3e);
  background: rgba(229, 62, 62, 0.1);
  color: var(--color-danger);
}

/* ── Spinner override ── */
.wpcf7 .ajax-loader { display: none; }  /* Remove default CF7 loader */

2. WPForms​

WPForms generates more structured HTML with .wpforms-field-container wrappers.

WPForms CSS Overrides​

/* ── Container reset ── */
.wpforms-container { max-width: 640px; }
.wpforms-form .wpforms-field { margin-bottom: 1.25rem; padding: 0; }

/* ── Labels ── */
.wpforms-form label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);
  margin-bottom: 0.4rem;
  color: var(--color-text);
}
.wpforms-field-required { color: var(--color-danger); }

/* ── Inputs ── */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form textarea,
.wpforms-form select {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md, 8px) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: none !important;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
  outline: none !important;
}

/* ── Submit button ── */
.wpforms-submit,
.wpforms-form button[type="submit"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: var(--radius-full) !important;
  padding: 0.8rem 2rem !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.wpforms-submit:hover { background: var(--color-primary-dark) !important; }

/* ── Error messages ── */
.wpforms-error-container, .wpforms-field .wpforms-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: 0.25rem;
}

3. WooCommerce Checkout and Account Forms​

WooCommerce forms have the most complex HTML — heavily nested and with aggressive default styles.

WooCommerce Form CSS​

/* ── Global form inputs ── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  height: auto !important;
  box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
  outline: none !important;
}

/* ── Labels ── */
.woocommerce form .form-row label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}

/* ── Place order button ── */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
  width: 100%;
  background: var(--color-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 1rem 2rem !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em;
  transition: background 0.2s !important;
}
.woocommerce #payment #place_order:hover {
  background: var(--color-primary-dark) !important;
}

/* ── Checkout form notices ── */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: var(--radius-md);
  border-left-width: 4px;
  padding: 1rem 1.5rem;
}
.woocommerce-error   { border-color: var(--color-danger);  background: rgba(229,62,62,0.08); }
.woocommerce-info    { border-color: var(--color-primary); background: rgba(108,99,255,0.08); }
.woocommerce-message { border-color: var(--color-success); background: rgba(56,161,105,0.08); }

/* ── Account login/register forms ── */
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--color-surface);
}

The !important Note for WooCommerce​

/* WooCommerce uses inline styles extensively — use !important strategically */
/* Add a comment so future you knows WHY */
.woocommerce #place_order {
  background: var(--color-primary) !important; /* Overrides WC inline style */
}

[!TIP] Test WooCommerce CSS changes in incognito mode with LiteSpeed/WP Rocket cache cleared — WooCommerce aggressively caches the checkout page and you may not see changes otherwise.