How to open the form as a pop-up on the website?

ANDROSS

Asked on April 13, 2017 at 10:16 AM

I don't want to embed the form to the website, my goal is to have a CTA (Call To Action) link/button and when clicking on the CTA, it should open the JotForm in a pop-up.

I have the form, but I don't know how to make things so that clicking on a CTA opens the form in a pop-up, not a new tab/standalone web page.

Thank you!
Mike_G JotForm Support

Replied on April 13, 2017 at 10:33 AM

If you want to open your forms as pop ups 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.

How-to-Create-a-Lightbox-Form

I hope this helps. If you have any questions regarding this, please feel free to contact us again anytime.

Thank you.
ANDROSS

Replied on April 17, 2017 at 9: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.

However, I don't think I can include the Lightbox embed code as a clickable text link or image link via ahref HTML tags. This is because the embed code for the lightbox is a <script> file, so it's more JavaScript than HTML.

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.
Kevin Support Team Lead

Replied 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.
ANDROSS

Replied 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:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>title</title>

<script src="https://form.jotform.ca/static/feedback2.js" type="text/javascript"> var JFL_70865847374268 = new JotformFeedback({ formId: '70865847374268', base: 'https://form.jotform.ca/', windowTitle: 'Sales Flyer Request Form', background: '#008fca', fontColor: '#ffffff', type: 'false', height: 450, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-70865847374268" style="margin-top: 16px"> Sales Flyer Request Form </a>

</head>

<body>

</body>

</html>

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!
Welvin Support Team Lead

Replied 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:

.btn {

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.
ANDROSS

Replied on April 17, 2017 at 2: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,

<script src="https://form.jotform.ca/static/feedback2.js" type="text/javascript"> var JFL_70865847374268 = new JotformFeedback({ formId: '70865847374268', base: 'https://form.jotform.ca/', windowTitle: 'Sales Flyer Request Form', background: '#008fca', fontColor: '#ffffff', type: 'false', height: 450, width: 700, openOnLoad: false }); </script><img src="//www.norelcosafecam.com/site/img/Iconography/Request_Access.png" class="btn lightbox-70865847374268">

Here's a link to my developer environment, which is where I test things before implementing.

http://www.norelcosafecam.com/Dev/

The button is near the bottom in case you want to see it.

Best regards.
Welvin Support Team Lead

Replied on April 17, 2017 at 3:12 PM

There are errors on the page related to the lightbox script which is causing the problem.

Please try to replace this https://form.jotform.ca/static/feedback2.js into this https://form.jotform.ca/static/feedback.js. Basically, removing the "2" from the JS file URL. Check if that works.
ANDROSS

Replied on April 17, 2017 at 3: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.

The button works in the WYSIWYG editor now, thanks. I did notice a couple things, however. There are Console errors associated primarily with the JavaScript, I think. (screenshot included below)

While using my desktop computer, I also changed the browser's viewport to a smartphone size (and tested the form on my phone, too) and noticed the form is not responsive, it's too large for the smaller screen. I'm pretty sure I used fixed width and height dimensions when building the form. I will see what I can do to make the form mobile friendly. If you have any suggestions, please let me know.
Thanks!
jonathan

Replied on April 17, 2017 at 3: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.