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

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.

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.

Thanks, I appreciate it

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.

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.

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?

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.

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

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

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!

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

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!