The form I've embedded is different from the published form

  • Profile Image
    mayankgarg
    Asked on September 01, 2012 at 10:02 AM

    Hi,

     

    I'm trying to embed a form onto my webpage but the validation error message is different in the normal form preview over the one in the embed. 

    1. I have tried to clear my cache - no result

    2. Used three different browsers: Chrome, Safari and Firefox - no result

    3. Tried to use source code: the form doesn't do validation when I use the source code rather than the embed even with the CSS+JS files downloaded and added into the respective folders and paths corrected.

     

    The correct intended result can be seen here: http://www.jotformpro.com/mayankgarg/hf_adib

     

    This is quite time consuming and I need this to be solved immediately. Please help!

  • Profile Image
    ItalyTech
    Answered on September 01, 2012 at 10:29 AM

    Hi and thanks for contacting us.

    Can you try to replace old embed code with the following code please? 

    <script type="text/javascript" src="//www.jotform.com/jsform/22422702947957"></script>

    After let us know if this solve this inconvenience. Thanks. Alessandro

  • Profile Image
    mayankgarg
    Answered on September 03, 2012 at 01:54 AM

    Hi Alessandro,

     

    I tried that. And while it works, I've lost the injected CSS styles I had placed such as:

    1. Colored textbox

    2. Background wrap color for selected field same as the original background

     

    Here is the custom CSS I've injected:

    .form-label{

    width:150px !important;

    }

    .form-label-left{

    width:240px !important;

    }

    .form-line{

    padding-top:12px;

    padding-bottom:12px;

    }

    .form-label-right{

    width:150px !important;

    }

    .form-all{

    width:880px;

    background:#1A3B63;

    color:#FFFFFF !important;

    font-family:'Lucida Grande';

    font-size:14px;

    }

    .form-textbox{

    background: #10345e;

    border: 1px solid #1e497f;

    height: 30px;

    color: #fff;

    font-size: 1em;

    padding-left: 5px;

    }

    .form-dropdown {

    font-size: 1em !important;

    height: 30px;

    color: #000;

    border: 1px solid #1e4a80;

    }

    .form-header{

    color: #00b6f4;

    }

    .form-radio-item label, .form-checkbox-item label, .form-grading-label {

    color:#FFFFFF;

    }

    .form-line-error{

    background:#183a64;

    /*border:1px solid #fff;*/

    color:#fff;

    }

     

    For now, I'm loading the form as an iFrame but there is a delay in the load of the form. If I could use downloaded CSS and JS versions and get the validation to work, it may help to increase the load time of the form and improve usability.

     

    Thanks,

    Mayank

  • Profile Image
    ItalyTech
    Answered on September 03, 2012 at 04:19 AM

    Hi Mayank. I've injected again your custom css code. Can you try your form and let us know if this satisfy you ?  I wait your response. Thanks. Alessandro