The Easiest Online Form Builder: JotForm Support Forum

Do you have a web page where you're trying to do this? If so, please provide the URL, so we can have a look at the page's source to see if we can come up a workable solution. Also, you mentioned another form where you successfully did it. May we see that form?

I am creating my website on squarespace and it isn't live yet. I successfully used fancybox by putting the following code in a code block:

<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>

<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>

<link type="text/css" rel="stylesheet" target="_blank" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

 

 

<script type="text/javascript">

$(document).ready(function() {

$(".fancybox").fancybox();

});

</script>

 

 

<a class="fancybox" data-fancybox-type="iframe" target="_blank" href="https://link to form with form number"data-fancybox-width="850" data-fancybox-height="650">Membership Application</a>

Hi again,

Thanks for that additional information. While searching the internet for a solution, I found the following video which seems like it would help:

I'm going to see if I can come up with something (perhaps by combining the info you supplied with what I learn from the video) but I'm not making any guarantees.

Thanks...that would be great!
JotForm Support Forum wrote:

@ancientalkemist

Just to update you, my tests look promising.

I got it to work on jsfiddle. Here is the link.

http://jsfiddle.net/Se8Yu/478/

 

However the sizing attributes are not working on squarespace for some reason.

LOL

You beat my reply by seconds. Just as I was about to post my demo, I got a notification of a new post in the thread.

Anyway, I'm glad you were able to figure it out. By the way, here's my demo.

Cheers

We'll see if we can work on the Squarespace situation for you.

I'd like to compare the code if you don't mind. You managed to be able to style the button. I didn't get that far. :)
Thanks!
JotForm Support Forum wrote:

@ancientalkemist

That's great! Glad to hear my colleague was able to help.

Upon looking my colleagues code, the button was generated at http://cssbuttongenerator.com/. Then apply the button class on the form hyperlink under class attribute e.g <a class="fancybox button-blue" 

Cheers!

Thanks! I was also interested in comparing the JavaScript code that got fancy box to work.
JotForm Support Forum wrote:

Any word on the javascript???

Hi again,

If the demo is loaded in Chrome and then the page's source is viewed, you'll see that all of the resources to which the page refers are clickable links. When you click the said links, you'll see the code. For your convenience, the addresses to which the links point are repeated below:

Stylesheets:

https://shots.jotform.com/wayne/source/jquery.fancybox.css

https://shots.jotform.com/wayne/css/button-blue.css

https://shots.jotform.com/wayne/css/center-content.css

Scripts:

https://shots.jotform.com/wayne/lib/jquery-1.10.1.min.js

(That's the minified [compressed] version of jQuery 1.10.1)

https://shots.jotform.com/wayne/source/jquery.fancybox.js

It's important to note that fancybox.js must be placed after the library (jQuery). It's also advisable to load CSS before scripts but that's not critical.

If you need further help with this, please let us know.

Thanks

Awesome! Thanks!

Sorry to bother you...but I am aware of the basic scripts and I kno wthat they get loaded in the head of the document. What I am looking for is the javascript code that you used to load and call up the fancybox that comes after loading the scripts. The one where you applied the button class?

Never mind..I found it! Thanks