-
trainings24x7Asked on December 5, 2015 at 1:43 AM
Hello,
Is there any way if I want to show my form only to desktop, not for mobile or tablets.?
below is my website where i use the form:
Below is the form:
https://form.jotform.me/53300890979464
Thanks,
Nishant
Page URL: http://trainings24x7.com -
Welvin Support Team LeadReplied on December 5, 2015 at 8:23 AM
I think that is possible by adding a custom CSS codes in your website. Please try the following CSS codes:
@media only screen and (max-device-width: 1028px) {
.jt-dimmer {
display: none !important;
}
.jt-feedback.u-responsive-lightbox.ui-draggable {
display: none !important;
}
}
You will have to add the codes to your website stylesheets.
Let us know if the codes aren't working so we can re-check.
-
nishantReplied on December 6, 2015 at 11:19 PM
Hello,
the above code is not working as you can see I have added in the stylesheet.
-
Ashwin JotForm SupportReplied on December 7, 2015 at 1:39 AM
Hello nishant,
I did check your webpage and you seems to have added script to auto popup the light box form. The css code share by my colleague, will only hide the link in your web page.
Can you please let us know if you will be able to add some scripts in your webpage? We will try to find out alternative options to disable the script when accessed from mobile device.
We will wait for your response.
Thank you!
-
nishantReplied on December 7, 2015 at 1:41 AM
Hello ashwin_d
Yes, i'm able to add the code into my webpage.
Thanks,
Nishant
-
BenReplied on December 7, 2015 at 2:29 AM
Great Nishant, thank you for confirmation :)
Now instead of this:
<script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
var JFL_53300890979464 = new JotformFeedback({
formId: '53300890979464',
base: 'https://form.jotform.me/',
windowTitle: 'Help? Contact Us',
background: '#FFA500',
fontColor: '#FFFFFF',
type: 'false',
height: 500,
width: 'parentWidth',
openOnLoad: false
});
</script>Do add the following:
<script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
if(screen.width > 1023) {
var JFL_53300890979464 = new JotformFeedback({
formId: '53300890979464',
base: 'https://form.jotform.me/',
windowTitle: 'Help? Contact Us',
background: '#FFA500',
fontColor: '#FFFFFF',
type: 'false',
height: 500,
width: 'parentWidth',
openOnLoad: false
});
}
</script>What it should do is to only create the form when the size of the screen is 1024 or more pixels in width.
Do let us know how it goes and please do replace the original code(s) or they will cause it to still appear. Looking at your website it seems that there are multiple places showing the feedback form.
1st At the top of the page, from line 6 to line 20
2nd near bottom from line 1196 to line 1209
While the second does not have any values, it still could cause issues if left as it is, which is why I had mentioned it.
Do let us know how it goes :)
-
nishantReplied on December 7, 2015 at 3:00 AM
The following code i was using earlier:
<script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
var JFL_53300890979464 = new JotformFeedback({
formId: '53300890979464',
base: 'https://form.jotform.me/',
windowTitle: 'Help? Contact Us',
background: '#FFA500',
fontColor: '#FFFFFF',
type: 'false',
height: 500,
width: 'parentWidth',
openOnLoad: false
});
</script>
<a id="lightboxdelay" class="btn lightbox-53300890979464" style="margin-top: 16px"> Help? Contact
Us </a>
<script language="JavaScript">
var parentWidth = window.innerWidth;
if(window.innerWidth <= 499) {parentWidth = window.innerWidth;} else {parentWidth = 500;}
</script>
<script language="JavaScript">
var delayseconds = 2;
function pause() {
myTimer = setTimeout('whatToDo()', delayseconds * 1000)
}
function whatToDo() {
document.getElementById('lightboxdelay').click();
}
window.onload = pause;
</script>Now tell me where to change. I changed as you said but nothing working eveng form is not coming when i refresh the page.
-
beril JotForm UI DeveloperReplied on December 7, 2015 at 3:34 AM
<script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
if(screen.width > 1023) {
var JFL_53300890979464 = new JotformFeedback({
formId: '53300890979464',
base: 'https://form.jotform.me/',
windowTitle: 'Help? Contact Us',
background: '#FFA500',
fontColor: '#FFFFFF',
type: 'false',
height: 500,
width: 'parentWidth',
openOnLoad: false
});
}
</script>You need to add the parts which marked with purple to your code.
I hope it will work.
If this does not resolve the issue, please let us know and we will be glad to take another look.
-
nishantReplied on December 7, 2015 at 3:46 AM
Hi Beril,
I made the changes but still form appear as before in dektop or laptop. Code is not working.
-
SammyReplied on December 7, 2015 at 4:25 AM
I have checked the code on your site and it appears the script is not updated with eh new code as suggested by my colleague Beril, kindly update the test in on a phone or ipad, I have tested the sample on my end and it is switching accordingly kindly replace the code.
It appears on the laptop because the laptop screen sizes is usually greater than 1023, you can tweak the values of the screen width value to your preference.
-
nishantReplied on December 7, 2015 at 4:29 AM
Hi Sammy,
I replaced the code and checked but not worked. that is why i did undo.
-
nishantReplied on December 7, 2015 at 4:36 AM
ok see. I have added again the code and test..
Now please check trainings24x7.com at ur end in mobile and laptop, deskptop. It is not switching accordingly.
-
nishantReplied on December 7, 2015 at 5:12 AM
-
Welvin Support Team LeadReplied on December 7, 2015 at 6:41 AM
That's great to know.
Your question about the scroll bar has been moved here: http://www.jotform.com/answers/719311.