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 make image popup in the form?

    Asked by mbshomeandschool on July 20, 2017 at 11:37 AM

    I'm trying to add a sizing chart to my form, but i want it to be a link that you can click and the picture pops up. Currently its just an image on the page. Is the clickable pop up an option?

    Page URL:
    https://www.jotform.com/build/71429130684153

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 20, 2017 at 02:51 PM

    There might be a way to do that with modal popup, more about that here: https://www.jotform.com/help/417-How-to-Add-a-Pop-Up-Modal-on-your-Form

    Here is my test form, feel free to check it: https://form.jotformpro.com/72005437259960

    I made a button of your image and created a pop-up of it so it works like this:

    1)To make this work, remove the image from the form and add a Text field to its place:

    2) Edit text field and enter the code area:

    3) Copy the below code there:

    <p><strong>Click to view size chart:</strong></p>

    <p><a class="button" target="_blank" href="#open"><img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="600px" height="250px" /></a></p>

    <div id="open" class="modalBox">

    <div><a class="close" title="Close" target="_blank" href="#close">X</a>

    <h2>Size chart</h2>

    <img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="900px" height="500px" /></div>

    </div>

    4) Go to Custom CSS field and copy the below CSS code:

    /*Main Box Content*/

    .modalBox {

    position: fixed;

    font-family: Arial, Helvetica, sans-serif;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: rgba(0,0,0,0.8);

    color: black;

    z-index: 99999;

    opacity:0;

      -webkit-transition: opacity 400ms ease-in;

    -moz-transition: opacity 400ms ease-in;

    transition: opacity 400ms ease-in;

    pointer-events: none;

    }

    /*When the href are clicked*/

    .modalBox:target {

    opacity:1;

    pointer-events:auto;

    }

    /*Positioning of the child box*/

    .modalBox > div {

    width: 900px!important;

    height: 600px!important;

    position: relative;

    margin: 10% auto;

    padding: 5px 20px 13px 20px;

    border-radius: 0px;

    background: white;

    }

    /*Positioning and style of the close button*/

    .close {

    background: white;

    color: black;

    line-height: 25px;

    position: absolute;

    right: 1px;

    text-align: center;

    top: 1px;

    width: 35px;

    text-decoration: none;

    font-weight: bold;

    -webkit-border-radius: 12px;

    -moz-border-radius: 12px;

    border-radius: 12px;

    -moz-box-shadow: 1px 1px 3px #000;

    -webkit-box-shadow: 1px 1px 3px #000;

    box-shadow: none;

    border: none;

    }

    /*Style when mouse hovers on the close button*/

    .close:hover { 

      background: black;

      color: white;

    }

    /*Default style of the open pop-up button*/

    .button {

        background-color: white;

        border: none;

        color: white;

        padding: 2px 10px;

        text-align: center;

        text-decoration: none;

        display: inline-block;

        font-size: 16px;

        margin: 4px 2px;

        cursor: pointer;

    }

     

    Please let us know how it worked and if this is what you need.

    Thank you!

  • Profile Image

    Answered by mbshomeandschool on July 20, 2017 at 03:44 PM
    Almost there.
    The pic gets larger when you click but how do I make it where you can't see the pic unless you click on the words size chart?
    Sent from my iPhone
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 20, 2017 at 03:54 PM

    You meant something like this:

    To make that happen, replace the above code for Text field with the below one:

    <p><a class="button" target="_blank" href="#open">Click here to view size chart!</a></p>

    <div id="open" class="modalBox">

    <div><a class="close" title="Close" target="_blank" href="#close">X</a>

    <h2>Size chart</h2>

    <img src="https://www.jotform.com/uploads/mbshomeandschool/form_files/Size%20Chart.295.png" width="900px" height="500px" /></div>

    </div>

    And here is my updated test form: https://form.jotformpro.com/72005437259960

     

  • Profile Image

    Answered by mbshomeandschool on July 24, 2017 at 06:35 PM

    Almost there. but it disappears as soon as I click on it, not staying up long enough to read the pop up. 

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 24, 2017 at 10:01 PM

    I've fixed it for you. Kindly check your form https://form.jotform.us/71429130684153

    The problem was the attribute that was included in the code. Sorry about that.