How can I get the embedded JotForm in Wordpress.org to act responsive?

  • Profile Image
    VardiaSverige
    Asked on February 02, 2016 at 03:56 AM

    Hi! When I embed the forms i have made in jotform on my wordpress site, they look absolutely fine on my desktop computer, but on a mobile, they do not adapt (the theme is responsive, so the rest of the page adapts), and the forms that are not embedded adapts on a mobile phone. What to do?

     

  • Profile Image
    Jan
    Answered on February 02, 2016 at 09:46 AM

    I can't access the link/url you've shared. Can you please share the webpage where the form is embedded so that we can investigate the issue.

    Please make your form mobile responsive by following this guide: How to make Forms Mobile Responsive

    If it is still the same, please try to re-embed the form using the iframe method.

    Hope that helps. Thank you.

  • Profile Image
    VardiaSverige
    Answered on February 02, 2016 at 06:30 PM

    Hi! I have updayed the link, you should be able to see it now. I have already made the form mobile responsive following the guide and I tried your suggestion to iframe the form, but the result was worse, the form didn't get responsive and it was cut in the middle.

  • Profile Image
    Chriistian
    Answered on February 03, 2016 at 02:11 AM

    I can't seem to replicate the issue you were having. I checked your website and it seems to display properly on a mobile emulator.

     

    Can you please send us a screenshot of the issue so we can assist you better? We will wait for your reply.

     

  • Profile Image
    VardiaSverige
    Answered on February 03, 2016 at 05:19 PM

     

     

  • Profile Image
    VardiaSverige
    Answered on February 03, 2016 at 05:20 PM

    the above image is what i see in my iphone 6s, and in the end of the form (the second image), the send button isnt even there.

     

     

  • Profile Image
    Chriistian
    Answered on February 03, 2016 at 08:42 PM

    Please inject this css code to your form to adjust the width of the form in mobile.

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

      .form-all{

        width:320px!important;

      }

    }

    Here's a guide that can help: How to Inject Custom CSS Codes

  • Profile Image
    Chriistian
    Answered on February 03, 2016 at 08:47 PM

    Furthermore, you can inject this code to adjust its height:

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

    .form-all{

        height: 2900px!important;

    }

    }

  • Profile Image
    VardiaSverige
    Answered on February 04, 2016 at 11:30 AM

    Hi! It still does not work, but I can see that there is a lot of code in the css box, mabye its conflicting?

    .form-all {

    font-family: "Trebuchet MS", sans-serif;

    }

    .form-all {

    width: 590px;

    width: 100%;

    max-width: 590px;

    }

    .form-label-left,

    .form-label-right {

    width: 150px;

    }

    .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: 14px;

    }

    .form-label {

    font-weight: normal;

    font-size: 0.95em;

    }

    .supernova {

    background-color: none;

    background-color: #ffffff;

    }

    .supernova body {

    background-color: transparent;

    }

    /*

    @width30: (unit(@formWidth, px) + 60px);

    @width60: (unit(@formWidth, px)+ 120px);

    @width90: (unit(@formWidth, px)+ 180px);

    */

    /* | */

    /* | */

    /* | */

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

    .jotform-form {

    padding: 10px 0;

    }

    }@media screen and (max-width: 480px){.form-all{height: 2900px!important;}}

    /* | */

    /* | */@media screen and (max-width: 480px){.form-all{width:320px!important;}}

    }}.supernova .form-all,

    .form-all {

    background-color: none;

    border: 1px solid transparent;

    }

    .form-all {

    color: #555555;

    }

    .form-header-group .form-header {

    color: #555555;

    }

    .form-header-group .form-subHeader {

    color: #6f6f6f;

    }

    .form-sub-label {

    color: #6f6f6f;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #6f6f6f;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    color: #555555;

    }

    .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: #ffffe0;

    }

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

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

    background-repeat: repeat;

    }

    .supernova {

    background-image: none;

    }

    #stage {

    background-image: none;

    }

    /* | */

    .form-all {

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    background-repeat: repeat;

    }

    .form-header-group {

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: center top;

    }

    .form-line {

    margin-top: 5px;

    margin-bottom: 5px;

    }

    .form-line {

    padding: 12px 36px;

    }

    .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: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-all .form-sub-label {

    margin-left: 3px;

    }

    .form-all .form-textarea {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-all .form-sub-label {

    margin-left: 3px;

    }

    .form-all {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-section:first-child {

    -webkit-border-radius: 6px 6px 0 0;

    -moz-border-radius: 6px 6px 0 0;

    border-radius: 6px 6px 0 0;

    }

    .form-section:last-child {

    -webkit-border-radius: 0 0 6px 6px;

    -moz-border-radius: 0 0 6px 6px;

    border-radius: 0 0 6px 6px;

    }

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    width: 116px;

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Arial #000000", sans-serif;

    font-size: 14px;

    font-weight: bold;

    }

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    color: #ffffff !important;

    background: #ee3e96;

    box-shadow: none;

    text-shadow: none;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Trebuchet MS", sans-serif;

    font-size: 14px;

    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-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: "Trebuchet MS", 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: #cccccc;

    color: #555555;

    padding: 4px 3px 2px 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: 22px;

    }

    .form-textarea {

    height: 93px;

    }

    [data-type="control_dropdown"] .form-input,

    [data-type="control_dropdown"] .form-input-wide {

    width: 150px;

    }

    .form-buttons-wrapper {

    margin-left: 0 !important;

    text-align: center !important;

    }

    .form-label {

    font-family: "Trebuchet MS", 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: #fff4f4;

    }

    .form-line-error .form-error-message {

    background-color: #ff3200;

    clear: both;

    float: none;

    }

    .form-line-error .form-error-message .form-error-arrow {

    border-bottom-color: #ff3200;

    }

    .form-line-error input:not(#coupon-input),

    .form-line-error textarea,

    .form-line-error .form-validation-error {

    border: 1px solid #ff3200;

    -webkit-box-shadow: 0 0 3px #ff3200;

    -moz-box-shadow: 0 0 3px #ff3200;

    box-shadow: 0 0 3px #ff3200;

    }

    .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__*/

  • Profile Image
    Kiran
    Answered on February 04, 2016 at 01:25 PM

    As I check the website on an Android emulator, it is being displayed without any issue. It seems that the issue is while viewing on an iPhone. I see that the form is now embedded using Javascript embed method. Could you try embedding the form using iframe embed to see if that helps? Also, please try injecting the following code to your JotForm if that makes any difference.

    @media only screen

    and (min-device-width : 375px)

    and (max-device-width : 667px) {

    width: 1px !important;

    min-width: 100%;}

    }

    Please get back to us if the issue still persists. We will be happy to assist you further.