What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Why My Feedback Form is not Responsive?

    Asked by pierocan on March 28, 2016 at 09:29 AM

    @media only screen and (max-width: 480px) {

    .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;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100%;

    }

    .form-all{

    width: 98%;

    }

    .form-sub-label-container {

    width: 100%;

    display:block;

    }

    /*--for the address table--*/

    span.form-sub-label-container + span.form-sub-label-container {

    margin-right: 0;

    }

    .form-address-table select,

    .form-address-state,

    .form-address-table,

    .form-address-line,

    .form-address-table .form-sub-label-container {

    width: 100%;

    }

    .form-address-postal,

    .form-address-city{

    width: 99%;

     

    }

    .form-address-table td, .form-address-table th {

    padding-bottom: 10px;

    padding: 0 0 10px 0;

    }

    }

    Page URL:
    http://www.dmestudio.com.ar/

    not responsive textarea label textbox table
  • Profile Image
    JotForm Support

    Answered by mert on March 28, 2016 at 10:24 AM

    Hi there,

    First of all, please disable the "Make this Form Responsive" option in the "Designer" and only leave the "Responsive Form" option enabled on the "Properties". Because, their CSS rules can overwrite their rules and could reason a conflict, when both of the options are enabled at the same time.

    Then, you can remove the "@media" rule from your CSS rules, because it is already in a small area (feedback), so it will fill the area correctly same on the desktop platforms as well. Also, you can try the similar responsive CSS codes from the below:

     

    /*-----------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;

    }

     

    After, trying those methods, please do let us know the results.

    Regards.

  • Profile Image

    Answered by Daniel on March 28, 2016 at 11:28 AM

    Doesn t work. I remove @media and uncheck responsive form.

    I must replace the original responsive css code or add that you send on this post?

    The new css code, at the end.

    Thanks!

     

    @import "//www.jotform.com/themes/css/buttons/form-submit-button-carbon.css";
    .form-all {
    font-family: "Arial", sans-serif;
    }
    .form-all {
    width: 400px;
    width: 100%;
    max-width: 400px;
    }
    .form-label-left,
    .form-label-right {
    width: 0px;
    }
    .form-label {
    white-space: normal;
    }
    .form-label.form-label-auto {
    display: block;
    float: none;
    text-align: left;
    }
    .form-label-left {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: left;
    }
    .form-label-right {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: right;
    }
    .form-label-top {
    white-space: normal;
    display: block;
    float: none;
    text-align: left;
    }
    .form-all {
    font-size: 16px;
    }
    .form-label {
    font-weight: normal;
    font-size: 0.95em;
    }
    .supernova {
    background-color: #25272c;
    }
    .supernova body {
    background-color: transparent;
    }
    /*
    @width30: (unit(@formWidth, px) + 60px);
    @width60: (unit(@formWidth, px)+ 120px);
    @width90: (unit(@formWidth, px)+ 180px);
    */
    /* | */
    @media screen and (min-width: 480px) {
    .supernova .form-all {
    border: 1px solid #0e0e10;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 480px) {
    .jotform-form {
    padding: 10px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 480px) and (max-width: 768px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .jotform-form {
    padding: 60px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 1024px) {
    .jotform-form {
    padding: 90px 0;
    }
    }
    /* | */
    .supernova .form-all,
    .form-all {
    background-color: #25272c;
    border: 1px solid transparent;
    }
    .form-header-group {
    border-color: #0e0e10;
    }
    .form-matrix-table tr {
    border-color: #0e0e10;
    }
    .form-matrix-table tr:nth-child(2n) {
    background-color: #191b1e;
    }
    .form-all {
    color: #f8f8f8;
    }
    .form-header-group .form-header {
    color: #f8f8f8;
    }
    .form-header-group .form-subHeader {
    color: #ffffff;
    }
    .form-sub-label {
    color: #ffffff;
    }
    .form-label-top,
    .form-label-left,
    .form-label-right,
    .form-html {
    color: #ffffff;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    color: #ffffff;
    }
    .form-line.form-line-active {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: rgba(44, 124, 193, 0.12);
    }
    /* ömer */
    .form-radio-item,
    .form-checkbox-item {
    padding-bottom: 0px !important;
    }
    .form-radio-item:last-child,
    .form-checkbox-item:last-child {
    padding-bottom: 0;
    }
    /* ömer */
    [data-type="control_radio"] .form-input,
    [data-type="control_checkbox"] .form-input,
    [data-type="control_radio"] .form-input-wide,
    [data-type="control_checkbox"] .form-input-wide {
    width: 100%;
    max-width: 400px;
    }
    .form-radio-item,
    .form-checkbox-item {
    width: 100%;
    max-width: 400px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-textbox.form-radio-other-input,
    .form-textbox.form-checkbox-other-input {
    width: 80%;
    margin-left: 3%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-multiple-column {
    width: 100%;
    }
    .form-multiple-column .form-radio-item,
    .form-multiple-column .form-checkbox-item {
    width: 10%;
    }
    .form-multiple-column[data-columncount="1"] .form-radio-item,
    .form-multiple-column[data-columncount="1"] .form-checkbox-item {
    width: 100%;
    }
    .form-multiple-column[data-columncount="2"] .form-radio-item,
    .form-multiple-column[data-columncount="2"] .form-checkbox-item {
    width: 50%;
    }
    .form-multiple-column[data-columncount="3"] .form-radio-item,
    .form-multiple-column[data-columncount="3"] .form-checkbox-item {
    width: 33.33333333%;
    }
    .form-multiple-column[data-columncount="4"] .form-radio-item,
    .form-multiple-column[data-columncount="4"] .form-checkbox-item {
    width: 25%;
    }
    .form-multiple-column[data-columncount="5"] .form-radio-item,
    .form-multiple-column[data-columncount="5"] .form-checkbox-item {
    width: 20%;
    }
    .form-multiple-column[data-columncount="6"] .form-radio-item,
    .form-multiple-column[data-columncount="6"] .form-checkbox-item {
    width: 16.66666667%;
    }
    .form-multiple-column[data-columncount="7"] .form-radio-item,
    .form-multiple-column[data-columncount="7"] .form-checkbox-item {
    width: 14.28571429%;
    }
    .form-multiple-column[data-columncount="8"] .form-radio-item,
    .form-multiple-column[data-columncount="8"] .form-checkbox-item {
    width: 12.5%;
    }
    .form-multiple-column[data-columncount="9"] .form-radio-item,
    .form-multiple-column[data-columncount="9"] .form-checkbox-item {
    width: 11.11111111%;
    }
    .form-single-column .form-checkbox-item,
    .form-single-column .form-radio-item {
    width: 100%;
    }
    .supernova {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    }
    .supernova {
    background-image: none;
    }
    #stage {
    background-image: none;
    }
    /* | */
    .form-all {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    }
    .form-header-group {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    }
    .form-line {
    margin-top: 12px;
    margin-bottom: 12px;
    }
    .form-line {
    padding: 0px 30px;
    }
    .form-all .form-textbox,
    .form-all .form-radio-other-input,
    .form-all .form-checkbox-other-input,
    .form-all .form-captcha input,
    .form-all .form-spinner input,
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next,
    .form-all .qq-upload-button,
    .form-all .form-error-message {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-all .form-textarea {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-all {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .form-section:first-child {
    -webkit-border-radius: 0px 0px 0 0;
    -moz-border-radius: 0px 0px 0 0;
    border-radius: 0px 0px 0 0;
    }
    .form-section:last-child {
    -webkit-border-radius: 0 0 0px 0px;
    -moz-border-radius: 0 0 0px 0px;
    border-radius: 0 0 0px 0px;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: normal;
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: normal;
    }
    /*
    & when ( @buttonFontType = google ) {
    @import (css) "@{buttonFontLink}";
    }
    */
    h2.form-header {
    line-height: 1.618em;
    font-size: 1.714em;
    }
    h2 ~ .form-subHeader {
    line-height: 1.5em;
    font-size: 1.071em;
    }
    .form-header-group {
    text-align: left;
    }
    .form-line {
    zoom: 1;
    }
    .form-line:before,
    .form-line:after {
    display: table;
    content: '';
    line-height: 0;
    }
    .form-line:after {
    clear: both;
    }
    .form-sub-label-container {
    margin-right: 0;
    float: left;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    .form-captcha input,
    .form-spinner input {
    width: 400px;
    }
    .form-textbox,
    .form-textarea {
    width: 100%;
    max-width: 400px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-input,
    .form-address-table,
    .form-matrix-table {
    width: 100%;
    max-width: 400px;
    }
    .form-radio-item,
    .form-checkbox-item {
    width: 100%;
    max-width: 400px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-textbox.form-radio-other-input,
    .form-textbox.form-checkbox-other-input {
    width: 80%;
    margin-left: 3%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-multiple-column {
    width: 100%;
    }
    .form-multiple-column .form-radio-item,
    .form-multiple-column .form-checkbox-item {
    width: 10%;
    }
    .form-multiple-column[data-columncount="1"] .form-radio-item,
    .form-multiple-column[data-columncount="1"] .form-checkbox-item {
    width: 100%;
    }
    .form-multiple-column[data-columncount="2"] .form-radio-item,
    .form-multiple-column[data-columncount="2"] .form-checkbox-item {
    width: 50%;
    }
    .form-multiple-column[data-columncount="3"] .form-radio-item,
    .form-multiple-column[data-columncount="3"] .form-checkbox-item {
    width: 33.33333333%;
    }
    .form-multiple-column[data-columncount="4"] .form-radio-item,
    .form-multiple-column[data-columncount="4"] .form-checkbox-item {
    width: 25%;
    }
    .form-multiple-column[data-columncount="5"] .form-radio-item,
    .form-multiple-column[data-columncount="5"] .form-checkbox-item {
    width: 20%;
    }
    .form-multiple-column[data-columncount="6"] .form-radio-item,
    .form-multiple-column[data-columncount="6"] .form-checkbox-item {
    width: 16.66666667%;
    }
    .form-multiple-column[data-columncount="7"] .form-radio-item,
    .form-multiple-column[data-columncount="7"] .form-checkbox-item {
    width: 14.28571429%;
    }
    .form-multiple-column[data-columncount="8"] .form-radio-item,
    .form-multiple-column[data-columncount="8"] .form-checkbox-item {
    width: 12.5%;
    }
    .form-multiple-column[data-columncount="9"] .form-radio-item,
    .form-multiple-column[data-columncount="9"] .form-checkbox-item {
    width: 11.11111111%;
    }
    [data-type="control_dropdown"] .form-dropdown {
    width: 100% !important;
    max-width: 400px;
    }
    [data-type="control_fullname"] .form-sub-label-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 48%;
    }
    [data-type="control_fullname"] .form-sub-label-container:first-child {
    margin-right: 4%;
    }
    [data-type="control_phone"] .form-sub-label-container {
    width: 65%;
    }
    [data-type="control_phone"] .form-sub-label-container:first-child {
    width: 32.5%;
    margin-right: 2.5%;
    }
    [data-type="control_birthdate"] .form-sub-label-container {
    width: 22%;
    margin-right: 3%;
    }
    [data-type="control_birthdate"] .form-sub-label-container:first-child {
    width: 50%;
    }
    [data-type="control_birthdate"] .form-sub-label-container:last-child {
    margin-right: 0;
    }
    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {
    width: 100%;
    }
    [data-type="control_time"] .form-sub-label-container {
    width: 37%;
    margin-right: 3%;
    }
    [data-type="control_time"] .form-sub-label-container:last-child {
    width: 20%;
    margin-right: 0;
    }
    [data-type="control_time"] .form-sub-label-container .form-dropdown {
    width: 100%;
    }
    [data-type="control_datetime"] .form-sub-label-container {
    width: 28%;
    margin-right: 4%;
    }
    [data-type="control_datetime"] .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime span .form-sub-label-container:first-child {
    width: 3%;
    }
    [data-type="control_datetime"].allowTime span .form-sub-label-container:last-child {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime .form-dropdown {
    width: 100%;
    }
    [data-type="control_payment"] .form-sub-label-container {
    width: auto;
    }
    [data-type="control_payment"] .form-sub-label-container .form-dropdown {
    width: 100%;
    }
    .form-address-table td .form-dropdown {
    width: 100%;
    }
    .form-address-table td .form-sub-label-container {
    width: 96%;
    }
    .form-address-table td:last-child .form-sub-label-container {
    margin-left: 4%;
    }
    .form-address-table td[colspan="2"] .form-sub-label-container {
    width: 100%;
    margin: 0;
    }
    .form-line,
    .form-input,
    .form-input-wide,
    .form-dropdown,
    .form-sub-label-container,
    .form-address-table,
    .form-matrix-table {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-item,
    .form-checkbox-item,
    .form-captcha input,
    .form-spinner input,
    .form-error-message {
    width: 100%;
    max-width: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    /*.form-dropdown,
    .form-radio-item,
    .form-checkbox-item,
    .form-radio-other-input,
    .form-checkbox-other-input,*/
    .form-captcha input,
    .form-spinner input,
    .form-error-message {
    padding: 4px 3px 2px 3px;
    }
    .form-header-group {
    font-family: "Arial", sans-serif;
    }
    .form-section {
    padding: 0px 0px 0px 0px;
    }
    .form-header-group {
    margin: 12px 36px 12px 36px;
    }
    .form-header-group {
    padding: 24px 0px 24px 0px;
    }
    .form-textbox,
    .form-textarea {
    border-color: #555555;
    color: #000000;
    padding: 1px 3px -1px 3px;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-other-input,
    .form-checkbox-other-input,
    .form-captcha input,
    .form-spinner input {
    background-color: #ffffff;
    }
    .form-textbox {
    height: 40px;
    }
    .form-textarea {
    height: 150px;
    }
    .form-textbox,
    .form-textarea {
    width: 100%;
    max-width: 400px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    [data-type="control_textbox"] .form-input,
    [data-type="control_textarea"] .form-input,
    [data-type="control_fullname"] .form-input,
    [data-type="control_phone"] .form-input,
    [data-type="control_datetime"] .form-input,
    [data-type="control_address"] .form-input,
    [data-type="control_email"] .form-input,
    [data-type="control_passwordbox"] .form-input,
    [data-type="control_autocomp"] .form-input,
    [data-type="control_textbox"] .form-input-wide,
    [data-type="control_textarea"] .form-input-wide,
    [data-type="control_fullname"] .form-input-wide,
    [data-type="control_phone"] .form-input-wide,
    [data-type="control_datetime"] .form-input-wide,
    [data-type="control_address"] .form-input-wide,
    [data-type="control_email"] .form-input-wide,
    [data-type="control_passwordbox"] .form-input-wide,
    [data-type="control_autocomp"] .form-input-wide {
    width: 100%;
    max-width: 400px;
    }
    [data-type="control_fullname"] .form-sub-label-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 48%;
    }
    [data-type="control_fullname"] .form-sub-label-container:first-child {
    margin-right: 4%;
    }
    [data-type="control_phone"] .form-sub-label-container {
    width: 65%;
    }
    [data-type="control_phone"] .form-sub-label-container:first-child {
    width: 32.5%;
    margin-right: 2.5%;
    }
    [data-type="control_phone"] .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    [data-type="control_datetime"] .form-sub-label-container {
    width: 28%;
    margin-right: 4%;
    }
    [data-type="control_datetime"] .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"] .form-sub-label-container .date-separate {
    visibility: hidden;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {
    width: 4%;
    margin-right: 0;
    }
    [data-type="control_datetime"].allowTime span .form-sub-label-container:first-child {
    width: 3%;
    }
    [data-type="control_datetime"].allowTime span .form-sub-label-container:last-child {
    width: 12%;
    margin-right: 3%;
    }
    [data-type="control_datetime"].allowTime .form-dropdown {
    width: 100%;
    }
    .form-matrix-table {
    width: 100%;
    max-width: 400px;
    }
    .form-address-table {
    width: 100%;
    max-width: 400px;
    }
    .form-address-table td .form-dropdown {
    width: 100%;
    }
    .form-address-table td .form-sub-label-container {
    width: 96%;
    }
    .form-address-table td:last-child .form-sub-label-container {
    margin-left: 4%;
    }
    .form-address-table td[colspan="2"] .form-sub-label-container {
    width: 100%;
    margin: 0;
    }
    [data-type="control_dropdown"] .form-input,
    [data-type="control_birthdate"] .form-input,
    [data-type="control_time"] .form-input,
    [data-type="control_dropdown"] .form-input-wide,
    [data-type="control_birthdate"] .form-input-wide,
    [data-type="control_time"] .form-input-wide {
    width: 100%;
    max-width: 400px;
    }
    [data-type="control_dropdown"] .form-dropdown {
    width: 100% !important;
    max-width: 400px;
    }
    [data-type="control_birthdate"] .form-sub-label-container {
    width: 22%;
    margin-right: 3%;
    }
    [data-type="control_birthdate"] .form-sub-label-container:first-child {
    width: 50%;
    }
    [data-type="control_birthdate"] .form-sub-label-container:last-child {
    margin-right: 0;
    }
    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {
    width: 100%;
    }
    [data-type="control_time"] .form-sub-label-container {
    width: 37%;
    margin-right: 3%;
    }
    [data-type="control_time"] .form-sub-label-container:last-child {
    width: 20%;
    margin-right: 0;
    }
    [data-type="control_time"] .form-sub-label-container .form-dropdown {
    width: 100%;
    }
    .form-buttons-wrapper {
    margin-left: 0 !important;
    text-align: center !important;
    }
    .form-label {
    margin-bottom: 4px;
    margin-right: 0;
    }
    .form-label {
    font-family: "Arial", sans-serif;
    }
    li[data-type="control_image"] div {
    text-align: left;
    }
    li[data-type="control_image"] img {
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    border-color: false !important;
    }
    .form-line-column {
    width: auto;
    }
    .form-line-error {
    overflow: hidden;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -ms-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: rgba(44, 124, 193, 0);
    }
    .form-line-error .form-error-message {
    background-color: #fe5a00;
    clear: both;
    float: none;
    }
    .form-line-error .form-error-message .form-error-arrow {
    border-bottom-color: #fe5a00;
    }
    .form-line-error input:not(#coupon-input),
    .form-line-error textarea,
    .form-line-error .form-validation-error {
    border: 1px solid #fe5a00;
    -webkit-box-shadow: 0 0 3px #fe5a00;
    -moz-box-shadow: 0 0 3px #fe5a00;
    box-shadow: 0 0 3px #fe5a00;
    }
    .ie-8 .form-all {
    margin-top: auto;
    margin-top: initial;
    }
    .ie-8 .form-all:before {
    display: none;
    }
    /* | */
    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .jotform-form {
    padding: 0;
    }
    .form-all {
    border: 0;
    width: 100%;
    max-width: initial;
    }
    .form-sub-label-container {
    width: 100%;
    margin: 0;
    }
    .form-input {
    width: 100%;
    }
    .form-label {
    width: 100%!important;
    }
    .form-line {
    padding: 2% 5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    input[type=text],
    input[type=email],
    input[type=tel],
    textarea {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: initial !important;
    }
    .form-input,
    .form-input-wide,
    .form-textarea,
    .form-textbox,
    .form-dropdown {
    max-width: initial !important;
    }
    div.form-header-group {
    padding: 24px 0px !important;
    margin: 0 12px 2% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    [data-type="control_button"] {
    margin-bottom: 0 !important;
    }
    .form-buttons-wrapper {
    margin: 0!important;
    }
    .form-buttons-wrapper button {
    width: 100%;
    }
    table {
    width: 100%!important;
    max-width: initial !important;
    }
    table td + td {
    padding-left: 3%;
    }
    .form-checkbox-item input,
    .form-radio-item input {
    width: auto;
    }
    .form-collapse-table {
    margin: 0 5%;
    }
    }
    /* | *//*__INSPECT_SEPERATOR__*/
    .jotform-form {
    padding : 0px 0;
    }

     

    /*-----------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;}

  • Profile Image
    JotForm Support

    Answered by mert on March 28, 2016 at 12:11 PM

    According to my last checks, you are currently using the "Feedback" button on your form, because of its fixed width and height values, we don't recommend you to use it for mobile purposes. However, if you need to use a button on your form, you can try to add "Lightbox" embed code with button modification.

    To change link into a button you need to add the "<button>" tag on your Lightbox embed code. Below, you can see the customized code and also, you can directly use it on your webpage:

     

     <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_60824339969167 = new JotformFeedback({ formId: '60824339969167', base: 'https://form.jotform.com/', windowTitle: 'EFT Level 1 Registration', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>   <button type="button"><a class="btn lightbox-60824339969167" style="margin-top: 16px"> Buy Now </a></button>

     

    As it is seen from the above, I added the green parts on it. If you want we can add some rules to change the button's appearance. Please, don't forget to let us know the results.

     

    Regards.