如何在联系表格 7 中提交表格后显示 div

Question

I need to show a div with some contents only after submission of form. For form I am using contact form 7. After submitting the form I am redirecting to this link "https://example.com/referr-mobile-app/#wpcf7-f651-o1" and here I want to display that div. Please anyone help?

Answer 1

UPDATE 1 :

You can manage this using javascript and css.

Try out this code in your theme's js file.

jQuery('.wpcf7-form').prepend('<div class="form_sent_msg">Thank you for your message.</div>');

also add this css for show/hide the div on form sent.

.form_sent_msg{
    display:none;
}

.wpcf7-form.sent .form_sent_msg{
    display:block;
} 

UPDATE 2 : try out this code for your custom post type field to insert above the form.

add_action('wpcf7_mail_sent', function ($cf7) {
    add_action('wp_footer', function(){
        global $post;
        $custom_field = get_field('custom-field', $post->ID);
        ?>
        <script>
            (function ($) {
              $(document).ready(function () {
                $('.wpcf7-form').prepend('<div class="form_sent_msg">'+ '<?php echo $custom_field;?>' +'</div>');
              });
            })(jQuery);

        </script>
    <?php   
    });
});