Prevent form from reset afte submission

Hello @richardelovia !

Hope you’re having a good day!

I’m not sure if this will be possible, but we will check and share a solution or suggestions – I’ve already asked our Second Line Support team for advice in this matter. We’ll get back to you as soon as we hear back from them.

Warm regards,
Pawel

Hello @richardelovia !

I trust you’re doing well today!

Here’s a snippet you can try out:

<?php

add_action('wp_footer', 'wpmudev_form_reset_prevent', 9999);
function wpmudev_form_reset_prevent(){
	global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
        return;
    }
	?>
	<style>
	.wpmudev-noreset{
		display : block!important;
	}
	</style>
	<script type="text/javascript">
	jQuery(document).ready(function($){
		$(document).on('forminator:form:submit:success', function(formData){
			if( $(formData.target).attr('data-form-id') == '361' ){
				if( !( $(formData.target).find('.forminator-row').hasClass('wpmudev-noreset') ) ){
					$(formData.target).find('.forminator-row').addClass('wpmudev-noreset');
				}
			}
		});
	});
	</script>
	<?php
}

To use it, please set the form’s behaviour to Hide Form in the Behaviour tab. Please also make sure to adjust this line:

if( $(formData.target).attr('data-form-id') == '361' )

To match your form’s ID.

The snippet can be installed as a mu-plugin:
– create the wp-content/mu-plugins directory if it doesn’t exist yet
– copy the code to a .php file with any name
– make adjustment for the Form ID as mentioned above
– upload the snippet to the mu-plugins directory

Kind regards,
Pawel

Hi @wpmudev-support9 ,

I’ve tried the snippet as a mu-plugin and also as code snippet, set the form behavior to hide but nothing happens. Is there any documentation I can read?

I would like to share with you the actual form behavior with a short video, how can I do? (the WP Support forum doesn’t let me attach anything).

Best regards

Hi @richardelovia

Had you updated the code:

if( $(formData.target).attr('data-form-id') == '361' )

To match your form ID?

The form ID can be found while editing it, on the URL.

We have the guide for mu-plugin here: https://wpmudev.com/blog/wordpress-mu-plugins/ for videos you can upload on Google drive and share the link.

Best Regards
Patrick Freitas

My sincere apologies for not writing back. Yes, I did adjust the form ID based on my needings in the javascript code. However it still did not work.

I’ll soon upload the video in google drive so I can better explain the issue.

Thank you very much,
Have a great day.

Hi @richardelovia

Thank you for response!

It’ll be great to see the issue live so video would be very helpful in understanding what’s happening.

But you also mentioned using some code hooked to “after.load.forminator” so if I corretly understand you are already using some other additional custom code with the form, right?

Would you also share that code (as it may be related) for us to take a look? Note: best way to share would be via the pastebin.com service (just add it there and include link to it in your response).

Kind regards,
Adam

Hi, here’s the screen reocrding of me using the form:

https://drive.google.com/file/d/1nu0FjD5zo3_KUGu4dbfuQ8e3WbSL7XtL/view?usp=sharing

When I use the form, everything is working fine. After submitting the page does a little scroll down and the radio buttons selection reset to their original values.
I’d like the form to remain filled with user data after submit.

The custom JS code I’ve added simply adds some css classes on radio button click in order to add animations (i.e. the red toggle that folows the selection on radio buttons).
There’s also a lot of CSS customization but the core code and the functionalities of the form have not been modified at all.

• This reply was modified 2 years, 7 months ago by Richard.

Hi @richardelovia

Thanks for the video and additional information!

I’ve tested this all again on my own site and initially I was able to replicate the issue even with the code (that my colleague shared earlier) but then I realized there’s one super-important setting that needs to be applied.

So let’s recap and double-check everything:

1. I understand that this code is already added to site

2. form ID is set correct in the code, right?

3. form is set to be submitted via AJAX (and not “page reload), correct?

4. if all that is true then please go to form’s “Behavior” settings and make sure that in “Submission behavior” the ONLY “after submission” option that is set is “Hide form”.

It shouldn’t be “inline message” or redirect but only Hide form and nothing else. If it’s not like that – please do set it that way; if it’s already set that way, do edit that after submission behavior and set it again to “hide” then save the form and clear all cache on site/server.

This is critical setting and without it the code won’t work. Note that this is a bit “misleading” setting also because it seems like the form would be hidden after submission but with the custom code (shared earlier) applied it will not happen and the form will stay there, with all the data in the fields.

Best regards,
Adam

My apologies if you haven’t heard from me for a while.

Thank you very much for helping me. In the next few days I’ll try the solution @wpmudev-support8 posted.

I’ll give soon a feedback!

Best regards.

Hello.

I tried to follow every single step of the solution but couldn’t find a way to make it work. Here is a video of the form behavior after submission with the mu-plugin activated.

I’ll also share some screenshots of the correctly installed mu-plugin and his code with the form ID adjustements.

The form behaviors is staying exactly the same, the only different thing is that now the form does hide afte submitting. Also, id keeps scrolling down the page like before.

Video of the form submission:
https://drive.google.com/file/d/1t72t1fMsZnfj3R7Omk_IMPRvrQYnQj6U/view?usp=sharing

Screenshot of the plugin code with form ID:
https://drive.google.com/file/d/1tJZ4EEwpZFZu-7KwzuZo18Li8waS_yi7/view?usp=sharing

Screenshot of the correctly activated mu-plugin:
https://drive.google.com/file/d/18JRkKDdbAqlwLzYxSv-UUu8_mGfvPnLp/view?usp=sharing

Screenshot of the form behavior after submission:
https://drive.google.com/file/d/1WWOvWzepCjTXDiW5jHdZdqRQFnqJq2tJ/view?usp=sharing

I returned at the original state, however I saved the mu-plugin locally so I can add it again or modify it.

Please let me know if there is a way to just stop the form from resetting and scrolling down the page after submission.

Wish you a great day,
Best regards

Hi @richardelovia,

Could you please share an export of the form so we can look closely at this?

Reff: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

You may please share the form export using Google Drive or Pastebin.com.

Kind Regards,
Nebu John

Hello @richardelovia ,

We haven’t heard from you for a while now, so it looks like you don’t need our assistance anymore.

Feel free to re-open this ticket if needed.

Kind regards
Kasia