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

    Submit button is much larger in embedded form than in preview

    Asked by CaitlinHicks on April 14, 2016 at 01:50 PM
    Thanks, this helped. Another question for you: do you know why my submit
    button is suddenly so large? It's normal in the JotForm preview and then
    takes up the whole line when I insert it into my website:
    http://lacerlot.com/pages/measurement-guide
    Still trying to work out how to fix the footer.
    Thanks,
    Caitlin
  • Profile Image
    JotForm Support

    Answered by david on April 14, 2016 at 02:02 PM

    Due to the width of the frame the form is embedded to, the submit button thinks the forms is on a mobile device and is setting the width to 100% instead of the width seen in the form preview.  Adding this code to your form should allow the submit button to be the same size in both:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

    .form-submit-button{

    width : 100px; !important;

    }

    }

  • Profile Image

    Answered by CaitlinHicks on April 14, 2016 at 02:21 PM

    Thanks, I see other instructions in the CSS for @media, should I edit those? Not sure where to place this code: 

     

    @import "https://fonts.googleapis.com/css?family=Cardo:light,lightitalic,normal,italic,bold,bolditalic";

    .form-all {

    font-family: "Cardo", sans-serif;

    }

    .form-all {

    width: 691px;

    }

    .form-label-left,

    .form-label-right {

    width: 182px;

    }

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

    }

    .form-label {

    font-weight: bold;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    font-weight: normal;

    }

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

    .jotform-form {

    padding: 30px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 30px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 60px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 0;

    }

    }

    /* | */

    .supernova .form-all,

    .form-all {

    background-color: none;

    border: 1px solid transparent;

    }

    .form-all {

    color: #000000;

    }

    .form-header-group .form-header {

    color: #000000;

    }

    .form-header-group .form-subHeader {

    color: #1a1a1a;

    }

    .form-sub-label {

    color: #1a1a1a;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #000000;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    color: #1a1a1a;

    }

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

    }

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

    margin-bottom: 0px;

    }

    .form-line {

    padding: 11px 17px;

    }

    .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: "Cardo", sans-serif;

    font-size: 14px;

    font-weight: normal;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Cardo", sans-serif;

    font-size: 13px;

    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: "Cardo", sans-serif;

    }

    .form-section {

    padding: 1px 3px 1px 3px;

    }

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

    }

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

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

    width: 150px;

    }

    .form-label {

    margin-bottom: 3px;

    margin-right: 0;

    }

    .form-label {

    font-family: "Cardo", 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__*/

  • Profile Image
    JotForm Support

    Answered by david on April 14, 2016 at 03:22 PM

    Add the code in my post at the very bottom of the current code.  It should overwrite and code that is currently causing the submit button to be 100% width.

  • Profile Image

    Answered by CaitlinHicks on April 18, 2016 at 04:39 PM

    Hi, thanks again for your help, unfortunately it did not make a difference to the size of the button: http://lacerlot.com/pages/measurement-guide

     

    Also, I've enabled scrolling but it doesn't seem to be working within the form?

  • Profile Image

    Answered by Huberson on April 18, 2016 at 06:11 PM

    It looks like the change only apply on the form when previewed from direct link. Can you try getting the IFrame code and re-embed the form again.

    Also, I've enabled scrolling but it doesn't seem to be working within the form?

    The scrolling seems to work but since the page is long enough to display the form contents, it does not display.

     

    Let us know if the changes apply to the submit button after you re-embed the form.

  • Profile Image

    Answered by CaitlinHicks on April 18, 2016 at 10:02 PM

    Unfortunately this didn't work to shrink the submit button. 

    Also, I noticed in testing that when I hit the return key it automatically submits the form. Is there someway to disable that? Users might hit return when they mean to navigate to the next question vs submitting the entire survey. 

     

    Thanks!!

  • Profile Image
    JotForm Support

    Answered by beril on April 19, 2016 at 03:17 AM

    I've checked your CSS code there was an additional ; sign in your code. We would appreciate it if you could change the code as you see below:

     

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

    .form-submit-button{

    width : 100px !important;

    }

    }

    .form-submit-button{

    width : 100px !important;

    }

    At that time it will work as expected. If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image
    JotForm Support

    Answered by beril on April 19, 2016 at 03:20 AM

    I've created a separate thread for your second question, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

    https://www.jotform.com/answers/821673