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">

#form_wrapper {
jQuery(document).ready(function( $ ){

1 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;
        //when page loaded hide form
        $("#form_wrapper").hide(); // or $('#form_wrapper').removeClass("show-important").addClass("hide-important");
            //if click the Button Show the Form
            $('#form_wrapper').show(); // or $('#form_wrapper').addClass("show-important").removeClass("hide-important");

if not worked , remove :

#form_wrapper {

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

  • I tried all of the following, Still will not show. (function($){ $(document).ready(function)(){ $("show_form").on("click", function(){ $('form_wrapper').addClass("show-important"); }); }); }) (jQuery) Tried putting $("mylink") and tried $("Johnsform") as well, in where it says $("YOUR.BUTTON.CLASS") Excuse the clutter, if I press enter, then, the text shows on comment, before I have finished typing the rest of everything. Feb 19, 2022 at 7:32
  • I checked your code, there is no error. If it does not display it may be due to plugins or theme. Feb 19, 2022 at 12:17
  • Yes, its showing, but I want it not to show, and then only show, when user clicks on the link. Feb 19, 2022 at 14:50
  • Check The Answer. i edit it to fix your problem Feb 20, 2022 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.