Title: Field appear / hide rules
Last modified: March 15, 2023

---

# Field appear / hide rules

 *  Resolved [ilan76](https://wordpress.org/support/users/ilan76/)
 * (@ilan76)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/)
 * Hi,
 * I want to add an HTML field which will appear when form submit button display
   an error, how can you apply this?
 * Alternatively, can I add a custom html to submit button error message?
 * Thanks

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Support [Patrick – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/)
 * (@wpmudevsupport12)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16566409)
 * Hi [@ilan76](https://wordpress.org/support/users/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](https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins)
 * Best Regards
    Patrick Freitas
    -  This reply was modified 3 years, 3 months ago by [Patrick - WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/).
 *  Thread Starter [ilan76](https://wordpress.org/support/users/ilan76/)
 * (@ilan76)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16568403)
 * Great! thanks Patrick [@wpmudevsupport12](https://wordpress.org/support/users/wpmudevsupport12/),
 * What if I want to also remove the default error message – to display only my 
   custom html instead?
 *  Plugin Support [Patrick – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport12/)
 * (@wpmudevsupport12)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16572793)
 * Hi [@ilan76](https://wordpress.org/support/users/ilan76/)
 * I would use CSS in this case:
 * `.forminator-response-message{ display:none !important; }`
 * At Form > Appearance > Custom CSS.
 * Best Regards
    Patrick Freitas
 *  Thread Starter [ilan76](https://wordpress.org/support/users/ilan76/)
 * (@ilan76)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16573574)
 * Hi, thanks Patrick [@wpmudevsupport12](https://wordpress.org/support/users/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?
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16576963)
 * Hi [@ilan76](https://wordpress.org/support/users/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
 *  Thread Starter [ilan76](https://wordpress.org/support/users/ilan76/)
 * (@ilan76)
 * [3 years, 3 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16577745)
 * Hi Adam [@wpmudev-support8](https://wordpress.org/support/users/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?
 *  Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/)
 * (@wpmudev-support8)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16581039)
 * HI [@ilan76](https://wordpress.org/support/users/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
 *  Thread Starter [ilan76](https://wordpress.org/support/users/ilan76/)
 * (@ilan76)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16584239)
 * Working great, thank you!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Field appear / hide rules’ is closed to new replies.

 * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182)
 * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/forminator/)
 * [Active Topics](https://wordpress.org/support/plugin/forminator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [ilan76](https://wordpress.org/support/users/ilan76/)
 * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/field-appear-hide-rules/#post-16584239)
 * Status: resolved