How can I add a pop-up or lightbox before fill out the form?

  • Profile Image
    Asked on April 06, 2016 at 05:06 AM



    How can I add a pop-up or lightbox before fill out the form. The idea is that we want to show our conditions before become a customer.  In the pop up we would like to show the button with become a customer. After clicking on this button , they can fill in the form with their contact details. The pop-up or the lightbox is not a form.

    Is this possible to make? Can you explain it please?


    Best regards,


  • Profile Image
    Answered on April 06, 2016 at 07:50 AM

    Hi Joyce,

    Yes, it is possible. To do that, you need two forms, first one pops up on the screen and the conditions will be on it. When the user click to the button at the end of the window, they will be redirected to the contact form.


    1) On first form, add your conditions, then set the "Thank You" page's custom URL as second (contact form) form's link. Please, see the tutorial from the below:


    2) After finishing the customizations on first form, get the Lightbox embed code from the "Publish".

    Please, see it from the following guide:

    Then, you need to make it auto-popup on page loads. From the tutorial below, you can get the method:


    Final look of the Lightbox embed code will look like the following:

     <script src="" type="text/javascript"> var JFL_60963091215958 = new JotformFeedback({ formId: '60963091215958', base: '', windowTitle: 'Title Me', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: true }); </script> <a class="btn lightbox-60963091215958" style="margin-top: 16px"> Title Me </a>


    In addition, you can check the example form I created to see it on action:


    For further assistance, please do let us know.


  • Profile Image
    Answered on May 24, 2016 at 03:44 AM
    Hi Jotform,
    I have a new problem. I can't remove the space above my header text. I
    already add the css code
    .form-all {
    margin-top : -85px;
    margin-bottom : -40px;
    padding-top : 0px !important;
    But there is still a space in my form.
    Can you help me with this problem?
    2016-04-06 13:48 GMT+02:00 JotForm :

  • Profile Image
    Answered on May 24, 2016 at 04:54 AM

    I have moved your concern on a separate thread so we can better assist you. You can check the thread here: We will attend to your concern on that thread accordingly. Regards.