How to Remove Elementor Form After Submission & Show Thank You Message in Same Area

By default, Elementor forms display a success message below the form after submission. However, in many cases, you may want to replace the entire form with a thank you message for a cleaner user experience.

In this guide, I’ll show you a simple and reliable JavaScript method to achieve this.

Goal

  • Hide the form after submission
  • Display the success message in the same form area
  • Improve UI/UX with a cleaner interaction

Method: Replace Form After Submission Using JavaScript

This method listens for Elementor’s submit_success event and replaces the form with the success message.

Step 1: Add an HTML Widget

Place an HTML widget on the same page as your form (either above or below the form).

Step 2: Paste the Script

<script>
document.addEventListener('DOMContentLoaded', function () {

    jQuery(document).on('submit_success', function (event, response) {

        let form = jQuery('form.elementor-form');

        // Hide form fields wrapper
        form.find('.elementor-form-fields-wrapper').hide();

        // Move success message into the same place (optional clean handling)
        let message = form.find('.elementor-message-success');

        form.html(message); // replaces entire form with message

    });

});
</script>

How It Works

  • Listens for Elementor’s submit_success event
  • Targets the submitted form
  • Hides all form fields
  • Extracts the success message
  • Replaces the form with the message

Result

After submission:

  • The form disappears
  • The success message appears in the same location
  • No layout shift or extra spacing issues

Pro Tips

  • Customize the success message in Elementor → Form Settings
  • Add animations using CSS for smoother transitions
  • Test across devices to ensure proper rendering

Conclusion

This approach is lightweight, effective, and works across all Elementor forms without modifying backend logic. It significantly improves the user experience by keeping feedback exactly where users expect it.

If you’re building high-conversion landing pages, this small enhancement can make a noticeable difference.

Related Posts