ARTICLES

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.

Default Elementor resets the form after submission.
Default Elementor resets the form after submission.

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.
3 events on Elementor form.

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
Select Form element > Additional Options > Form ID

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
Elementor > Custom Code > Add New

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

Setting for Elementor custom code
Setting for Elementor custom code

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
Condition setting of Custom Code

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!
My event handler is ready now!

Result

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

Yeah! Form fields hidden after submission
Yeah! Form fields hidden after submission

  • About Author

    I like to solve problems by coding. I like websites, web applications and everything viewable from browser. Knowledge sharing can grows my confidence. A simple "thank you" will make my day :)
    More about me

Subscribe For Notification

Get notification whenever new article published.

Discussion

COMMENT

Be the first to drop a comment.