Form Alignment Problems using source codes

  • Profile Image
    palent
    Asked on June 23, 2013 at 10:55 PM

    I am having a problem with some extra code appearing in my forms, and the email input box extending to far out the form area. I had tihis problem with the last from I created in this template and you sent some css to fix it. I might would help if you could not only come up with a solution, but would tell me how to fix it so I may not have to contact you again. I have attached an image of the problems.

    Thanks

    Leo

  • Profile Image
    Welvin
    Answered on June 24, 2013 at 01:08 AM

    Hi Leo,

    Checking your current web source, I found that you are using the form source codes. Do you have any further customizations using the source codes? If none, I recommend re-embedding your form using our iframe method: How to Get Form iFrame Codes. That should help you resolved the problem.

     

    Thanks

  • Profile Image
    palent
    Answered on June 24, 2013 at 07:29 AM

    Thanks for your quick response. The only problem I am having with the iFrame and other codes is the way the forms show up in or don't show up in mobile devises. The html works in everything.

    Thanks

  • Profile Image
    Welvin
    Answered on June 24, 2013 at 09:44 AM

    Hi,

    There's a conflict between your website scripts/codes and Jotform's source codes, that is the main cause of the issue with the alignment so with the arrows/bullet points.

    The iframe should work in mobile devices. Our forms are optimized to work with most of the mobile devices. Anyway you can send us a screenshot of the said problem with viewing the form with mobile? 

     

    Thanks

  • Profile Image
    palent
    Answered on June 24, 2013 at 10:45 AM

    Hello,

    On June 2th Abajan sent me the following solution:

    In your web page, please replace the form's CSS with this and let us know if the result is okay.

    .form-label {
    width: 150px !important;
    }
    .form-label-left {
    width:150px !important;
    }
    .form-line {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: -9px !important;
    }
    #cid_24 {
    width: 209px;
    margin-left: 3px;
    }
    .form-line-error {
    background: none;
    }
    .art-block ul>li:before {
    content: none;
    }
    .form-label-right{
    width:150px !important;
    }
    .form-all{
    width: 230px;
    background: url("http://jotform.us/images/big-back.png") repeat-x scroll 0% 0% rgb(241, 241, 241);
    color:Black !important;
    font-family: 'Verdana';
    font-size: 18px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
    color:Black;
    }

    This worked fine. Can you reproduce this for the form I am working on?

    Thanks
  • Profile Image
    jefreylandicho
    Answered on June 24, 2013 at 11:46 AM

    I have look at your website and was able to reproduce the form without any issue.

     Do you have any other you are currently working on?If yes, please provide form id or link.