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

    Javascript conflicts- navigation menu not poping out anymore.

    Asked by knoed on May 14, 2014 at 03:25 PM

    Hi.

     

    I'm trying to get this form working on my site.

    http://www.knoed.com/contact-form.php

    This is an iFrame version, but when the error messages pop up, it pushes the iframe below the viewable area, and the submit button disappears. I don't want to turn scrolling on because it looks bad.

     

    I've also tried pasting the source code into my page, but the javascript is conflicting with the page. You can see that here:

    http://www.knoed.com/contact-formv1.php

     

    Neither options is working well for me. Is there another option?

    Thanks,

    Kyle

    Page URL:
    http://www.knoed.com/contact-formv1.php

    conflicts javascript conflict navigation menu pop menu pop up conflict js conflict menu
  • Profile Image

    Answered by knoed on May 15, 2014 at 01:34 PM

    I tried your suggestions given in the forum, but they did not work. Do you have any other suggestions?

    The form is here.

    http://www.knoed.com/contact-form.php

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 15, 2014 at 04:23 PM

    Hi,

    I can see that you have embedded the form source code, however when I tested the form validation on your page, it is working. Though I can see that the navigation menu is not poping out anymore.

    To fix that, find these codes on your page and change every $ dollar sign with jQuery

    Example:

    <script type="text/javascript">

    <!-- fancyBox -->

    jQuery(document).ready(function() {

    jQuery(".fancybox").fancybox({

    openEffect  : 'none',

    closeEffect : 'none',

    closeBtn : false,

    arrows : false,

    helpers : {

    title : null,

    overlay : {

    css : {

    'background' : 'rgba(46, 46, 46, 0.97)'

    }

    }

    }

    });

    jQuery(".fancyboxnav").fancybox({

    openEffect  : 'none',

    closeEffect : 'none',

    closeBtn : false,

    helpers : {

    title : null,

    overlay : {

    css : {

    'background' : 'rgba(46, 46, 46, 0.97)'

    }

    }

    }

    });

     

    });

    jQuery(function(){

    var fadeBegin = 10, //The fade out begins 10px down the page

    fadeFinish = 130, //The fade out is completed by 130px down the page. It automatically calculates the rate at fading out between this and value above

    fadingElement = jQuery('.name');

    jQuery(window).bind('scroll', function(){

       var offset = jQuery(document).scrollTop(), opacity = 0;

       if( offset <= fadeBegin ){

           opacity = 1;

       } else if( offset <= fadeFinish ){

           opacity = 1 - offset / fadeFinish;

       }

       fadingElement.css('opacity',opacity);

    });

    });

    </script>

    Here's a working version: https://shots.jotform.com/elton/testing_conglict_377385.html

    Thanks!

  • Profile Image

    Answered by knoed on May 16, 2014 at 12:17 PM

    Thank you! We're getting close.

    The last element we need to get working is the background image is not appearing.

    Here's the current page: http://www.knoed.com/contact-form.php

    The background should look like this: http://www.knoed.com/contact-formv4.php (I deactivated JotForm's error tooltips)

    Is it possible to display my background image?

  • Profile Image

    Answered by knoed on May 16, 2014 at 12:19 PM

    I commented out

    <!--<script src="//max.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>-->

    to get the background working, but the error tooltips are not working.
  • Profile Image

    Answered by knoed on May 16, 2014 at 02:07 PM

    also, can i style this error page?

    https://www.evernote.com/shard/s162/sh/13d58264-0180-4f9b-9c06-edd67ec97e33/e0b6a889f0829b70442b8333f28da79e

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 16, 2014 at 04:26 PM

    @ knoed 

    Sorry forgot to mention, you also need to change the dollar sign $ on the background code with jQuery. That should fix it.

    It's found on the bottom part of your page source. Example:

  • Profile Image

    Answered by knoed on May 16, 2014 at 05:26 PM

    Thank you! It's working great!