Form and button acting abnormal

  • Profile Image
    majmer
    Asked on December 03, 2014 at 11:14 PM

    Just changed my form font and width and now its acting abnormal , all big brackets are showing up very long , till end of the form.

    http://www.jotform.com/?formID=30358455430451

     

    Button problem , in the form i have choose red color (submit button) , but when i open my site from mobile  there its shows white color or different color please fix it.

    http://www.jumbosupermall.com/#!custom-order-page/c21c0  (open it from mobile to see the problem)

     

    This button Submit button color problem showing in all my forms.  Note:(only mobile site is having problem on desktop site button are showing ok or normal) 

     

     

  • Profile Image
    val
    Answered on December 04, 2014 at 02:06 AM

    Hi,

    There is a conflict on your site responsive layout. I would suggest you to use our Responsive Form, please check our screenshot below.

    Hope this help!

     

    I have moved your other question to new thread and you will be answered here:

    http://www.jotform.com/answers/469194

    Thanks.

     

  • Profile Image
    majmer
    Answered on December 05, 2014 at 10:03 PM

    Hello,

    Thanks for the reply , settings changed to Responsive Form.

    We have made this form one year back and many times we have changed the settings of the form and then it has worked perfectly on the website,  but this first time this abnormal length is box has happened. 

    The only difference we have can see , now in jotform editor our form is perfect (first it was not) but again in the form preview its  showing abnormal there.

    please fix it

    best regards.

     

  • Profile Image
    Shadae
    Answered on December 06, 2014 at 09:54 AM

    Hi majmer,

    I am able to replicate the issue that you are experiencing. Enabling the responsive option in within the form designer will resolve the issue.

    To launch the form designer, you would enter the form builder, select design style and select the form designer.

    Once in the form designer, under the design tab select the "Form Layout" option

    Check the box that says "Make this form responsive"

    This will resolve the issue that you are experiencing.

    I hope this helps! Please inform us if you need further assistance.

  • Profile Image
    majmer
    Answered on December 10, 2014 at 02:05 AM

    Hello.

    As per instruction we did changes from form layout we clicked on " form responsive" and save the form.

    But same old result , please fix it the issue , ASAP.

     

    regards,

    Jumbo Super Mall

  • Profile Image
    val
    Answered on December 10, 2014 at 03:54 AM

    Hi,

    Upon checking your site it seems that your form is fixed, even I view this form I didn't find any issue about the abnormality of your form or maybe you need to remove some space of your form fields? if so, please find this CSS code to your Form Styles.

    Find this CSS code.

    .form-line {
    padding: 12px 36px;
    }

    Replace to this new one.

    .form-line {
    padding: 0px 36px;
    }

    Please check out this demo.

    Hope this help.

    Thanks.

  • Profile Image
    majmer
    Answered on December 11, 2014 at 01:38 AM

    Hello,

    We did it, what you told us to, but same old thing nothing happened.

    First note in the form editor form , our form is perfect ,boxes sizes is normal etc and when i see preview of the form , there form is showing abnormal with lengthy boxes etc.

    Please fix it.

    Attach picture so you can understand the problem.

     

  • Profile Image
    val
    Answered on December 11, 2014 at 07:50 AM

    Hi,

    Our apologies, So mean you don't like the interface of this form and you want a style like this form? if so, please cloned this form and check it if that is what you want. :)

    Thanks.

  • Profile Image
    majmer
    Answered on December 12, 2014 at 01:16 AM

    Hello ,

    As per instruction we cloned the form, but it didnt help, in the form editor form , our form is perfect ,boxes sizes is normal etc and when i see preview of the form , there form is showing abnormal with lengthy boxes etc.

    Our Previous reply , attach pictures will help you to understand. 

    Why you asking us again and again to fix the problem, please fix the form at your end, so we have a peace of mind,

    We didnt understand what you meant by, So mean you don't like the interface of this form and you want a style like this form? please explain in easy english. 

  • Profile Image
    val
    Answered on December 12, 2014 at 07:20 AM

    Hi,

    Sorry for not clearing my guide. Anyway, I mean is, this is your form am I right? I created a cloned form to check you what is differences on each forms and base on my understanding regarding your screenshot you need to make your form like when you preview and you don't like the stretchable fields right? so now please try clone my cloned form and preview it, if there are any stretchable fields please let us know so that we can fix this issue.

    Here is the guide on how to clone your form.

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    And if you only need the CSS codes, here is my CSS codes copy this to your Form Styles and here is the guide on How to Inject Custom CSS Codes.

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

     

    .form-all {
    font-family: "Helvetica", sans-serif;
    }
    .form-all {
    width: 345px;
    max-width: 345px;
    background-color: #0088cb;
    }
    .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: 12px;
    }
    .form-label {
    font-weight: bold;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    font-weight: normal;
    }
    .form-sub-label {
    color : #000000;
    }.form-line-active {
    background-color : transparent;
    }.form-line-error {
    background : none repeat scroll 0 0;
    }.form-required {
    color : #2D03FF !important;
    }.form-required {
    color : #000000;
    font-size : 22px;
    margin-left : 3px;
    }

    Also, I have created screencast for you to see if this is what you want.

    Hope this is a clear instructions for you.

    Thanks.