How to use on click feature to open JotForm as modal pop-in window?

Hi there, I was just wondering how I can integrate my JotForm into the following code:

 

 

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

 

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

 

<div class="form-actions registration-actions">

<button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

<%= _('Request Access').translate() %>

</button>

</div>

 

Please note the "window.open('http://www.google.com') section. I believe that's where I need to put a link to the JotForm I'm using (replacing the Google URL). But I'm not sure exactly how to do this. I would like to have the JotForm open as a pop-in modal window (otherwise known as a popup window) in the same window/tab.

 

Any ideas, please? Thank you!

Yes, you can put the form's direct link in the window.open value. Here's an example: window.open('https://www.jotform.com/form/12345678910').

If you need a guide on how to find the form's direct link, here's one: Where-to-Find-My-Form-URL.

We do have a Lightbox embed method available. Here's a screen capture of how it works:

If you prefer this method, please refer to this guide: How-to-Create-a-Lightbox-Form.

Hope this helps. Thank you.

Thank you very much. Yes, I think putting the direct URL link is one way to do it. I think that there's no need to put a "target_blank" in order to make it open in a new tab, because it's a button onclick event and I think that makes it open in a new tab by default, but I could be mistaken in my assumption.

If I understand correctly, if I use the direct link, it will open the form in a new tab as opposed to opening as a pop-in modal window in the same tab (otherwise known as a popup window).

I think the lightbox method allows me to open the form as a popup in the same tab, but I think the lightbox code is a JavaScript script, so I don't think I can put the lightbox code in place of the direct URL link as in your example,

 

window.open(I DON'T THINK A JS SCRIPT CAN GO HERE').

 

Does my concern make sense to you? To summarize, I would ideally like to click on the button image, then have the JotForm open in the way the lightbox behaves. That doesn't necessarily mean I want to use the lightbox method, but I just want the form to behave like the lightbox — meaning I want it to open as a popup when I click the button.

Do you think this can be done given then code I'm working with?

 

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

 

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

 

<div class="form-actions registration-actions">

<button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

<%= _('Request Access').translate() %>

</button>

 

</div>

 

Please and thank you! :)

Hello,

Are you trying to add the button in ASP code? The sample you have share looks like ASP code.

If it a ASP/JSP code, you should be able to add lightbox code without any problem. Here are the sample code:

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

<script src="https://form.jotform.ca/static/feedback2.js" type="text/javascript"> var JFL_71315644674257 = new JotformFeedback({ formId: '71315644674257', base: 'https://form.jotform.ca/', windowTitle: 'Login Request Form', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>

<div class="form-actions registration-actions">

<a class="btn lightbox-71315644674257" style="margin-top: 16px">

<%= _('Request Access').translate() %>

</a>

</div>

 

Do try ti out and get back to us if you have any questions.

Thank you!

Thank you, I'm not sure if it's ASP.net code.

I find your example interesting because it doesn't include the onclick event. For example, here is the code I provided:

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

 

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

 

<div class="form-actions registration-actions">

<button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

<%= _('Request Access').translate() %>

</button>

 

</div>

 

I notice in your example, you added <a> tags and removed the following onclick event,

  <button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

 

I'm just curious how you came up with that example you shared? The reason I ask is because I don't think I should modify the code as you did, this is because it's a source code file from the NetSuite platform, which is used in my company's website. So, if I modify the source code too much, it might break parts of the website. I thought maybe I could include the JotForm in place of the URL in the following line:

<button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

 

But I wonder if I can make use of the Jotform so that it behaves like a lightbox while not making modifications to the code structure.

 

Thank you.

 

Hello,

You can copy the codes from the NetSuite platform and then paste it into any text editor. So that, if the codes above don't work, you can take the changes back immediately. You have to try this solution in order to add the lightbox form into your website.

I suppose my colleague Jonathan wrote those codes by modifying the ASP codes that you have written previously. As far as I see, he has also used the Lightbox codes of your form named "Login Request Form".

You have to modify main codes a little bit in order to open the form as Lightbox. At least, you should trigger the click event of the button in the Asp codes of your company's website.

Thanks.

Thanks, but I don't think the NetSuite source code can be modified like that (as seen in Ashwin's solution). I think this because adding a script in place of the onclick button that opens the example URL (google.com) and removing the button onclick element might break the functionality in NetSuite.

If I use a text editor like Sublime, I don't think pasting the code and seeing if it will work will solve anything, this is because the code is referencing other code from other files.

It seems that in the NetSuite code, a button opens a link when clicked, I could replace the link with a URL link to the JotForm form... but if I want to make use of the JotForm as a lightbox, I don't think I can use a URL link, I would have to use a script and I don't think a script can be inputted anywhere in the code I provided. So, I'm not sure if I can use the JotForm as a lightbox in this situation.

I'm not sure if replacing the NetSuite code I provided with Ashwin's code will work since it has a different structure, and I can't really test if it works for me in a text editor, because the code is referencing other things from other files (for example, different classes and <%).

For reference, pasted below is the code I supplied, followed by Ashwin's solution.

Thanks.

 

 

Hi there, I was just wondering how I can integrate my JotForm into the following code:

 

 

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

 

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

 

<div class="form-actions registration-actions">

<button onDISABLEDclick="window.open('http://www.google.com')" class="btn btn-primary btn-large">

<%= _('Request Access').translate() %>

</button>

</div>

 

Please note the "window.open('http://www.google.com') section. I believe that's where I need to put a link to the JotForm I'm using (replacing the Google URL). But I'm not sure exactly how to do this. I would like to have the JotForm open as a pop-in modal window (otherwise known as a popup window) in the same window/tab.

 

 

If it a ASP/JSP code, you should be able to add lightbox code without any problem. Here are the sample code:

<p class="register-form-legend">

<%= _('Create an account and take advantage of faster checkouts and other great benefits.').translate() %>

</p>

<!-- <form class="register-form" method="POST">

Add this to display the registration fields

<%= registerFormFields() %> -->

<script src="https://form.jotform.ca/static/feedback2.js" type="text/javascript"> var JFL_71315644674257 = new JotformFeedback({ formId: '71315644674257', base: 'https://form.jotform.ca/', windowTitle: 'Login Request Form', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>

<div class="form-actions registration-actions">

<a class="btn lightbox-71315644674257" style="margin-top: 16px">

<%= _('Request Access').translate() %>

</a>

</div>

The "<a class=btn lightbox..." code will serve as the button onlick function. This is the reason why my colleague Ashwin did not include that in the code.

We don't know exactly what programming language you're using. It could be Ruby because of the "<%= %>" tags. The initial code that you provided has HTML tags on it. It means that the code provided by Ashwin should work.

Please test it and let us know the result. This is the only way we'll know if it'll work or not.

Hope that helps. Thank you.