What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Creating CSS Button - FancyBox

    Asked by ancientalkemist on December 03, 2013 at 05:46 PM

    I am trying to get my Invite a Friend form to open in fancybox from an Invite a Friend! button. I know it's possible...just not quite sure how to do it. 

    Here is how i did it with another form I am using:

    <script type="text/javascript">

    $(document).ready(function() {

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

    });

    </script>

     

     

    <a class="fancybox" data-fancybox-type="iframe" target="_blank" href="https://inkdit.com/...forminfo data-fancybox-width="850" data-fancybox-height="650">Membership Application</a>

    height another form
  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 06:11 PM

    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?

  • Profile Image

    Answered by ancientalkemist on December 03, 2013 at 06:24 PM

    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>

    I tried using your lightbox code and it doesn't seem to work on squarespace.
  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 06:29 PM

    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.

  • Profile Image

    Answered by ancientalkemist on December 03, 2013 at 07:43 PM
    Thanks...that would be great!
    JotForm Support Forum wrote:
  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 08:38 PM

    @ancientalkemist

    Just to update you, my tests look promising.

  • Profile Image

    Answered by ancientalkemist on December 03, 2013 at 10:06 PM

    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.

  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 10:09 PM

    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

  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 10:11 PM

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

  • Profile Image

    Answered by ancientalkemist on December 05, 2013 at 03:23 AM
    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:
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 05, 2013 at 07:21 AM

    @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!

  • Profile Image

    Answered by ancientalkemist on December 05, 2013 at 01:07 PM
    Thanks! I was also interested in comparing the JavaScript code that got fancy box to work.
    JotForm Support Forum wrote:
  • Profile Image

    Answered by ancientalkemist on December 07, 2013 at 07:05 PM

    Any word on the javascript???

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2013 at 07:29 PM

    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

  • Profile Image

    Answered by ancientalkemist on December 07, 2013 at 08:08 PM

    Awesome! Thanks!

  • Profile Image

    Answered by ancientalkemist on December 07, 2013 at 08:43 PM

    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?

  • Profile Image

    Answered by ancientalkemist on December 07, 2013 at 08:44 PM

    Never mind..I found it! Thanks