WordPress Form Not Showing Required Field Asterisks

“`html

WordPress Form Not Showing Required Field Asterisks — And How to Fix It

I’ve spent more hours than I’d like to admit troubleshooting why asterisks vanish from WordPress forms. You build a form, set fields to required, preview it live, and suddenly those little red asterisks that tell users “you must fill this out” are nowhere to be found — at least if you want them there. Your visitors get confused. Form abandonment spikes. Everyone loses.

The good news? This problem is almost always fixable. Usually within minutes. Honestly, I’ve solved it so many times I could do it in my sleep now.

What makes this issue particularly frustrating is that WordPress form builders don’t always surface the problem clearly. WPForms, Contact Form 7, Elementor Forms, Gravity Forms — they all have different failure points. Sometimes it’s a plugin setting buried three menus deep. Sometimes it’s CSS overriding the display. Sometimes your theme decided asterisks clash with its design aesthetic and hid them without telling you.

I’ll walk you through the exact steps I use to diagnose and fix missing required field asterisks, regardless of which plugin you’re using. So, without further ado, let’s dive in.

Why Required Field Asterisks Disappear in WordPress Forms

Before jumping to fixes, understanding what actually hides those asterisks matters. It’s not magic — it’s code.

The most common culprit is CSS. A theme or plugin applies display: none or visibility: hidden to the asterisk element, and it vanishes. I once spent 45 minutes investigating a “broken” form builder before realizing the theme developer had specifically hidden all asterisks because they preferred using “(required)” text labels instead. That was 2019. I should have known better.

Plugin conflicts rank second. Two form-related plugins fighting for control of your form markup will sometimes disable each other’s features. Deactivating your accessibility plugin, for example, might accidentally hide asterisks meant to assist screen reader users — which is ironic and frustrating simultaneously.

Theme overrides come next. Premium themes sometimes bundle custom form styling that disables default asterisk display. Your form builder outputs the asterisk HTML correctly, but the theme’s CSS never shows it. That’s what makes theme debugging so endearing to us developers — hidden CSS reigning supreme.

Finally, form builder settings themselves might have a toggle buried in the plugin admin that controls asterisk visibility. Most builders enable asterisks by default, but not all. I’m apparently someone who checks settings last when I should check them first, and WPForms works for me while some older plugins never cooperate.

The encouraging part? Every single cause has a straightforward solution. Don’t make my mistake of skipping the settings check.

Check Your Form Builder Settings First

Start here before touching any code. This catches roughly 40% of asterisk problems in my experience.

WPForms

Open your form in the WPForms builder. Look for Settings in the left sidebar. Click it. Scroll down until you find Validation or Required Fields section — it’s usually between Form Confirmation and Email Notifications.

You’ll see an option like “Show asterisk for required fields” or “Display required field asterisks.” Toggle it on if it’s off. Save your form. Check the live preview. Did the asterisks appear? Great, you’re done.

If it’s already enabled and asterisks still aren’t showing, move to the CSS section below. That’s where the real work begins.

Contact Form 7

Contact Form 7 handles this differently — it’s all about the syntax. Your required field markup needs an asterisk manually, or rather, it’s built into the field syntax from the start.

In your form code, required fields use the [text* your-field-name] syntax (notice the asterisk in the bracket). When you save this code, Contact Form 7 should render an asterisk in the form output. That’s the idea anyway.

If asterisks aren’t appearing, your theme is almost certainly hiding them with CSS. Jump straight to the CSS debugging section — I’ve found this is the case about 85% of the time with Contact Form 7 issues.

Elementor Forms

Open your page in Elementor editor. Click the form widget. In the right panel, look for Advanced or Form Settings. Inside, find Mark required fields or Show required asterisk.

Ensure this toggle is enabled — while you won’t need extreme customization, you will need this single checkbox turned on. If Elementor’s form builder doesn’t show this option explicitly, asterisks are usually on by default, meaning your issue is CSS-based. That is because Elementor relies on your theme to display the elements.

Gravity Forms

Navigate to Forms in your WordPress admin. Click Settings for your specific form. Go to the Advanced tab — it’s usually the last tab on the right.

Look for Mark required fields or Display mark for required fields. Check that it’s enabled. Gravity Forms marks required fields with an asterisk by default, so if you’ve confirmed this setting is on and asterisks still aren’t visible, CSS is hiding them. That’s almost guaranteed at this point.

Fix Hidden Asterisks with CSS

Probably should have opened with this section, honestly. Most of my clients end up here, which tells me form builder settings usually aren’t the problem.

The fix depends on your form plugin, but the approach is identical: override the CSS that’s hiding the asterisk. You’re essentially saying “I don’t care what the theme says — show this asterisk.”

Finding the Asterisk CSS Class

Different plugins use different class names for asterisks. Here’s what to look for:

WPForms: .wpforms-required or .wpforms-field-required
Contact Form 7: .wpcf7-form-control-wrap span.wpcf7-form-required or similar nested structure
Elementor Forms: .elementor-field-required
Gravity Forms: .gfield_required or span.gfield_required

Adding CSS Override

Log into WordPress. Go to Appearance → Customize. Click Additional CSS at the bottom of the menu.

Paste this code snippet — adjust the class name for your plugin:

.wpforms-required {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: red;
}

If you’re using Contact Form 7, try this instead:

.wpcf7-form-control-wrap span.wpcf7-form-required {
  display: inline !important;
  visibility: visible !important;
}

The !important flag forces your CSS to override conflicting styles from the theme or plugins — it’s basically you saying “listen to me, not the theme.” Publish the changes and reload your form page.

The asterisks should now be visible. If they’re still missing, move to the debugging section below. You likely have a more specific CSS rule blocking them or a plugin conflict that needs investigation.

Debug Theme and Plugin Conflicts

If the CSS override didn’t work, something deeper is overriding your code. I encountered this when a premium theme bundled its own form styling library that was completely separate from WordPress’s standard form styling — the Divi theme does this, for instance.

Use Browser Inspector

Open your form page in any modern browser. Right-click on the area where the asterisk should appear. Select Inspect or Inspect Element.

The browser’s developer tools will open, showing you the HTML and CSS. Look for the span or element containing the asterisk. In the styles panel, you’ll see which CSS rules are applied — and which ones are crossed out (meaning they’re overridden by something else).

Look specifically for rules like these:

display: none
visibility: hidden
position: absolute; left: -9999px (a common way to hide elements visually while keeping them accessible to screen readers)
opacity: 0
font-size: 0

Once you identify the exact CSS rule, you can craft a more targeted override. This is detective work, but it works every time.

Check for Plugin Conflicts

Sometimes two plugins genuinely can’t coexist peacefully. Test this systematically.

Go to Plugins in WordPress admin. Deactivate every plugin except your form builder plugin. Reload your form. Do asterisks appear? First, you should run this test — at least if you want to isolate the problem quickly.

If yes, a deactivated plugin was causing the issue. Reactivate plugins one at a time, testing after each, until you identify the culprit. Then contact that plugin’s support or find an alternative that plays nicely with your form builder.

If asterisks still don’t show with all plugins except your form builder disabled, your theme is the issue. Switch to a default WordPress theme (like Twenty Twenty-Four) temporarily. If asterisks appear, your active theme has conflicting CSS that needs addressing.

Add Custom Required Field Indicators

Sometimes the asterisk element doesn’t exist at all in your form markup. Maybe your form builder version is ancient, or maybe the plugin removed that feature entirely for some reason.

You can add asterisks programmatically using PHP hooks. This works across most WordPress form plugins and gives you complete control.

Add this code to your theme’s functions.php file (or create a custom plugin — I’d recommend the latter):

add_filter( 'wpforms_frontend_form_label', function( $label, $field, $form_data ) {
    if ( isset( $field['required'] ) && $field['required'] ) {
        $label .= ' *';
    }
    return $label;
}, 10, 3 );

This hook runs for WPForms fields when they render. If a field is marked required, the code appends a red asterisk to the label. The CSS class required-asterisk lets you style it further if needed — change the color from red to whatever you prefer, add bold styling, whatever works.

For Contact Form 7, the approach differs slightly because it uses shortcodes instead of hooks. Add this instead:

add_filter( 'wpcf7_form_elements', function( $form ) {
    $form = preg_replace( '//', '*', $form );
    return $form;
} );

This regex pattern finds the required field spans and adds inline styling to make them visible and prominent. It’s not elegant, but it works reliably.

If you’re not comfortable editing functions.php, most form plugins have a “custom hooks” or “filter” documentation page. Check yours before manually editing code. WPForms documentation is solid on this — Contact Form 7’s is less so.

After adding the code, test your form. The asterisks should now display correctly. If you’re still seeing nothing, verify the code is in the right file and that PHP errors aren’t silently failing. Check your WordPress error logs if available.

Missing required field asterisks frustrate both you and your users — they don’t know which fields are mandatory. But they’re fixable. Start with your form builder settings, move to CSS if needed, then debug theme conflicts if both fail. Nine times out of ten, you’ll have working asterisks within the hour. Probably less if you find this guide first.

“`