WordPress Form Not Working in Elementor? Here's What to Check

You're building a page in Elementor. You add a form (either Elementor's native form builder or Contact Form 7). Then:

  • The form doesn't appear on the page
  • The form appears but the submit button doesn't work
  • Form submits but emails don't arrive
  • You get a "Server_error" or "An error occurred" message
  • The form breaks after updating Elementor

Elementor + Forms is a common combination, and when it breaks, the issue is usually one of six things. This post walks through each, in order.

Before You Start: Two Types of Forms in Elementor

Elementor's Native Form Widget

Built into Elementor. You drag fields onto the page, set email notifications, and it works. (Elementor Pro required for advanced features.)

Contact Form 7 in Elementor

You create the form in Contact Form 7, then embed it in Elementor using the Shortcode widget (or CF7 native widget if you have Elementor Pro).

This post covers both. I'll label each fix "Native Form" or "CF7" so you know which applies to you.

Test #1: Check If the Form Appears at All (2 Minutes)

Before troubleshooting, confirm the actual problem.

  1. Go to the live page (not the Elementor editor)
  2. Look for the form — does it show up?
  3. If yes, click the submit button with empty fields — do you get an error message?
  4. Fill the form and submit — what happens?

Result 1: Form doesn't appear at all → Go to "Fix #1: Form Not Showing" section

Result 2: Form appears but submit button does nothing → Go to "Fix #2: Submit Button Not Working" section

Result 3: Form submits but shows "Server_error" or "An error occurred" → Go to "Fix #3: Server Error Message" section

Result 4: Form submits successfully but emails don't arrive → Go to "Fix #4: Emails Not Sending" section

Fix #1: Form Not Showing (Native or CF7)

Step 1A: Check the Widget/Plugin Is Active

For Elementor Native Forms:

  1. Go to WordPress > Plugins > Installed Plugins
  2. Search for "Elementor" and "Elementor Pro"
  3. Both should be "Active"
  4. If not, activate them
  5. Go back to the page and refresh

For Contact Form 7:

  1. Go to WordPress > Plugins > Installed Plugins
  2. Search for "Contact Form 7"
  3. It should be "Active"
  4. If it's inactive, activate it
  5. Go back to Elementor and check the Content tab for "Select Your Form" dropdown
  6. If no CF7 widget appears in Elementor's search results, the most likely cause is that the Contact Form 7 plugin is not installed or not activated.

Step 1B: Check the Form/Widget Configuration

For Elementor Native Forms:

  1. Open the page in Elementor editor
  2. Click on the form widget
  3. Left panel should show "Form Settings"
  4. Check the "Form Fields" section — are there any fields defined?
  5. If empty, add at least one field: + Add Item > choose field type (Text, Email, etc.)
  6. Save and refresh the front-end page

For Contact Form 7:

  1. Open the page in Elementor editor
  2. Click on the CF7 widget (Shortcode widget)
  3. Left panel shows "Content" tab
  4. Look for "Select Your Form" dropdown
  5. Click it and choose the contact form you created earlier.
  6. If no forms appear in the dropdown, create a form in WordPress > Contact > Contact Forms, then return here
  7. Save and refresh front-end page

Step 1C: Check for CSS Conflicts

The form might be there but hidden by CSS.

  1. Open the live page in your browser
  2. Right-click on the form area > Inspect (or press F12)
  3. Look for the form element — is it there in the HTML?
  4. Check the "Styles" tab on the right — look for "display: none" or "visibility: hidden"
  5. If you see these, a CSS rule is hiding it

To fix: In Elementor editor, click the form widget, go to Advanced > Custom CSS, and add:

.elementor-form {
  display: block !important;
  visibility: visible !important;
}

Save and refresh the page.

Step 1D: Test in a Default Theme

  1. Temporarily switch to a default WordPress theme (Twenty Twenty-Four)
  2. Go to WordPress > Appearance > Themes
  3. Activate Twenty Twenty-Four
  4. Go back to the page and refresh
  5. Does the form appear now?

If yes: Your current theme has a CSS conflict. Switch back to your theme and add the custom CSS above (Step 1C).

If no: The issue is Elementor/plugin-level, not theme. Continue to next steps.

Expected result: Form now appears on the page.

Fix #2: Submit Button Not Working (Native or CF7)

Step 2A: Check JavaScript Conflicts (Most Common)

Problem: Submit button exists but clicking it does nothing. Usually JavaScript is broken.

  1. Open the live page in Chrome/Firefox
  2. Press F12 to open Developer Tools
  3. Go to "Console" tab
  4. Submit the form
  5. Do you see any red error messages?

Common error: "jQuery is not defined" or "Elementor is undefined"

To fix: A plugin is conflicting. Go to Fix #2D (Plugin Conflict section).

Step 2B: Check for Cache Plugin Blocking the Form

Problem: Caching plugins (WP Super Cache, W3 Total Cache, Cloudflare, etc.) sometimes cache the form incorrectly, making it "dead".

Quick test:

  1. Open the page in an Incognito/Private window (bypasses browser cache)
  2. Try the form
  3. Does it work in Incognito?

If yes: It's a caching issue. Go to your cache plugin:

  • WP Super Cache: Settings > WP Super Cache > Clear cache
  • W3 Total Cache: Performance > Purge All Caches
  • Cloudflare: Dashboard > Purge Everything
  • WP Rocket: WP Rocket > Purge Cache

Then refresh the live page and test the form again.

If form still doesn't work after cache clear: The cache plugin may be incompatible with Elementor forms. Disable it temporarily:

  1. Go to Plugins > Installed Plugins
  2. Deactivate your cache plugin
  3. Test the form on the live page
  4. If it works now, the cache plugin is the issue

Solution: Check if your cache plugin has an Elementor compatibility setting, or switch to a different cache plugin (WP Rocket is known to work well with Elementor).

Step 2C: Check AJAX Endpoints

Problem: Elementor forms use AJAX (JavaScript that talks to WordPress without reloading the page). If AJAX is broken, forms won't submit.

How to test:

  1. Open Developer Tools (F12) > Console tab
  2. Paste this code and press Enter:
fetch('/wp-admin/admin-ajax.php').then(r => r.text()).then(t => console.log(t))
  1. Look at the output. If you see HTML (not an error), AJAX is working. If you see "404" or error, AJAX is broken.

If AJAX is broken: Contact your hosting provider. This is a server-level issue. They may need to:

  • Ensure /wp-admin/admin-ajax.php is accessible
  • Check firewall rules blocking AJAX requests
  • Verify mod_security isn't blocking requests

Step 2D: Disable Plugins One-by-One (Plugin Conflict)

A security, caching, or optimization plugin might conflict with Elementor.

  1. Go to Plugins > Installed Plugins
  2. Note all active plugins (or screenshot the list)
  3. Deactivate ALL plugins (select all > Bulk Actions > Deactivate)
  4. Keep only Elementor active
  5. Go to the form page and test
  6. If form works now, reactivate plugins one at a time, testing after each
  7. When the form breaks, the last plugin you activated is the culprit

Common conflicting plugins: Wordfence, iThemes Security, WP Super Cache, W3 Total Cache, Jetpack, some SEO plugins

Solution: Either disable the conflicting plugin, update it to the latest version, or check if it has compatibility settings for page builders.

Page builders (Divi, Elementor): some builder scripts conflict with CF7 event listeners, particularly on sites using third-party layouts or templates from providers like Divi5Lab.

Expected result: Submit button works. Form submits successfully.

Fix #3: "Server_error" or "An Error Occurred" Message

Problem: Form submits but shows an error instead of success message. This usually means a field ID is missing.

Step 3A: Check All Field IDs Are Populated (Most Common Fix)

For Elementor Native Forms:

  1. Open page in Elementor editor
  2. Click on the form widget
  3. Click on each field (one at a time) in the form
  4. In the left panel, go to "Advanced" tab
  5. Look for "ID" field — is it populated with a value? (e.g., "name_field", "email_field")
  6. If empty, type a unique ID for that field (letters and underscores only: "field_name", "field_email", etc.)
  7. Do this for EVERY field in the form
  8. Save and test on the front-end

If you notice a server_error or an error occurred message, it indicates that a field ID is missing in your Elementor form builder.

For Contact Form 7:

CF7 assigns IDs automatically, so this is less common. But check:

  1. Go to WordPress > Contact > Contact Forms
  2. Click on your form
  3. Look at the form code (the large text area with shortcodes)
  4. Each field should have a unique name, like: [text* name] or [email* email]
  5. Make sure no two fields have the same name
  6. Save and test

Step 3B: Check Form Notification Settings

For Elementor Native Forms:

  1. Open page in Elementor editor
  2. Click on the form widget
  3. Left panel > Advanced > Email Notifications (or Actions)
  4. Check "To Email" field — what's in it?
  5. It should be a valid email address (e.g., admin@yoursite.com, not blank)
  6. If blank, enter your admin email
  7. Check "From Email" — also should be a valid email
  8. Check "From Name" — usually "Website Name"
  9. Save and test the form

Another reason is incorrect email notification settings in your Elementor Form. This usually happens when the wrong From Email is set.

For Contact Form 7:

  1. Go to WordPress > Contact > Contact Forms
  2. Click on your form
  3. Go to "Mail" tab
  4. Check "To" field — should be your email address
  5. Check "From" field — should be a domain email (e.g., [email protected])
  6. Save

Step 3C: Check Form Action/Method

For Elementor Native Forms:

  1. Open in Elementor editor
  2. Click form widget
  3. Left panel > Settings > Form Settings
  4. Check "Form Action" — it should be blank (defaults to site's admin-ajax.php) or point to your site's /wp-admin/admin-ajax.php
  5. Check "Form Method" — should be "POST"
  6. If these look wrong, revert to defaults and save

Expected result: Error message goes away. Form submits and shows success message.

Fix #4: Emails Not Sending (But Form Shows "Success")

Problem: Form submits, you see "Message sent" or success message, but no email arrives.

Step 4A: Check WordPress Can Send Email (CRITICAL)

This is almost always the root cause. WordPress can't send email because:

  • Host blocks PHP's mail() function
  • SMTP not configured
  • Email domain issues (SPF/DKIM missing)
  1. Install "WP Mail SMTP" plugin (Plugins > Add New > Search "WP Mail SMTP" > Install > Activate)
  2. Go to WP Mail SMTP > Settings
  3. Choose a mailer: Gmail (if you have Google Workspace) or Brevo (free tier: 300 emails/day)
  4. Follow the setup wizard (takes 5 minutes)
  5. Go to WP Mail SMTP > Tools > Email Test
  6. Send a test email to yourself
  7. Check if it arrives (inbox and spam folder)

Elementor uses WordPress' wp_mail function to send emails. Your web host takes the sent email, processes it, and sends it. Web hosting servers can deactivate the PHP function responsible for email transmission, preventing the sending of emails.

Once you've set up WP Mail SMTP and confirmed it works, Elementor forms will also work (they use the same WordPress email system).

Expected result: Test email arrives. Elementor form emails now work.

Step 4B: Test Form Submission Storage (Verify It Actually Submitted)

For Elementor Native Forms:

  1. Go to WordPress Dashboard
  2. Click "Elementor" > "Submissions" (if you have Elementor Pro)
  3. Do you see your test submission listed?
  4. Elementor's Form Submissions feature is a good way to verify your form works. Test the form by entering some dummy information, then go to Elementor » Submissions to see whether your dummy entry appears in the list.

If yes: Form submitted successfully. The issue is email delivery. Go to Step 4A (WP Mail SMTP setup).

If no: Form didn't actually submit. Go back to Fix #2 (Submit button not working).

Fix #5: CF7 in Elementor Popup Closes Without Confirmation

Problem: You embed Contact Form 7 inside an Elementor Popup. User submits form. Popup closes immediately, and user doesn't know if submission worked.

This is a known Elementor + CF7 compatibility issue.

Solution A: Use Elementor's Native Form Instead of CF7

If using Elementor Pro, use Elementor's built-in form widget instead of embedding CF7. It works better with popups.

Solution B: Disable Popup Auto-Close

  1. Open page in Elementor editor
  2. Click on the popup widget
  3. Left panel > Advanced > Close Button
  4. Disable "Auto Close on Form Submission"
  5. Save and test

Solution C: Add Custom JavaScript

If you need the popup to close after successful submission:

  1. Go to WordPress > Settings > Code Snippets (if you have Code Snippets plugin installed)
  2. Add New Snippet
  3. Paste this code:
document.addEventListener('wpcf7mailsent', function(event) {
  // Close Elementor popup after CF7 success
  elementor.modals.closeAll();
}, false);
  1. Activate and save

Expected result: CF7 form works in Elementor popup, closes on success.

Fix #6: Form Broke After Elementor Update

Problem: Form worked fine. You updated Elementor. Now it's broken.

Step 6A: Clear Elementor Cache

  1. Go to WordPress > Elementor > Settings
  2. Look for "Sync Library" or "Clear Cache" button
  3. Click it
  4. Wait for completion
  5. Go to the form page and refresh

Step 6B: Rebuild the Page

  1. Open the page in Elementor editor
  2. Don't make any changes
  3. Just click "Update" button at the top
  4. This forces Elementor to regenerate the page
  5. Test on front-end

Step 6C: Check for Theme/Plugin Incompatibility

  1. Go to Elementor Dashboard > Settings > Advanced
  2. Look for "Compatibility" options
  3. If you see warnings about incompatible plugins/theme, check them
  4. Update or replace incompatible plugins

Step 6D: Revert Elementor to Previous Version (Last Resort)

  1. Go to Plugins > Installed Plugins > Elementor
  2. Click "View Details"
  3. Look for "Version History" or "Previous Versions" link
  4. Download the previous stable version (one version back)
  5. Via FTP, replace /wp-content/plugins/elementor/ with the older version
  6. Test the form

Note: You can only downgrade for a few versions. Don't go too far back.

Expected result: Form works again after clearing cache, rebuilding page, or reverting update.

Emergency Troubleshooting Checklist

If nothing above works, go through this in order:

  1. ☐ Clear browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)
  2. ☐ Clear WordPress cache plugin (if you have one)
  3. ☐ Clear Elementor cache (Elementor > Settings)
  4. ☐ Disable all plugins except Elementor and form plugin (CF7 or native)
  5. ☐ Switch to default WordPress theme (Twenty Twenty-Four)
  6. ☐ Check browser console for JavaScript errors (F12 > Console tab)
  7. ☐ Test form in Incognito window (bypasses all caching)
  8. ☐ Test form on a new blank Elementor page (rules out page-specific issues)
  9. ☐ Check Elementor and WordPress versions are up-to-date
  10. ☐ Contact your host — ask if they've blocked AJAX requests or disabled PHP mail()

If the form works on a blank page after disabling plugins/switching theme, the issue is a plugin or theme conflict. Reactivate plugins one-by-one to find the culprit.

When to Call a Professional

Call a developer if:

  • You've gone through all fixes and form still doesn't work
  • AJAX test shows errors and your host says "we can't help"
  • You have custom Elementor extensions that broke after an update
  • You need custom JavaScript integration
  • You're on a very old Elementor/WordPress version and can't update

Cost: $50-200 via Fiverr/Upwork freelancer. Professional WordPress developers can usually fix this in 30-60 minutes.

The Real Talk

Elementor forms are generally solid, but they're at the intersection of three systems: WordPress, Elementor, and your hosting environment. When anything breaks, you need to test systematically: Is it the form itself? The page builder? The host? A conflicting plugin?

90% of Elementor form issues are: missing field IDs, cache plugin conflicts, SMTP email not working, or plugin conflicts. Work through them in order. You'll usually find the fix within 30 minutes.

The remaining 10% are hosting-level issues (AJAX blocked, PHP mail disabled, firewall rules). Ask your host. They'll usually fix it in an hour.

If you're frustrated and have the budget, hire someone. This is solvable. Just takes systematic troubleshooting.