-
ktjamesAsked on January 5, 2017 at 5:07 PM
I have this page:
http://jserve.org/2017projectregistration-nashville
I embedded it in Squarespace following the instructions given in Jot forms.
When i look at it on my phone, it's not responsive. I am using the mobile responsive widget, and I specified the form should be responsive in the design section.
Any ideas?
-
Kevin Support Team LeadReplied on January 5, 2017 at 8:12 PM
I have checked your form and I can see it displays fine when viewing it in a mobile device, here's a screenshot as an example:
Is the form getting cut off at the bottom or at the side?
This is the most common conflict that happens when embedding a form and loading it through a mobile device.
Also, could you provide us the details about the device where you tested your form?
I have tested on my end on an iPhone 6S Plus device, knowing the device where you tested we will also test in a similar and will try to replicate the problem and provide with the instructions to resolve it.
We'll wait for your response.
-
ktjamesReplied on January 5, 2017 at 10:27 PM
I'm using a iphone 6s as well. The form is not cut off. I see the whole form. It's just smaill, like its non responsive. Im stumped.
What do you mean about loading through a mobile device? Why is that a conflict?
-
candyReplied on January 6, 2017 at 1:27 AM
Hello,
I have tested your website on iPhone 6s Plus testing environment and everything seems okay as you can see the screen below:
I did not see any issue about being responsive.
Sometimes, our users have a problem with embedding form into their websites. So, we always advise them an embedding way to make their form work properly. However, as I have seen there is no conflict in your form.
If you have any doubt, please let us know.
Thanks.
-
ktjamesReplied on January 6, 2017 at 10:29 AM
When you look at your emulator - do you see a differnece in the following links?
http://jserve.org/2017projectregistration-nashville
https://form.jotform.com/70045711107141 -
Kevin Support Team LeadReplied on January 6, 2017 at 11:40 AM
I have tested both links and I can see what you're referring to, when loading the link to the embedded form it looks like this:
And when loading the direct link the form looks like this:
I have copied the iFrame code of your form and noticed the form displays fine on my end, could you please try re-embedding your form?
If it still displays the same, please try injecting this CSS code to your form that will help you with displaying the fields properly on mobile devices:
@media screen and (max-width: 480px){
.form-line.form-line-column {
width: 100% !important;
margin-left:0;
}
.form-line{
width: 100%;
}
.form-textarea,
.form-textbox,
.form-dropdown{
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-label-left, .form-label-right{
width: auto !important;
}
.form-buttons-wrapper{
margin-left:0 !important;
}
.form-input {
width: 100% !important;
}
.form-all{
width: 75% !important;
}
.form-sub-label-container {
width: 100% !important;
display: block !important;
}
}
This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes
Do let us know how it goes.
-
ktjamesReplied on January 6, 2017 at 11:52 AM
It looks the same on my end. I added the CSS and re-embedded the iframe code.
How does it look on your end?
-
Kevin Support Team LeadReplied on January 6, 2017 at 12:32 PM
I checked your form and noticed you have injected the CSS code, it looks the same.
Please try with this code:
@media only screen and (max-device-width: 550px){
.form-all {
font-size : 14px !important;
}
.form-label, .form-submit-button {
font-size: 38px !important;
}
.form-sub-label, strong{
font-size: 23px !important;
}
.form-checkbox-item label, .form-radio-item label {
font-size: 35px !important;
}
}
I have injected it on a cloned form of yours and here is the link so you can take a look: https://shots.jotform.com/kevin/Content/Samples/1026951/
Hope this helps.