Hide Elementor Form After Successful Submission via jQuery

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.

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.

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.

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.

Location I set as </body> End and Priority I leave it as 1

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.

Alright, after published, you can inspect the form again and check if the custom event handler attached successfully. Mine is attaching fine!

Result

Try to submit and taa-daa~~ This is what I want!