Show Gif Image after successful Send

  • sally

    (@sallyruchman)


    5 years ago

    Hello,

    I try to show a Gif Image after Successful Send of a message. I saw that HTML is not allowed in Messages.

    I tried to add this to the Custom css code, but its not working.

    .wpcf7 form div.visible-only-if-sent {
    content: url(“/wp-content/uploads/2020/03/example.gif”);
    }

    Is there a workaround possibility for this?

    Thx
    Best regards
    Sally

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jainil Nagar

    (@jainilnagar)

    Hello @sallyruchman

    You can use Contact form 7’s custom DOM event wpcf7mailsent.

    Add the image to a hidden div element like below:
    <div class="visible-only-if-sent" style="display:none;">After Form Submit</div>

    Then use the wpcf7mailsent like as below:

    
document.addEventListener( 'wpcf7mailsent', function( event ) {
    jQuery('.visible-only-if-sent').show();
}, false );
    Jainil Nagar

    (@jainilnagar)

    Hello @sallyruchman

    You can use Contact form 7’s custom DOM event wpcf7mailsent.

    Add the image to a hidden div element like below:
    <div class="visible-only-if-sent" style="display:none;">After Form Submit</div>

    Then use the wpcf7mailsent like as below:

    
document.addEventListener( 'wpcf7mailsent', function( event ) {
    jQuery('.visible-only-if-sent').show();
}, false );
    Thread Starter sally

    (@sallyruchman)

    Hello Jainil,

    thanks for the Information. Where in the above code I will set then the path to the Gif, like /wp-content/uploads/2020/03/test.gif ?

    Thx
    Best regards
    Sally

    Jainil Nagar

    (@jainilnagar)

    Hello @sallyruchman

    You can add your <img> tag inside <div class="visible-only-if-sent"> element by replacing the After Form Submit.

    ex:
    <img src="/wp-content/uploads/2020/03/test.gif">

    Thread Starter sally

    (@sallyruchman)

    Thank you Jainil, I will test this.

    Best regards
    Sally

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Show Gif Image after successful Send’ is closed to new replies.