How to show the jotform only when the button is clicked?

  • mbas123
    Asked on April 20, 2015 at 4:20 AM

    Hi,

     

    How can I show the form within my website when the button is clicked. I have a button with an ID of jotform in my html and I called it in my jquery that when it is clicked my form will be displayed within my webiste on the column that I want it to be displayed.

    Thanks.

    Rey Galvez

  • Ben
    Replied on April 20, 2015 at 9:10 AM

    This can be done by a bit of js code.

    Now, first, I would like to mention that there is a lightbox embed code that you could use, if you want the form to pop out and you can see more about this here: How to Create a Lightbox Form

    Since what you have mention makes me believe that you are not looking for that, but to actually show the form, then there are 2 options and I will explain what each would do.

    1st - display none

    We can embed the form, but make it hidden so that we can unhide the form once the button is clicked and we can do that by using

    onDISABLEDclick="document.getElementById('JotFormIframeID').style.display = 'block';"

    and to hide it again we would need:

    onDISABLEDclick="document.getElementById('JotFormIframeID').style.display = 'none';"

    where the bold part should be replaced with the ID of the iframe and the onclick function above should be added to the buttons inline code.

    This method will hide the form completely and show it as well, with all fields following the layout as if the code is not only hidden, but removed as well.

    2nd - visibility hidden

    This option is just like the one above so we would use it like so to show:

    onDISABLEDclick="document.getElementById('JotFormIframeID').style.visibility = 'visible';"

    and to hide it again we would need:

    onDISABLEDclick="document.getElementById('JotFormIframeID').style.visibility = 'hidden';"

    A great thing with this one is that even if the form is not shown, the layout will not be altered, so form will still hold everything as if it was there, but it would only not be shown.

    This also requires you to change the iframe element itself as well so you would need to add into style property something like display:none; for the first option and visibility:hidden; for the second.

    Do let us know if you have any further questions in regards to this.

  • mbas123
    Replied on April 22, 2015 at 9:10 PM

    Thanks.

  • Charlie
    Replied on April 22, 2015 at 11:52 PM

    Hi,

    Just to add, I see you mentioned you're using jQuery, here's the API documentation in the function .show(): http://api.jqueryui.com/show/.

    For your website, you can do the following:

    1. Wrap your embed code in a div element. Example:

    <div id="formWrapper">

    ....JotForm embed code here, better if you can use the iFrame.

    </div>

    2. Add an ID to your button so that we can reference it. Example:

    <button id="wrapperBtn" type="button>Hide Form</button>

    2. Inside your <head> where you added all the jQuery function, you can add this function:

    $("#wrapperBtn").click(function() {

    $("#formWrapper").show();

    });

     

    You could also share us the website link where your form is embedded so that we can check it out, or you could share us the code you are working on. I hope this helps.

    Kind regards.

  • Charlie
    Replied on April 22, 2015 at 11:55 PM

    I forgot to mention that you need to add the style attribute to hide the wrapper by default.

    So this is how it will looked like:

    <div id="formWrapper" style="display:none;">

    ....JotForm embed code here, better if you can use the iFrame.

    </div>