ContactForm7 and sweetallert2 does not work after update

  • Resolved travaudoma

    (@travaudoma)


    3 years, 3 months ago

    hello community
    recently updated ContactForm7 and found that sweetalert2 does not work any more
    script is connected as follows

        add_action( 'wp_footer', 'swal_contact', 999 );
    function swal_contact() {
    	$title_success = get_option('swal_cf7_title_success');
    	$duration_success = get_option('swal_cf7_duration_success');
    	$title_error = get_option('swal_cf7_title_error');
    	$duration_error = get_option('swal_cf7_duration_error');
    	?>
    	<script>
    		jQuery(function($) {
    			$('form.wpcf7-form input, form.wpcf7-form textarea').on("input", function(e) {
    				$(this).removeClass("input-error");
    			})
    			$(".wpcf7-submit").click(function(event) {
    				var form = $(this).closest("form");
    				$(".input-error").removeClass("input-error");
    				$(document).ajaxComplete(function() {
    					var validMessage = function(){
    						Swal.fire({
    							icon: 'success',
    							title: 'Done!',
    							html: 'Thank you for your message.<br>We will contact you shortly.',
    							showCancelButton: false,
    						});
    					};
    					var errorMessage = function(){
    						Swal.fire({
    							icon: 'warning',
    							title: 'Error',
    							html: 'One or more fields have an error.<br>Please check and try again.',
    							showCancelButton: false,
    							showClass: {
    								popup: 'animate__animated animate__fadeInDown'
    							}
    						});
    					};
    					setSwal = $("form.wpcf7-form").hasClass("invalid") ? "alert" : "success";
    					if ( setSwal === "alert" ) { 
    						errorMessage();
    						$(form).find("[aria-invalid='true']").addClass("input-error");
    					};
    					if ( setSwal === "success" ) { validMessage() };
    				});
    			});
    		});
    	</script>
    	<?php
    }

    [ redundant link removed ]
    what am i doing wrong?
    last version where everything worked was 5.3

    • This topic was modified 3 years, 3 months ago by travaudoma.
    • This topic was modified 3 years, 3 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

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

  • hi @travaudoma

    you wait for form.wpcf7-form to switch his class to “success” but the form.wpcf7-form will become “form.wpcf7-form.sent”

    Anyway my advice is to use the dom-events and not watching for class changes
    https://contactform7.com/dom-events/

    Thread Starter travaudoma

    (@travaudoma)

    point is that i need to monitor class changes
    in example on link i just reflected essence of problem and made a simple form
    on a live site contact form is much more complicated and class changes are needed to display prompts

    Thread Starter travaudoma

    (@travaudoma)

    i understand that can’t do without global editing script?

    • This reply was modified 3 years, 3 months ago by travaudoma.

    no it’s possibile but you need to use a different approach.

    try with something like this:

    jQuery(function($) {

  var wpcf7 = $( '.wpcf7' );

  wpcf7.on( "wpcf7mailsent", function() {
      Swal.fire({
        icon: 'success',
        title: 'Done!',
        html: 'Thank you for your message.<br>We will contact you shortly.',
        showCancelButton: false,
      });
  });

})

    OR if you want to check the form class:

    jQuery(function($) {

  var wpcf7 = $( '.wpcf7' );

  wpcf7.on( "wpcf7mailsent wpcf7invalid wpcf7spam wpcf7mailfailed", function() {
     if ($(this).children('.wpcf7-form').hasClass('sent')) {
        Swal.fire({
          icon: 'success',
          title: 'Done!',
          html: 'Thank you for your message.<br>We will contact you shortly.',
          showCancelButton: false,
        });
      }
  });

})
    • This reply was modified 3 years, 3 months ago by Erik. Reason: adding example for event custom logic
    • This reply was modified 3 years, 3 months ago by Erik.
    Thread Starter travaudoma

    (@travaudoma)

    thank you for your answer
    this is it works
    but i’ll probably stay on old version
    new problems were found in new version

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘ContactForm7 and sweetallert2 does not work after update’ is closed to new replies.