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

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?

 

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.

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.

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.

 

 

 

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.

 

 

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

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

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

.form-all{

    height: 2900px!important;

}

}

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

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.