How Do I Make My Form Responsive for Mobile?

Right now my for design  looks completely different on the mobile

Hi,

There are several ways to make your forms responsive on mobile platforms. For the quick solution to beat this problem, you can give mobile responsive ability 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 to inject some custom CSS to your form for making it mobile responsive. This method is the more advanced one to solve this issue.

 

To do that,

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;

}

 

I hope this methods will help you. If you need more information about this issue, please let us know.

 

Thanks.