- ANDROSSAsked on April 13, 2017 at 10:16 AM
- JotForm SupportMike_GAnswered on April 13, 2017 at 10:33 AM
If you want to open the form in a new window as a pop up then you can use the Pop-Up Embed option from Publish of the form's build page.
However, if you want to open the form as a Pop Up in the same window then you can use the Lightbox embed option.
I hope this helps. If you have any questions regarding this, please feel free to contact us again anytime.
- ANDROSSAnswered on April 17, 2017 at 09:18 AM
Thank you. What I would like is the latter, meaning when you click on a text link or image link, it opens the form in a popup in the same window. This would mean I use the Lightbox option, I believe.
So, if I want to click on a text link or image link and have the form pop up within the same window, is there a way to execute that?
Thank you kindly.
- JotForm SupportKevin_GAnswered on April 17, 2017 at 10:19 AM
The lightbox embed option will help you to achieve what you want, a link is displayed as text, it can be further customized as button or it can be changed by an image too.
Once this link is clicked the form will be opened, example:
Please, give it a try, the guide provided by my colleague above will help you to get the needed code.
Do let us know how it goes.
- ANDROSSAnswered on April 17, 2017 at 11:54 AM
Thanks, I realize now that I just had to copy and paste the code into my code editor as follows:
I was assuming I needed to make an ahref link using HTML. One thing I notice though, as a suggestion for you is as follows. When you hover your mouse over the text, the mouse takes the profile of a text edit icon, since you're hovering over text. It doesn't take the profile of the hand with the pointer finger as it would if it were hovering over a typical clickable hyperlink.
I'm not sure how hard it would be to implement this, but it's a suggestion for you. Instead of the mouse turning to a text edit icon, it should turn into the hand with the pointing finger.
What I think would be best for me, however, is to further customize the link to a button or image as you said in your reply to me. "it can be further customized as button or it can be changed by an image too."
I've looked at the Lightbox embed code, but am currently unsure about how to customize it to be a button rather than text.
Do you have a suggestion for me, please? Thank you very much!
- JotForm SupportWelvinAnswered on April 17, 2017 at 12:52 PM
To change the hover cursor, you need to add the following Custom CSS codes to the stylesheet of your website:
cursor: pointer !important;
To use an image to trigger the lightbox, you need to replace the following line:
<a class="btn lightbox-1234567890" style="margin-top: 16px"> Contact Form </a>
...with the following:
<img src="IMAGE URL HERE" class="btn lightbox-1234567890">
You need to replace "1234567890" with the actual form ID. The class is very important for the lightbox to work when the image is clicked. The form ID is the string of numbers at the end of the form URL. The IMAGE URL HERE should also be replaced with the actual image URL.
I hope that helps. Let us know if you need further assistance.
- ANDROSSAnswered on April 17, 2017 at 02:29 PM
Thank you very much. As per your instructions, I have added the actual form ID number instead of the placeholder, "1234567890" and I have replaced the "IMAGE URL HERE" with, http://www.norelcosafecam.com/site/img/Iconography/Request_Access.png.
I notice that when I place the code in a code editor (Sublime Text 3) it works just fine, meaning I can view the code in a browser and click on the button and it opens the form as a modal dialogue popup window.
However, when I put the code in my website's WYSIWYG editor, the button is still generated and it generates the on-hover mouse hand with pointer finger when I hover over the button. However, clicking it doesn't do anything — it doesn't open the modal dialogue popup window.
The code I pasted is as follows,
Here's a link to my developer environment, which is where I test things before implementing.
The button is near the bottom in case you want to see it.
- JotForm SupportWelvinAnswered on April 17, 2017 at 03:12 PM
- ANDROSSAnswered on April 17, 2017 at 03:31 PM
Thank you very much! I'm not sure what generated the "2" in the JS file URL, but I removed it. I think the "2" was generated when publishing the form, but that's just a guess.
- JotForm SupportjonathanAnswered on April 17, 2017 at 03:44 PM
I assume that the original issue on how to open your form using lightbox on your website was already resolved. Since the new question was about a different feature, I created a separate discussion thread for it here https://www.jotform.com/answers/1121291
We will attend to it shortly.