-
knoedAsked on May 14, 2014 at 3: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 -
knoedReplied on May 15, 2014 at 1: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
-
Elton Support Team LeadReplied on May 15, 2014 at 4: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!
-
knoedReplied 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?
-
knoedReplied 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. -
knoedReplied on May 16, 2014 at 2:07 PM
-
Elton Support Team LeadReplied on May 16, 2014 at 4: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:
-
knoedReplied on May 16, 2014 at 5:26 PM
Thank you! It's working great!