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

    Can I have my forms height change automatically when embedded to a Wordpress.com page?

    Asked by sannaser on March 21, 2016 at 01:27 PM

    on wordpress. com blog . http://sannaser.org/formulario-medico/ 

    doesnt work , auto height?

    here the code html use 

    [embed width="590"height="400"]https://form.jotformz.com/form/60756181830658[/embed]

    please help

  • Profile Image
    JotForm Support

    Answered by david on March 21, 2016 at 01:35 PM

    I believe if you do not specify the height and width, the space allowed for the form will be set automatically. 

    http://www.jotform.com/help/299-How-to-Embed-Form-to-Wordpress-com

  • Profile Image

    Answered by Sanna a  on March 22, 2016 at 10:59 AM

     The height on the form is ok. Option auto

    on embeding on wordpress blog the auto height 

    Is missing 

    hard to configure the size height and width

    we need help.

  • Profile Image
    JotForm Support

    Answered by david on March 22, 2016 at 11:29 AM

    You can try changing the height to 100% as well:

    <iframe width="100%" height="825" src="//oembed.jotform.com/form/60756181830658"></iframe>

    Since there is no script to automatically change the height, you may indeed need to specific the exact height.

  • Profile Image

    Answered by sannaser on March 22, 2016 at 09:21 PM

    our css here 

    .form-all {

    font-family: "Lucida Grande", sans-serif;

    }

    .form-all {

    width: 540px;

    }

    .form-label-left,

    .form-label-right {

    width: 150px;

    }

    .form-label {

    white-space: normal;

    }

    .form-label.form-label-auto {

    display: inline-block;

    float: left;

    text-align: left;

    width: 150px;

    }

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

    }

    .form-checkbox-item label,

    .form-radio-item label {

    font-weight: normal;

    }

    .supernova {

    background-color: #f1efef;

    background-color: rgba(248, 247, 243, 0.04);

    }

    .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 rgba(229, 226, 211, 0.04);

    -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: 480px) and (max-width: 539px) {

    .jotform-form {

    padding: 30px 0;

    }

    }

    /* | */

    /* | */

    @media screen and (min-width: 768px) {

    .jotform-form {

    padding: 60px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 0;

    }

    }

    /* | */

    .supernova .form-all,

    .form-all {

    background-color: #f1efef;

    border: 1px solid transparent;

    }

    .form-header-group {

    border-color: #d9d4d4;

    }

    .form-matrix-table tr {

    border-color: #d9d4d4;

    }

    .form-matrix-table tr:nth-child(2n) {

    background-color: #e5e1e1;

    }

    .form-all {

    color: #171797;

    }

    .form-header-group .form-header {

    color: #171797;

    }

    .form-header-group .form-subHeader {

    color: #1e1ec3;

    }

    .form-sub-label {

    color: #1e1ec3;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #171797;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    color: #1e1ec3;

    }

    .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(255, 255, 255, 0.75);

    }

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

    }

    .supernova {

    background-image: none;

    }

    #stage {

    background-image: none;

    }

    /* | */

    .form-all {

    background-image: url("https://www.jotform.com/themes/css/|nobackground|");

    background-image: none;

    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: 2px;

    margin-bottom: 2px;

    }

    .form-line {

    padding: 11px 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-dropdown {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    -webkit-appearance: none;

    -moz-appearance: button;

    appearance: none;

    margin: 0;

    }

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

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Lucida Grande", sans-serif;

    font-size: 14px;

    font-weight: normal;

    }

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    color: #171797 !important;

    background: #66e618;

    box-shadow: none;

    text-shadow: none;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Lucida Grande", 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: "Lucida Grande", 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 {

    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-dropdown {

    -webkit-appearance: menulist-button;

    background-color: #f8f7f3;

    }

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

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

    width: 150px;

    }

    .form-dropdown {

    margin: 0;

    border-color: #a6a6a6;

    -webkit-appearance: menulist!important;

    -moz-appearance: menulist!important;

    appearance: menulist!important;

    border-width: 1px;

    }

    .form-label {

    font-family: "Lucida Grande", 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% !important;

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

    .form-section.page-section {

    position : sticky;

    }.direct-embed-widgets {}.form-image {

    width : 200

    px;

    }.form-pagebreak {

    height : 70px;

    }.supernova .form-all {

    border : 1px solid #e6e6e6;

    box-shadow : 0 3px 9px rgba(0, 0, 0, 0.1);

    }form-all {

    background : transparent;

    }.form-line.form-line-column.form-col-5 {}#cid_73 img.form-image {}.form-line {}

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 22, 2016 at 10:48 PM

    You can inject the css below to specify the height of your form using css:

    .jotform-form {

        height: 825px!important;

    }

    Here's how: How to Inject Custom CSS Code

    Let us know if you need further assistance.
    Regards.