How can I hide the contact form and shows “sent!” after successful sending

3 Views

I’m using Contact Form 7 plugin in a WordPress template. I created the form and the related CSS, so everything is working fine. I need to do the following, when I click the send button and I have a successful sent email. the form should disappear and shows “Sent!” instead of that. I need to know the code that I need to change. Please see the photo that shows what I like to do

enter image description here

Post Views: 3

Related posts

Leave a Reply

12 comments

  1. “on_sent_ok:” and “on_submit” are removed from Contact Form 7 5.0 so need to use one of the 2 available options.

    1. wpcf7submit
    2. wpcf7mailsent

    To hide the form, need to add the event listener either in your js file or can add as action in footer using the script mentioned:

    add_action( 'wp_footer', 'contact_form_sent' );

function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
         document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
    } //Use this only when targeting specific form.
}, false );
</script>
<?php
}

  3. In order to hide contact form 7 you have to add the following code, in the setting section of the contact form 7 you already generate it

    on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

    ‘contactform’ is the id of the “div” that includes the tags of your contact form.

  4. Add this code in Additional Settings in contact form 7 admin.

    on_sent_ok: "var name = $('.wpcf7 input[name=your-name]').val();

var email = $('.wpcf7 input[name=your-email]').val();

$('.wpcf7').hide();

$('.head_er').hide();

$('.conversations').show();

$('.conversations').html('<p>Thank you.</p>');

$('.conversations').html('<p>We will respond to your email shortly.</p>');"

    or you can see below link

    http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

  5. There are multiple ways to do this, it depend mostly of how you created your form, but this should work with a basic form using the new event mode :

    <script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>

    You can put this code inside the main form (without blank lines or cf7 will add
    and

    tags), or with any js file that would be loaded with the form at least.

    I personnaly use it in the form to also include call to analytics & adword conversion code.

  6. on_sent_ok:  "$('.wpcf7-form.sent p').hide();"

    Since the sent message is placed into the form once the form is submited, we need to hide all paragraphs to avoid hiding the message (which is marked up as a DIV).

  7. If you just want to hide the form and don’t want to use script you can do this:

    .wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}

    Then in my HTML after the Contact Form 7 short code, I put:

    <div id="thankYou">Thank you</div>

    Finally in my settings I use:

    on_sent_ok:  "$('#thankYou').show()"

    I like this approach best because it allows me to actually show a message (unlike other answers that just hide the form). This also seems to reduce some of the “flash” I was seeing as the hide happens instantly thanks to pure CSS.

  8. I’ve found that for some odd reasons not all paragraphs are getting hidden on some of my forms so solutions like

    .wpcf7-form.sent p {
    display:none;
}

    …didn’t completely work.

    I found that the most reliable solution was within the ‘form’ tab of the forms configuration, to add a custom DIV wrapping around all your content. Ie

    <div class="formWrapper">
    <label> Name (required)
        [text* your-name] </label>
    <label> Email (required)
        [email* your-email] </label>
    [submit "Send"]
</div>

    And then in custom css of your theme add

    .wpcf7 form.sent .formWrapper{
    display: none;
}

  9. Everyone has kind of touched on this, but no one has specifically said it, so I’ll just post another answer with how I am doing it currently.

    You can use what some of the other answers have suggested and use on_sent_ok in the “additional settings” section of CF7. But first in the “form” field you need to wrap your entire form contents in a div that we will reference later:

    <div id="form-container">
     <h4>Form title</h4>
     <p>some text, etc</p>
     ...form fields...
</div>

    We’ll use #form-container” to reference in the options.

    on_sent_ok:  "$("#form-container").fadeOut();"

    I like to use fadeOut(); because of the animation, but you can add a class, or do whatever other fancy stuff you want there via jQuery.

    My reason for doing it this way is so that I can target exactly what I want to hide instead of relying on whatever element that is created by CF7 in the DOM.

    I think this answers your question without causing any conflicts with the success message.

  10. I found the various answers provided didn’t do what I required. Which is to hide the form and the submit button, but to still permit display of the form sent message. So here is the solution that worked for me.

    NOTE: It should be noted that the developer has depreciated the on_sent_ok and on_submit javascript functions, and intends to remove support for it by the end of 2017. He recommends using the DOM Events instead. I have no idea how to implement those.

    on_sent_ok:  "$('label').fadeOut();"
on_sent_ok:  "$('input').fadeOut();"
on_sent_ok:  "$('div#required-info').fadeOut();"

    The last trigger is specific to my case, in which I have info stating “* Indicated required field”, and I wrapped that in <div id="required-info"></div>

    So remove that third line, or modify it if you have also introduced other elements to the form (besides the LABELS and SUBMIT button).

    With this solution, the form fields, the submit button, and my additional text all fade when form submission is successful, and the success message displays.

  11. Should anyone be looking for a slightly different approach that works with the current version of CF7, try this pure CSS solution.

        form.wpcf7-form {
      position: relative;
    }
    .wpcf7-response-output {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: white;
   }

    The message is positioned directly over the form, hiding it. You can further refine the CSS to adjust the styling of the message to make it more prominent.

  12. As of 2022, it can work using DOM events as stated on the official website:

    Example code to do any action on any event is as follows:

    var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );

    Please replace alert with any code required at your end.

    More available events are listed in the link above.