Details
Overview
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.
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.
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.
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.
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 hasou-form-element="form". - Add the same
ou-form-instance="contact"to the element that hasou-form-element="success"orou-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.