What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by mbas123 on April 20, 2015 at 04: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

    show form js code CSS code show on click onclick
  • Profile Image

    Answered by Ben on April 20, 2015 at 09: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

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

    and to hide it again we would need:

    onclick="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:

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

    and to hide it again we would need:

    onclick="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.

  • Profile Image

    Answered by mbas123 on April 22, 2015 at 09:10 PM

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Charlie 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.

  • Profile Image
    JotForm Support

    Answered by Charlie 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>