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