Hide response messages after X seconds

  • zmihailo

    (@zmihailo)


    4 years, 9 months ago

    I just installed this plugin and I must say it does everything I need.

    I am using a custom made popup div with a CF7 inside it.

    I need to hide response messages (error, success message) after X seconds. Is that possible?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Erik

    (@codekraft)

    4 years, 9 months ago

    @zmihailo, yes it’s possible!

    just create a simple css animation for this:

    .wpcf7-form.sent .wpcf7-response-output {
  animation: hideresp 5s forwards; 
  animation-iteration-count: 1;
}

@keyframes hideresp {
  90% { opacity:1; }
  100% { opacity:0; }
}

    note: the animation starts when the “.sent” class is added to “wpcf7-form”. I prefer to use opacity because display none will force a content redraw

    • This reply was modified 4 years, 9 months ago by Erik. Reason: I had used the wrong class name
    rodrigomc2000

    (@rodrigomc2000)

    4 years, 7 months ago

    @codekraft this workaround is nice, it also hides the error messages when user try to submit the form.

    But the problem is that after it hide the div the first time it never shows up anymore… anyway to avoid this? Example: hide after X seconds but if user try to submit again, show the div and count X seconds to hide again ?

    Thanks

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

The topic ‘Hide response messages after X seconds’ is closed to new replies.