Field appear / hide rules

Hi @ilan76

I hope you are doing well

“I want to add an HTML field which will appear when form submit button display an error, how can you apply this?”

I am afraid it isn’t possible, you can use JavaScript o inject some HTML:

<?php

add_action('wp_footer', 'wpmudev_inject_js_submission', 9999);

function wpmudev_inject_js_submission(){
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(function($){
		$(document).on( 'forminator:form:submit:success', function() {
		    let _html = "<div style='color: green'> <p>Submission worked well!</p> </div>";
		    $( _html ).insertBefore( ".forminator-ui" );
		});
		$(document).on( 'forminator:form:submit:failed', function() {
		    let _html = "<div style='color: red'> <p>Something went wrong</p> </div>";
		    $( _html ).insertBefore( ".forminator-ui" );
		});
	});
	</script>
	<?php
}

Adding it as mu-plugin https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Best Regards
Patrick Freitas

• This reply was modified 1 year, 8 months ago by Patrick - WPMU DEV Support.

Great! thanks Patrick @wpmudevsupport12 ,

What if I want to also remove the default error message – to display only my custom html instead?

Hi @ilan76

I would use CSS in this case:

.forminator-response-message{ display:none !important; }

At Form > Appearance > Custom CSS.

Best Regards
Patrick Freitas

Hi, thanks Patrick @wpmudevsupport12.

The first code snippet works but if I re-enter another mistaken field for example, the same html response keeps being added below the previous one, instead of displaying a single html response.

I tried using .empty() but it doesn’t seem to work.

Any suggestion?

Hi @ilan76

Here is a modified version of Patrick’s code:

<?php

add_action('wp_footer', 'wpmudev_inject_js_submission', 9999);

function wpmudev_inject_js_submission(){
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(function($){
		$(document).on( 'forminator:form:submit:success', function() {
		    let _html = "<div style='color: green'> <p>Submission worked well!</p> </div>";
		    $( _html ).insertBefore( ".forminator-ui" );
		});
		$(document).on( 'forminator:form:submit:failed', function() {
			
			let _html = "<div style='color: red' class='forminator_custom_html_error'></div>";
			let _msg = "<p>Something went wrong</p>";
			
			if ($(".forminator_custom_html_error").length) {
				$(".forminator_custom_html_error").html( _msg );
			} else {
				$( _html ).insertBefore( ".forminator-ui" );
				$(".forminator_custom_html_error").html( _msg );
			}
		});
	});
	</script>
	<?php
}

The way it works is nearly the same except the error message is “split” into the HTML “container” code and the message code itself. Upon error code checks if that “container” is already there or not.

If it’s there, it only replaces the “inner HTML” of element – so the message HTML itself. If it’s not there, it first injects that container and then inserts message into it.

Best regards,
Adam

Hi Adam @wpmudev-support8,

Thanks, that works but one small thing, if reentering again succeeds, the prev. error msg still remains with the success message – instead of just displaying the success message only.

Can you please update?

HI @ilan76

This version should address it:

<?php

add_action('wp_footer', 'wpmudev_inject_js_submission', 9999);

function wpmudev_inject_js_submission(){
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(function($){
		
		/* wrapper and messages */
		let _html = "<div class='forminator_custom_html_msg'></div>";
		let _err = "<p>Something went wrong</p>";
		let _ok = "<p>Submission worked well!</p>";
		
		
		
		/* if success */
		$(document).on( 'forminator:form:submit:success', function() {
			
			if ($(".forminator_custom_html_msg").length) {
				$(".forminator_custom_html_msg").html( _ok );
			} else {
				$(_html).insertBefore( ".forminator-ui" );
				$(".forminator_custom_html_msg").html( _ok );
			};	

			$(".forminator_custom_html_msg").addClass('success').removeClass('error');	
			
		});
		
				
		/* if failed */
		
		$(document).on( 'forminator:form:submit:failed', function() {
			
			if ($(".forminator_custom_html_msg").length) {
				$(".forminator_custom_html_msg").html( _err );
			} else {
				$(_html).insertBefore( ".forminator-ui" );
				$(".forminator_custom_html_msg").html( _err );
			};			
			
			$(".forminator_custom_html_msg").addClass('error').removeClass('success');
			
		});		
	
	});
	</script>
	<?php
}

Note: there’s a small difference in CSS classes so now “out of the box” all messages (failed and success) will look the same. To make them look different (e.g. colors) you will need to add custom CSS to your site. Examples:

– for success message

.forminator_custom_html_msg.success {
	color:green;
}

– for failed message

.forminator_custom_html_msg.error {
	color:red;
}

I hope this helps!

Best regards,
Adam

Working great, thank you!