Form will not popup, when clicking on the link to the form

Question

I am creating a form that must popup, when a user clicks on a profile link. I have tried using javascript and various ways to do this, but I couldn't get the form to show. The page just jumps. I am trying to do this on the same page. I have now tried to get it to show with jquery. I have put the css and js in custom css and js plugin, so it should work. Here is the code:

<!-- wp:image {"id":665,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://webyardcraft2.local/wp-content/uploads/2022/02/me-3.png" alt="" class="wp-image-665"/><figcaption><a id="mylink" href="/webyardcraft2.local/freelancers" class="show_form" onclick="MyFunction();return false;">Ask John a question</a>
<!-- /wp:image -->


<div id="form_wrapper">
<form id="Johnsform" action="http://webyardcraft2.local/freelancers" method="post" accept-charset="UTF-8&quot;">
<li><label for="Fname">First Name</label><br><input id="first_name" name="first_name" type="text" required=""></li>
<li><label for="Lname">Last Name</label><br><input id="last_name" name="last_name" type="text" required=""></li>
<li><label for="email">Email</label><br>
<input id="mail" name="email" type="email" required=""></li>
<p><label for"jquestion"="">Place your questions for John</label><br>
<input id="j_question" name="j_question" type="text">
</p>
</form>
</div>

#form_wrapper {
  display:none;
}
jQuery(document).ready(function( $ ){
    $("a-show_form").click(function(){
   $('form_wrapper').show():
    });
   

Answer 1

check this ..

replace YOUR.BUTTON.CLASS with Your Link Class

html body .show-important {
    display: block !important; // or flex
    opacity: 1 !important;
    filter: opacity(100%) !important;
}
html body .hide-important {
    display: none !important;
}
html body .hide-important * {
    display: none !important;
}
(function($){
    $(document).ready(function(){
        //when page loaded hide form
        $("#form_wrapper").hide(); // or $('#form_wrapper').removeClass("show-important").addClass("hide-important");
        $("YOUR.BUTTON.CLASS").on("click",function(){
            //if click the Button Show the Form
            $('#form_wrapper').show(); // or $('#form_wrapper').addClass("show-important").removeClass("hide-important");
        });
    });
})(jQuery)

if not worked , remove :

#form_wrapper {
  display:none;
}

and check again. any problem? type in comment plz. i hope useful for you