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

    Is it possible to prepopulate a lightbox that can open over the top of a page?

    Asked by beatsahead on February 01, 2016 at 04:47 PM

    I have many forms working successfully with prepopulation.

    I would now like to have a single question where the user inputs the date of their event on my landing page and the submit button opens an iframe or lightbox over the existing page. 

    I have been able to get an iframe to open with the next form using the thank you page but then I am not able to use the prepopulate options in the url.

    Any advice on how to achieve this would be welcome.

    lightbox form prepopulated a prepopulation next then and
  • Profile Image
    JotForm Support

    Answered by Charlie on February 01, 2016 at 11:52 PM

    You can prepopulate the Lightbox embed code by adding parameters on the embed code. Here's a guide about it: http://www.jotform.com/help/83-Adding-parameters-in-Lightbox-and-Feedback-forms 

    You'll need to use a custom script function to get the URL parameters on your website and assign it to a variable inside the script, I see that it is possible as mentioned in this discussion: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter 

    I'm making some tests right now, I'll let you know if I was able to make it work in my end.

  • Profile Image

    Answered by beatsahead on February 02, 2016 at 07:02 AM

    Thanks, I appreciate it

  • Profile Image
    JotForm Support

    Answered by Charlie on February 02, 2016 at 09:10 AM

    I was able to make it work.

    Here's a test form: https://form.jotform.com/60319512035951. You can make a test submission, you will then be redirected to another website page, click the text to open the lightbox, it will then prepopulate the URL parameters on it.

    It will be redirected on a website where a lightbox form is embedded. I'm using only one form for demo purposes. Here's the redirect link:

    https://shots.jotform.com/charlie/prepopulate_lightbox.html?fullNameFirst={fullName:first}&fullNameLast={fullName:last}&dateMonth={date:month}&dateDay={date:day}&dateYear={date:year} 

    Structure of the redirect link:

    Blue highlight: This is the parameter name that I will be declaring and that I will be using to reference using the Javascript function that I will be creating.

    Pink highlight: This is the field name of the form where you want to get the value from.

    If it has multiple text boxes, you need to get each value. Example:

    For "Full Name", there's two text boxes, one for first name and the other for the last name. In the properties window, combine it like this:

    {fullName:first} => This will get the first name

    {fullName:last} => This will get the last name

     

    ? - Use to start the URL parameter

    = - Use to assign a value on a parameter

    & - Use to add another parameter

     

    How mine works? Here are the steps:

    1. First embed your lightbox embed code on your web page.

    2. Insert the function mentioned in this guide: http://www.technicaloverload.com/get-value-url-parameters-using-javascript/ 

    You can check my actual script here: http://pastebin.com/vEnxvEFg 

     

    3. We will use the Javascript function getParameter to get the value in the URL of my web page.

    4. In your lightbox embed code, prepopulate the form using the getParameter function.

    Here's mine:

    var JFL_60319512035951 = new JotformFeedback({

            formId: '60319512035951',

            base: 'https://form.jotform.com/',

            iframeParameters: {

            'fullName[first]' : getParameter("fullNameFirst"),

            'fullName[last]' : getParameter("fullNameLast"),

        'date[month]': getParameter("dateMonth"),

        'date[day]' : getParameter("dateDay"),

        'date[year]' : getParameter("dateYear")

    },

            windowTitle: 'Date Prepopulate on Lightbox',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: 500,

            width: 700,

            openOnLoad: false

          });

     

    Yellow highlight: This is the field name of the form embedded as a lightbox

    Green highlight: Using the getParameter function to get the value on the URL parameter using the name you mentioned in the parameter.

    To add parameters on your lightbox, it is mentioned in this guide: https://www.jotform.com/help/83-Adding-parameters-in-Lightbox-and-Feedback-forms 

     

    Passing a value from another form is somehow similar to this guide: https://www.jotform.com/help/351-How-to-automatically-pass-form-data-to-another-form. That may help.

    Let us know if that works for you.

  • Profile Image

    Answered by beatsahead on February 02, 2016 at 09:18 AM

    Thanks for that, but what I really want to achieve is that the lightbox or pop up (with prepop field) opens over the exisiting page, if that is possible. I have seen it on other sites.

  • Profile Image
    JotForm Support

    Answered by KadeJM on February 02, 2016 at 12:21 PM

    To my current knowledge that should be possible.

    What page are you attempting to open this over top of?

    Do you have a page link you can provide us with so we can assist you further?

  • Profile Image

    Answered by beatsahead on February 02, 2016 at 02:46 PM

    At the moment I am testing it on http://dj-hire-london.co.uk/test4/

     

    I think what I need to be able to do is to configure the submit button from form 1 to open the lightbox containing form 2. I have a shortcode which creates nice lightbox and the jotform inside of that.

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 02, 2016 at 09:27 PM

    The form would need to be submitted to the Thank You page first before opening the light-box to be able to pre-populate it. However, when you add javascript to the submit button to simulate an on-click event to open up a lightbox, the form would not be submitted and thus it would not pre-populate the lightbox form. What you can do instead is to set the lightbox to auto-popup when the main form is at the Thank You page.

    Here's a guide that can help: How to Auto popup a Lightbox Form

  • Profile Image

    Answered by beatsahead on February 03, 2016 at 02:21 AM

    The script with open on load set to true will not save in the thank you page

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 03, 2016 at 04:09 AM

    Hello beatsahead,

    I am not sure if I understood the issue correctly. Do you mean to say that you want to add the lightbox embed code in the thank you page of your form?

    Please be note that it is not possible to add any script code in JotForm. For security reasons any scripting code cannot be added in JotForm. 

    You will have to create your own thank you page in your server and use it as your form's custom thank you URL. You may like to take a look at the following guide which should help you on how to redirect users to your own thank you page:  http://www.jotform.com/help/38-Redirecting-Users-to-a-Different-Page 

    Please explain your question/requirement a bit more in detail and we will surely try to help you.

    Thank you!

  • Profile Image

    Answered by beatsahead on February 03, 2016 at 04:40 AM

    I want the submit from the first form to open a lightbox on the same page. which has a second form which is prepopulated from the first.

    I have read that it can be done with ajax, but not sure what I would need to do.

    The effect i am looking for is on bark.com

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 03, 2016 at 09:08 AM

    Hello beatsahead,

    If I understand your requirement correctly, here is the workflow you want to achieve:

    #1. Add a form in your webpage.

    #2. When the submit button of first form is clicked, you want to open a new form in a lightbox window.

    #3. You also want the lightbox form fields to be pre-populated with the field values of first form.

    Is it correct?

    Please be noted that it is not possible to achieve this within JotForm. You will have to download your form's full source code and add custom JavaScript code. Please be noted that the updated source code cannot be saved back in JotForm. You will have to host your form's source code yourself in your own server.

    If this is acceptable to, do get back to us with the details of your first form and second form (that you want to display in lightbox), we will try to help you. It may take some time as we can work on it only in our free time.

    Thank you!