Wordpress - Contact form 7 does not work with jquery DOM

Question

I have this code that brings documents via DOM to the page

$(document).ready(function(){
    $('.abas').on('click', function(){
        var paginas = ["pagina1.html","pagina2.html","pagina3.html"];
        aba_index = $(this).attr('tabindex');
        $('.abas').removeClass('active');
        $(this).addClass('active');
        $(this).load("caminho/"+paginas[parseInt(aba_index) - 1]);
    });
});

Inside these pages, there’s a form that html is

<form action="/#wpcf7-f6-p1065-o1" method="post" class="wpcf7-form" novalidate>
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="6">
<input type="hidden" name="_wpcf7_version" value="4.9.2">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6-p1065-o1">
<input type="hidden" name="_wpcf7_container_post" value="1065">
</div>
<div class="digite_email">
<span class="wpcf7-form-control-wrap email"><input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Digite seu e-mail"></span>
</div>
<div class="assinar">
<input type="submit" value="saber mais" class="wpcf7-form-control wpcf7-submit">
</div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

For example:

When I open the pagina1.html via DOM, the form does not work, I believe it is because the Plugin Contact form 7 uses jquery to send the forms.

How can I make it work via DOM the wordpress Contact-form-7?

Answer 1

The idea is you involve your script like this:

jQuery(document).ready(function($) { $(document).ready(function(){ $('.abas').on('click', function(){ var paginas = ["pagina1.html","pagina2.html","pagina3.html"]; aba_index = $(this).attr('tabindex'); $('.abas').removeClass('active'); $(this).addClass('active'); $(this).load("caminho/"+paginas[parseInt(aba_index) - 1]); }); }); });

I think doing this will solve your problem.