-
bluebarnAsked on January 7, 2016 at 12:43 AM
I would like to make a form dynamic in sizing so that when the web page is viewed on a mobile browser, it fits accordingly.
-
mert JotForm UI DeveloperReplied on January 7, 2016 at 8:40 AM
Hi,
There are several methods are provided to make your form mobile friendly. For the quick solution, you can add this feature to your form by simply following the tutorial from the link below:
http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive
If it won't work, you can try adding some custom CSS to make your form mobile responsive. This method is the more advanced one to solve this issue.
To do that,
1) First, you need to know about injecting custom CSS to your form. The detailed information about it is given from the following link below:
http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
2) Add the following custom CSS code to your form by using the method above.
/*-----------RESPONSIVE LAYOUT-----------*/
.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;
}
Please, try this method and let us know the results.
Thanks.
-
bluebarnReplied on January 8, 2016 at 8:46 PMThank you for your assistance. I tried all three methods (the first worked) but am still having an issue with the bottom of my form being cut off without text being written in the last text box as well as the borders being cut off on the right side. Please see attached photo for the example or visit yourself: www.bluebarnphotography.com/contact
xo
Rachel
Rachel Linder
Blue Barn Photography
www.bluebarnphotography.com
rachel@bluebarnphotography.com
(919) 624-7139
Office Hours: Tuesday - Thursday 9:00 AM - 4:00 PM; Friday - Monday by appointment only.
As recently seen on...
Style Me Pretty
Southern Weddings
The School of Styling
Wedding Chicks
... -
Kevin Support Team LeadReplied on January 9, 2016 at 1:54 PM
Hi,
Try pasting this CSS code in your website, paste it between the <head> tag :
<style type="text/css">
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
#JotFormIFrame{
height:820px !important;
}
}
</style>
It should change the height of the IFrame where the form is embedded and it should be displayed properly in your website in mobile devices.
Do let us know if it works, if not , we will be glad to assist you.
Regards.
-
bluebarnReplied on January 11, 2016 at 7:46 AMI only have the ability to adjust code on each individual page, so I've
tried placing this code in a few different places and none seem to work.
Here is what the page has
currently: -
mert JotForm UI DeveloperReplied on January 11, 2016 at 9:00 AM
Hi again,
According to my tests, the last state of your embedded form on your web page is similar with the original form. Please, see it from the below:
However, if you are experiencing this problem on different screen resolutions, you can try to embed your form with iFrame method, then you can adjust its height value as it is shown from the below:
<iframe
id="JotFormIFrame"
onDISABLEDload="window.parent.scrollTo(0,0)"
allowtransparency="true"
src="https://form.jotform.co/33435446461858"
frameborder="0"
style="width:100%;
height:800px;
border:none;"
scrolling="no">
</iframe>
Above, you can adjust the "height" value and also, you can copy and paste that one, because it is coming from your form. Please, let us know the results.
Thanks.