Support » Plugin: Contact Form 7 » Hide Contact Form 7 and show message after successful send using DOM Events

  • Hi,

    How do I hide a Contact Form 7 after successful send using DOM Events? I can find solutions using other methods that are deprecated SUCH AS “on_sent_ok:”
    but not using DOM Events.

    What I want is that after the form is submitted and data is sent successfully, the form is hid BUT the visitor still gets the confirmation message.

    Any help would be appreciated.

    Thx – Nigel

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter nigelfish

    (@nigelfish)

    No I already read those articles and they do not help. I have tried what is suggested and the form is not cleared.

    I am not a techie and would love it if someone could send me some <script> that works.

    Thanks!

    Thread Starter nigelfish

    (@nigelfish)

    Juts to clarify, not being a technie I am not sure what <script> to write to hide the form after submition, and to get/allow the confirm message to be displayed on its own.

    I found the below on a search and tried it (remembering to wrap the form shortcode in a div with id=”hideform”) but it does not work. I wish I knew enough php and DOM to make it work.

    <?php
    add_action( ‘wp_footer’, ‘contact_form_sent’ );

    function contact_form_sent() {
    ?>
    <script type=”text/javascript”>
    document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    document.getElementById(‘hideform’).style.display = ‘none’;
    }
    }, false );
    </script>
    <?php
    }

    all the form with the ID #hideform (so only one for page) on submit will disappear

    this what it means

    Thread Starter nigelfish

    (@nigelfish)

    Hi Erik,

    Are you saying that this code should work to make the form disappear and shown only the success submit message?

    For me, this code does not work as it does not make the form disappear.

    no, it will hide everything else inside the #hideform.

    to use correctly this code, you must create inside the mail template a <div id="hideform"> that wraps the element you want to hide after submit.

    I haven’t tried the code, i’m assuming that is working

    I believe Erik means that <div id=”hideform”> must be in the form template, not the mail template.

    But I found another way that seems to work better:
    Add this to your css file:

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

    @mjohnhorning, great solution. Works nicely. Thank you for sharing it.

    @mjohnhorning
    Hello,
    Where did you add that css file?
    I tried to add it to my theme CSS and it didn’t work.
    Thank you.

    @mjohnhorning simply, elegant, really good and more importnat it work.

    Thank you very much.

    @partopia1 if it didn’t work try: Appearance » Theme editor » Style sheet css and… add code.

    you can also use the following methods: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    • This reply was modified 1 year, 11 months ago by -EO.
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Hide Contact Form 7 and show message after successful send using DOM Events’ is closed to new replies.