How to open a popup form?

rmccoy

Asked on April 17, 2016 at 2:26 PM

trying to create a form that can be called forward based on a click of a button on my main form. the popup form should overlay main form but smaller of course and have a printable feature (button) on the popup form then can be closed manually or after print and then main form takes back active view. how can i accomplish this? thx.
Ashwin JotForm Support

Replied on April 17, 2016 at 2:44 PM

Hello rmccoy,

I am not sure if I have understood your question correctly. Do you mean to say that you want to open a second form in a popup within the first form?

Please be noted that it is not possible to add a lightbox form inside another form as it would require JavaScript code which is not permitted. You can actually add a hyperlink in text field of your form to open a new pop up window. Please check the screenshot below:

Hope this helps.

Do get back to us if you meant to ask something else.

Thank you!
rmccoy

Replied on April 17, 2016 at 4:43 PM

Yes a pop-up screen of any kind would too but was wondering if there's a way to set that on a button rather than a link? Basically what I'm trying to accomplish is for customer to be able to press a button to you coupon then print the coupon out
Sent from iPhone 6+
...
jonathan

Replied on April 17, 2016 at 5:34 PM

You can embed your Registration form on a website using its Ligthbox embed code and replace the pop-up link using a button input type instead.

Here is a test page what I meant. Click on the Register Now button

Is this what you have in mind? Let us know how we can be of further assistance.
rmccoy

Replied on April 17, 2016 at 5:43 PM

OK great and I could put a print button on the pop up form that I use to print what's on the pop up form? I want my pop up form to be the coupon that gets printed out. I have on my main form the unique ID number how could I transition what that number is on to the pop up or does the pop up have to have its own unique number Id put on its own form?
...
jonathan

Replied on April 17, 2016 at 6:17 PM

Can you please clarify first if this is the main form or the pop up form http://www.jotform.us/form/60938424012147 ?

The thing is, you cannot embed a lighbox form within another form... the lighbox embed will only work on actual website page -- not within a form. Our colleague Ashwin_d had already explained this previously and suggested a pop-up script instead as an alternative.
rmccoy

Replied on April 17, 2016 at 6:43 PM

Yes that is the main form. I can try the script no problem just wanted to understand how to put a print button on the pop up
Sent from iPhone 6+
...
jonathan

Replied on April 17, 2016 at 7:02 PM

You can enable the Print button on the form also...

is this what you meant? Let us know if its not.

Best
rmccoy

Replied on April 17, 2016 at 9:18 PM

OK I'm still a little confused. i see that this can work, but not sure where i'm putting what code. my main form is https://form.jotform.com/60938424012147. i have a hidden button image on it that i'd like to put code that calls another form "my popup form" like you did when you called my main form to front. what am i doing wrong? i can't figure out what code goes where. can i even use an image of a button, or is it better to create button in code like you did? please help. thx. btw my coupon form is called "claiming coupon form"

THIS CODE WORKS on testing outside of this program, but not in jotform. Meanwhile i have loaded the code to my button on main form and hid button from visibility.

____

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8" />

<title>CLICK HERE FOR COUPON</title>

</head>

<body>

<strong>SPECIAL OFFER - FREE Team Training and Spousal Consultation</strong>

<br>



<script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

var JFL_61075711672151 = new JotformFeedback({

formId: '61075711672151',

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

windowTitle: 'COUPON FORM',

background: '#FFA500',

fontColor: '#FFFFFF',

type: 'false',

height: 500,

width: 700,

openOnLoad: false

});

</script>

<input class="lightbox-61075711672151" type="button" value="CLICK HERE FOR COUPON" style=" color:rgb(12, 40, 159);

font:2.4em Arial, Helvetica, sans-serif;

font-size:12px; font-weight : bold;

padding:5px;

background:url(overlay.png) repeat-x center #ffcc00;

background-color:rgba(255,204,0,1);

border:1px solid #ffcc00;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

border-bottom:1px solid #9f9f9f;

-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

cursor:pointer;" />

</body>

</html>
Ashwin JotForm Support

Replied on April 17, 2016 at 10:39 PM

Hello rmccoy,

I did check your form #60938424012147 and found that you have added your lightbox code in text field of your form.

This is what me and my colleague explained you in earlier responses. Please be noted that it is not possible to add lightbox embed code inside JotForm. Since the lightbox embed code requires JavaScritp code to be added which is not allowed in JotForm. If you go back to your form, you will see that javascript of your lightbox code is already deleted.

You can use a popup window to achieve your requirement. I will go agead and create a demo form for you.I will get back to you on this.

Thank you!
rmccoy

Replied on April 17, 2016 at 11:44 PM

Got it and thanks. I look forward to the demo
Sent from iPhone 6+
...
Ashwin JotForm Support

Replied on April 19, 2016 at 1:31 AM

Hello rmccoy,

I am currently working on this and will get back to you with demo soon.

Thank you!
rmccoy

Replied on April 22, 2016 at 7:07 AM

no luck?