Form Fields Disappearing After Page Reload - Fix & Prevention

You spend 10 minutes building a contact form. Name field, email field, message field. You publish or update the page.

You reload to see how it looks. The form is there. But the fields are gone. Only the submit button shows.

Or the fields appear initially, but vanish after you refresh the page again.

This is one of the most frustrating WordPress form issues. But it's also one of the most solvable.

---

Why Form Fields Disappear (The Root Causes)

Form fields disappear because the form builder didn't save them properly, or something is hiding them after they're saved.

The 5 main causes:

1. Cache not cleared after changes — You saved the form but cache shows old version
2. Form builder auto-save failure — Changes didn't actually save to database
3. Plugin conflict hiding fields — A plugin (like dynamic visibility) hides specific field types
4. CSS/display issues — Fields are there but hidden by display: none
5. Form shortcode not pasted correctly — You didn't copy the right shortcode

---

Quick Test: Is It Really Gone or Just Hidden?

Before troubleshooting, confirm the fields are actually gone (not just hidden).

Test 1: Check Page Source

1. Go to the live form page
2. Right-click > "View Page Source" (or press Ctrl+U)
3. Press Ctrl+F and search for "input" or "textarea"
4. Do you see HTML form input tags?

If you see input tags in the source: Fields are there. Something is hiding them with CSS. See "Fix #4: Check for CSS/Display Issues"

If no input tags in the source: Fields didn't save. See "Fix #1: Clear Cache & Reload"

Test 2: Incognito Window

1. Open the form page in Incognito/Private window
2. Are the fields there?

If yes in Incognito: Cache is the problem. Clear cache (Fix #1).

If no in Incognito: Fields didn't save. Continue to Fix #2.

---

Fix #1: Clear All Cache (First Thing, Always)

The most common cause. Cache shows old version without fields.

Step 1: Clear Browser Cache

1. Press Ctrl+Shift+Delete (Cmd+Shift+Delete on Mac)
2. Select "All time" or "Everything"
3. Check "Cookies" and "Cached images/files"
4. Click Clear
5. Go back to your form page and refresh (Ctrl+R)
6. Are the fields there now?

Step 2: Clear WordPress Cache Plugin

If you use a caching plugin (WP Super Cache, W3 Total Cache, WP Rocket, Cloudflare, etc.):

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

Step 3: Clear Elementor Cache (If Using Elementor)

1. Go to WordPress > Elementor > Settings
2. Look for "Clear Cache" or "Sync Library"
3. Click it
4. Reload your form page

Expected result: Form fields now appear after cache clear.

---

Fix #2: The Form Didn't Save - Rebuild It

If fields are gone even after clearing cache, they weren't saved.

For Elementor Native Forms

1. Open the page in Elementor editor
2. Click on the form widget
3. Left panel > Form Fields section
4. Are your fields still there in the editor?

If fields are there in editor but not on live page: It's a save issue or cache issue (go back to Fix #1).

If fields are NOT in the editor: They didn't save. You need to rebuild the form:

1. Click "Add Item" to recreate each field
2. For EACH field, go to "Advanced" tab and assign a unique ID
3. Configure email notifications (Actions tab)
4. Click "Update"
5. Go to live page and refresh

For Contact Form 7

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. Do you see your fields? (e.g., [text* name], [email* email])

If fields are in the code: They should appear. The issue is elsewhere (cache, shortcode not pasted, or plugin conflict).

If fields are missing from code: Rebuild the form by adding fields back via the form builder or by typing shortcodes manually.

For WPForms, Gravity Forms, or VPSUForm

1. Go to Plugins > [Form Plugin] > Your Forms
2. Click on your form to edit
3. Go to the "Fields" or "Form Builder" section
4. Are your fields listed?

If not listed: Rebuild the form by adding fields again.

Tip: Screenshot your form before rebuilding so you remember all the fields. Or check the page in Wayback Machine (archive.org) if you can.

Expected result: Form rebuilt with all fields visible on live page.

---

Fix #3: Shortcode Not Pasted Correctly (CF7 Only)

For Contact Form 7 embedded in page builders.

(cite index="72-1">Please make sure you copy the exact shortcode from the Contact Form 7 admin screen and paste it into the appropriate Elementor widget (usually a Shortcode widget).

Step 1: Get the Correct Shortcode

1. Go to WordPress > Contact > Contact Forms
2. Find your form and click it
3. At the top, you'll see a shortcode like: [contact-form-7 id="12345" title="Contact Form"]
4. Copy this EXACT shortcode

Step 2: Paste in Correct Widget

If using Elementor:

1. Open page in Elementor editor
2. Search for "Shortcode" widget (in the elements panel)
3. Drag it to the page
4. Paste the CF7 shortcode in the "Shortcode" field
5. Click "Update"
6. Go to live page and refresh

If using Gutenberg (Block Editor):

1. Edit the page
2. Add a new block > Search "Shortcode"
3. Paste the CF7 shortcode
4. Publish
5. Refresh live page

If using Classic Editor:

1. Edit the page
2. Paste the CF7 shortcode anywhere in the content
3. Publish
4. Refresh live page

⚠️ Common mistake: Pasting the shortcode inside a paragraph, heading, or image block instead of a dedicated Shortcode/HTML block.

Expected result: CF7 form now displays with all fields.

---

Fix #4: Check for CSS/Display Issues

Fields exist in the HTML but are hidden by CSS.

Step 1: Inspect the Fields

1. Go to the live form page
2. Right-click on the form area > "Inspect" (F12)
3. Look for HTML input elements (search for `
4. Click on one of the input elements
5. Look at the "Styles" panel on the right
6. Do you see "display: none" or "visibility: hidden"?

If yes: A CSS rule is hiding the fields. Go to Step 2.

If no: The issue is different. Try another fix.

Step 2: Find Which CSS Rule Is Hiding Fields

1. In Developer Tools, look for the CSS rule causing "display: none"
2. Note which file/selector it's from (e.g., "style.css", or ".form-field { display: none; }")
3. This tells you if it's from: your theme, a plugin, or a page builder

Step 3: Fix the CSS

If it's from Elementor or page builder:

1. Open the page in the editor
2. Click on each field
3. Right panel > Advanced > Responsive (or Display tab)
4. Look for "Hide" or "Display: None" setting
5. Uncheck/disable it
6. Save and reload live page

If it's from your theme or plugin:

1. Add custom CSS override. Go to WordPress > Customize > Additional CSS
2. Add this code:

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

input[type="text"],
input[type="email"],
textarea {
  display: block !important;
  visibility: visible !important;
}

3. Publish and reload form page

Expected result: Fields now visible.

---

Fix #5: Disable Form-Related Plugins One-by-One

A plugin might be interfering (like dynamic visibility or conditional logic plugins).

Step 1: Identify Plugin Conflicts

1. Go to Plugins > Installed Plugins
2. Write down all plugins that touch forms (e.g., Advanced Custom Fields, JetEngine, Dynamic Visibility, etc.)
3. Deactivate each one and test the form page
4. When fields reappear, you found the culprit

Step 2: Solution Options

Option A: Update the plugin — Check if there's an update that fixes the issue.

Option B: Check plugin settings — Example: JetEngine's "Dynamic Visibility for Widgets & Sections" can hide text fields if misconfigured. (cite index="69-1">JetEngine's Dynamic Visibility feature can cause text fields to entirely disappear from the front-end while appearing normally in the back-end editor. Turn it off.

Option C: Switch plugins — If the plugin is abandoned, find an alternative.

Expected result: Plugin conflict identified and resolved.

---

Fix #6: Rebuild Your Page (Nuclear Option)

If nothing else works, rebuild the page from scratch.

Step 1: Export Your Form Configuration

For Elementor forms: Elementor > Library > Export form

For Contact Form 7: Contact > Contact Forms > [Your Form] > Copy the shortcode and form code

For WPForms/Gravity Forms/VPSUForm: Export form (usually under form settings > Export/Backup)

Step 2: Create a New Page

1. Go to WordPress > Pages > Add New
2. Create a blank page
3. Add your form from scratch
4. Publish it
5. Test it on the live page

Step 3: Compare & Migrate

If the new page works, you can:

• Use the new page instead of the old one (update links)
• OR copy the working form to your original page

Expected result: New page with form working correctly.

---

Prevention: Never Let This Happen Again

1. Always Save Changes Multiple Times

Before leaving a form editor:

• Click "Save" or "Update" 2-3 times
• Wait for success message after each save
• Don't navigate away until you're sure it's saved

2. Clear Cache After Any Form Changes

Immediately after saving form changes:

• Clear browser cache
• Clear WordPress cache plugin (if you have one)
• Clear Elementor cache (if using Elementor)
• THEN reload the live page

3. Take Screenshots Before Publishing

Before you hit "Publish" or "Update":

• Take a screenshot of all form fields in the editor
• If they disappear after publishing, you have proof of what was there

4. Disable Auto-Save (Advanced)

Some page builders' auto-save can cause issues. Disable it if you're having problems:

For Elementor: Elementor > Settings > Advanced > disable "Auto-save Interval"

5. Keep Plugins Updated

Form-related bugs are fixed in updates:

• Update form plugin monthly
• Update page builder monthly
• Update any ACF or dynamic visibility plugins

6. Test on Staging Before Going Live

If this is a critical form:

• Build and test on a staging/development site first
• Make sure it works for 24-48 hours
• THEN copy to live site

---

Troubleshooting Checklist

1. ☐ Clear browser cache (Ctrl+Shift+Delete)
2. ☐ Clear WordPress cache plugin
3. ☐ Clear Elementor cache
4. ☐ Reload page in Incognito window (to bypass all caching)
5. ☐ Check page source for HTML input tags (Ctrl+U, search "input")
6. ☐ Inspect element to see if CSS is hiding fields (F12 > Styles tab)
7. ☐ Open form in editor — are fields still there?
8. ☐ Check form shortcode is correct (for CF7)
9. ☐ Disable all plugins except form plugin and test
10. ☐ Switch to default theme and test
11. ☐ Rebuild form from scratch on new page

---

When to Contact Support

Contact your form plugin's support if:

• You've gone through all fixes and fields still disappear
• Fields disappear consistently after 24+ hours
• It happens on all pages, not just one form
• You see error messages in the WordPress error log

Contact your page builder support if:

• Issue only happens in Elementor (not other page builders)
• It started after updating Elementor
• Fields are there in editor but gone on live site

Contact your hosting provider if:

• All fixes fail and fields consistently disappear
• Your site just upgraded PHP version
• Error log shows database errors

---

The Real Talk

Form fields disappearing is almost always: cache not cleared, fields didn't save, or plugin conflict. 90% of the time, clearing cache solves it. 9% of the time, you need to rebuild the form or rebuild the page.

The other 1% is weird plugin conflicts or hosting issues. But you'll get there with the checklist.

Going forward: always clear cache after changes, always save multiple times, and take screenshots before publishing. That prevents 99% of disappearing field issues.