Custom Form States

This snippet allows you to create custom states for Elementor forms. Instead of using Elementor’s default success or error messages, you can display your own elements when a form is submitted.

For example, you might want to show a custom thank-you message, confirmation layout, or next steps section after someone submits a contact form. If the submission fails, you can show a custom error message or instructions instead of Elementor’s default alert.

You can also choose to hide the form after a successful submission, which is useful when you want the form to be replaced by a confirmation message, a download link, or a follow-up action such as checking their email.

Setup

Add External Scripts

Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.

Add HTML

Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.

Add Custom CSS

Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.

.elementor-message-success,
.elementor-message-danger {
  display: none !important;
}

body:not(.elementor-editor-active) [ou-form-element="success"],
body:not(.elementor-editor-active) [ou-form-element="error"] {
  display: none;
}

Add Custom Javascript

Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.

document.addEventListener("DOMContentLoaded", () => {

  if (document.body.classList.contains("elementor-editor-active")) return;

  const form = '[ou-form-element="form"]';
  const success = '[ou-form-element="success"]';
  const error = '[ou-form-element="error"]';
  const instance = 'ou-form-instance';
  const submithide = 'ou-form-submit-hide';

  const initformobserver = (wrapper) => {

    if (wrapper._ouobserved) return;
    wrapper._ouobserved = true;

    const hideformonsuccess = wrapper.getAttribute(submithide) === "true";
    const forminstance = wrapper.getAttribute(instance);

    const successmsg = forminstance
      ? document.querySelector(`${success}[${instance}="${forminstance}"]`)
      : document.querySelector(success);

    const errormsg = forminstance
      ? document.querySelector(`${error}[${instance}="${forminstance}"]`)
      : document.querySelector(error);

    const observer = new MutationObserver(() => {

      const successstate = wrapper.querySelector('.elementor-message-success');
      const errorstate = wrapper.querySelector('.elementor-message-danger');

      if (successmsg) successmsg.style.display = successstate ? "block" : "none";
      if (errormsg) errormsg.style.display = errorstate ? "block" : "none";

      if (hideformonsuccess) {
        wrapper.style.display = successstate ? "none" : "";
      }

    });

    observer.observe(wrapper, {
      childList: true,
      subtree: true
    });

  };

  document.querySelectorAll(form).forEach(initformobserver);

});

Add Custom PHP

Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.

‍

Add Attribute

Add the ou-form-element="form" attribute to the Elementor form element to define the form instance the script should monitor.

Name

ou-form-element

Value

form

Publish and preview live

Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.

Implementation

Use the following attributes to manage custom form states for Elementor forms.

Success State

Use the ou-form-element="success" attribute on any element that should appear after the form is submitted successfully.

When the form submission succeeds, this element becomes visible and replaces the default Elementor success message.

For example, you may want to display a custom thank-you message, confirmation layout, download button, or instructions for the next step.

Name

ou-form-element

Value

success

Error State

Use the ou-form-element="error" attribute on any element that should appear when the form submission fails.

This allows you to display a custom error message instead of Elementor’s default alert. The element will only appear when the form encounters an error during submission.

Name

ou-form-element

Value

error

Hide Form After Submission

Use the ou-form-submit-hide="true" attribute on the form element if you want it to disappear after a successful submission.

When this attribute is added, the form will be hidden once the submission succeeds and the success state will appear instead.

This is useful when you want the confirmation message to completely replace the form.

Name

ou-form-submit-hide

Value

true

Using Instances

Use instance attributes when you have multiple forms on the same page and each one should control its own success and error states. Without instances, the script may not know which success or error state belongs to which form.

The value of ou-form-instance can be anything you like, such as contact, newsletter, support, or even numbers like 1 or 2. The only rule is that the form and its success or error elements must use the same value.

You can set up instances in two different ways depending on how your layout is structured.

Method 1: Add the instance directly to the elements

Use this method when the form and its success or error elements are not inside the same wrapper.

Add ou-form-instance="contact" to the form element that already has ou-form-element="form".
Add the same ou-form-instance="contact" to the element that has ou-form-element="success" or ou-form-element="error".
Repeat the process with a unique value if you add another form to the page.

Method 2: Add the instance to a wrapper

Use this method when the form and its success or error elements are inside the same parent wrapper.

Select a parent wrapper that contains both the form and its success or error elements.
Add ou-form-instance="VALUE" to it, with a unique value.
Repeat for every instance.