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

    Custom lightbox popup inside a form

    Asked by puntotecnologico15 on July 01, 2015 at 04:16 AM

    Hello, I would like insert a icon image to give more information, I would like that the message is shown  in a windows lightbox popup.

    Thanks

    Nino

    message icon lightbox jquery
  • Profile Image

    Answered by Sammy on July 01, 2015 at 04:53 AM

    Hello Nino,

    If you want a popup message to show if the image is clicked on your form you'll have to download the entire form's source code and add the popup bit with the image click capability.

     

    Kindly let us know if you need assistance regarding this aspect.

  • Profile Image

    Answered by puntotecnologico15 on July 01, 2015 at 08:45 AM

    I insert a code to show ligthbox popup message, but it's not function. Maybe there is a conflict with jquery library. 
    Please give me a code that i can insert into souce.

    Thanks
    Nino

  • Profile Image

    Answered by Sammy on July 01, 2015 at 09:00 AM

    Could you provide me with a sample of the source ode you inserted so that I can know where to begin and also pinpoint the probable problem.

    You can also provide a link if it is avaiolable

  • Profile Image

    Answered by puntotecnologico15 on July 01, 2015 at 10:08 AM

    This is the link http://www.puntotecnologico.it/rentobuy/light/form12i-light.html

    doesn't work  slider control and calculate field. Click on the "click for info" for a ligthbox popup message.

     

    The version runnable is http://www.puntotecnologico.it/rentobuy/form12i.html

     

    Thanks

     

  • Profile Image
    JotForm Support

    Answered by Boris on July 01, 2015 at 11:08 AM

    Please try using your jQuery code in its NoConflict mode, as there are scripting conflicts between the scripts of the JotForm created form (prototypejs), and scripts of your page (jQuery).

    https://api.jquery.com/jquery.noconflict/

    Please let us know if using your jQuery codes in NoConflict mode helps.

  • Profile Image

    Answered by puntotecnologico15 on July 03, 2015 at 07:56 AM

    Can you help me?... please.

    Thanks
    Nino

  • Profile Image
    JotForm Support

    Answered by Boris on July 03, 2015 at 09:27 AM

    Nino, to keep things simple and so that you can utilize the full power of our JotForm Form Builder and other features, I would advise you to please try the following method instead of coding a custom scripts for a lightbox popup.

    1. First, you would create a regular Text field that contains further information (the information that you've intended to put in your custom popup).

    2. You would create another checkbox field with only one option, where your users can opt to see details (see the "popup").

    3. Thirdly, you could use Conditional Logic to Show/Hide fields based on user input, and show that Text field (1) with additional information and details if your users ticked the option (2).

    You can see a demo of it here:

    http://form.jotformpro.com/form/51833629107961

    If you still prefer to code a custom popup in the Source Code version of your form, you will have to code your popup either in regular JavaScript from scratch, or use the before mentioned NoConflict mode of JQuery for your additional JQuery code.

    For this reason, I would honestly recommend that you use the trick with conditional show/hide of the fields, as presented in the above demo. I hope this helps.

  • Profile Image

    Answered by puntotecnologico15 on July 08, 2015 at 05:44 AM

    Ok thank you this is a better solution.
    Please give me instuction  to put  the control check box near the label "Percentuale della rata mensile che verrà riscattata sul prezzo (%)"

    Please see the form http://www.rentobuy.it/form/form13check.html

    Nino

     

  • Profile Image
    JotForm Support

    Answered by Boris on July 08, 2015 at 09:16 AM

    If I understand what you would like to achieve, you would like to move the checkbox under the label as depicted in the following image:

    If this is where you would like to move your checkbox, you can do so by injecting custom CSS into the very bottom of your custom CSS, under everything else:

    #label_46 { display: none !important; }

    If you would like to slightly reduce vertical distance / blank space above and below the checkbox, you can do so as well by injecting this code:

    #id_46 { padding-top: 0; padding-bottom: 0; }

    If you decide to add multiple such checkboxes to your form, and you wish to style them in the same manner, you can simply copy the above codes and replace the number 46 with the number of your other checkboxes. You can find out the number to use by clicking on the little gear-shaped icon of the field > Show Properties, and look under Name or ID field.

    Please let us know if you need further assistance, Nino, we will be happy to help.