Sometimes I would like to hide the Elementor form after submission. However, the the default Elementor behavior is resetting the whole form with a successful message below the form. Let’s modify this by some simple jQuery codes.
![Default Elementor resets the form after submission.](https://itchycode.com/wp-content/uploads/2022/05/default-elementor-form-reset-after-submit.gif)
Elementor Form jQuery Events
First of all, we must need to know what event available on the Elementor form. From the developer tools, we could see there are form_destruct
, submit
, and submit_success
.
![3 events on Elementor form.](https://itchycode.com/wp-content/uploads/2022/05/elementor-form-jquery-events.png)
Obviously we will listen to submit_success
event and hide the form. Bare in mind that it’s a jQuery event, so we will need to use jQuery .on()
method to attach our custom event handler. (jQuery .on() documentation)
Assign Form Id
Before the coding part, I did assigned a form Id if you noticed my previous screenshot. You could do this as well, just simply put in a unique Id in Additional Options of the Form element.
![Select Form element > Additional Options > Form ID](https://itchycode.com/wp-content/uploads/2022/05/assign-form-id-to-elementor-form.png)
Start Coding
I will use Elementor Custom Code to insert my jQuery codes this time. Heads to Elementor > Custom Code, and Add a new Custom Code.
![Elementor > Custom Code > Add New](https://itchycode.com/wp-content/uploads/2022/05/elementor-new-custom-code.png)
Location I set as </body> End and Priority I leave it as 1
![Setting for Elementor custom code](https://itchycode.com/wp-content/uploads/2022/05/custom-code-setting.png)
And the jQuery will be as simple as below. Basically just hide some elements when an event triggered.
<script>
(($)=>{
$(document).ready(()=>{
// on submit_success event triggered on my specific form #itchy002
$(document).on('submit_success', '#itchy002',(e)=>{
// hide all fields in this form
$('#itchy002').find('.elementor-form-fields-wrapper').hide()
})
})
})(jQuery)
</script>
Please remember change the form Id to yours.
I set this custom code to only display on specific page which my form located at. You could adjust as you need by editing the conditions.
![Condition setting of Custom Code](https://itchycode.com/wp-content/uploads/2022/05/elementor-custom-code-condition.png)
Alright, after published, you can inspect the form again and check if the custom event handler attached successfully. Mine is attaching fine!
![My event handler is ready now!](https://itchycode.com/wp-content/uploads/2022/05/event-handler-success-attaching.png)
Result
Try to submit and taa-daa~~ This is what I want!
![Yeah! Form fields hidden after submission](https://itchycode.com/wp-content/uploads/2022/05/elementor-form-hidden-after-submit.gif)
can we hide specific elementor form field submission data from backend for specific users (like author,editor) except admin