Injected CSS affecting form layout in the JotForm Builder

  • xtralease
    Asked on October 14, 2014 at 6:57 PM

    In addition, I think I broke the form in the backend with some injected css.  You can see that below.

     

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

  • Ashwin JotForm Support
    Replied on October 15, 2014 at 12:00 AM

    Hello xtralease,

    I did check your form with its direct URL and it seems to work fine. The issue seems to be in the editor where part of your form is not visible. Please check the screenshot below:

    http://submit.jotform.com/uploads/forum/guest_42848967446069/1413345352formEditor.gif

     

    The custom css code you have injected in your form has form height related code which is causing this issue. You also have width css code which has syntax error. Please copy the complete custom css code from the following URL and inject it in your form:  http://pastebin.com/VyE3d6ez 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • xtralease
    Replied on October 15, 2014 at 10:01 AM

    This worked but I think it broke the validation.  It now goes to the next step (or thank you page) even if I don't fill out the fields.

  • Ashwin JotForm Support
    Replied on October 15, 2014 at 10:28 AM

    Hello xtralease,

    That is very unlikely. Changing the css code will have no impact on your form's validation or conditions. I did test your form and did not find any issue with that. The conditions and validation seems to work as expected. Please check the screenshot below:

    https://cms.jotform.com/uploads/image_upload/image_upload/ashwin_d/29830_formCon.gif

     

    Have you embedded your form in your web page? Please share the web page URL and we will take a look. It may an issue related to code conflict and embedding your form with its iFrame embed code will solve the problem.

    Do get back to us with the web page URL if the issue persists.

    Thank you!

  • xtralease
    Replied on October 15, 2014 at 10:33 AM

    I don't know how this is possible because the validation is definitely broken on my end.  Maybe we are hitting different servers?  I've tried the preview in both Chrome and Firefox.  I know this isn't an iframe issue because the validation issue occurs on the Jotform preview, in addition to when I embed it on my page.

  • xtralease
    Replied on October 15, 2014 at 10:38 AM

    Further clarification on this after doing further testing... When I preview with the Preview button and get the popup of the form, the validation doesn't work.  However, when I view the form it's own browser page the validation does work.  I hope that helps.

  • jonathan
    Replied on October 15, 2014 at 11:23 AM

    @xtralease

    Hi,

    It is also possible that the issue originates on the browser's settings. 

    Please understand that validations usually are javascript application. 

    Perhaps javascript is disabled on the browser? Try checking on different browser also.

    Please inform us if issue persist.

    Thanks.

     

  • xtralease
    Replied on October 15, 2014 at 11:45 AM

    This issue occurs in all three browsers, so it's not a settings issue.

     

    It occurs on the Jotform.com Preview button popup, as well as our landing page (see below).  The only thing we changed was the css that you provided, and the validation was working fine before the css change.

     

    http://contact.xtralease.com/trailer-rental/k.html

  • jonathan
    Replied on October 15, 2014 at 12:08 PM

    I made a test using the embedded jotform in your website. And I was able to reproduce the reported issue.

    No validation is being triggered on the jotform for all the *Required fields.

    Injected CSS affecting form layout in the JotForm Builder Image 1 Screenshot 30

     

    BUT I also made a test using this time the direct URL of jotform   http://www.jotform.us/form/42854175945162

    And validation work fine

    Injected CSS affecting form layout in the JotForm Builder Image 2 Screenshot 41

     

     

    It could be a script conflict that is preventing the validation from working properly.

    Please try re-embedding the jotform into your website using instead its iframe embed code

    Follow this user guide :  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

     

    Inform us if issue still remains.

    Thanks.

     

     

     

     

     

     

  • xtralease
    Replied on October 15, 2014 at 12:40 PM

    We are already using the iframe code, which you all provided in this ticket: http://www.jotform.com/answers/443054

     

    As I've been trying to explain, the same behavior occurs on the Jotform editor when I click the Preview button on the top left and it prompts an in-browser pop-up of the form.  This leads me to believe that it has nothing to do with the iframe code we're using, and rather something in the form itself.  Don't you agree?

  • jonathan
    Replied on October 15, 2014 at 1:01 PM

    I am sorry if this is taking quite long already. But this case is quite weird as the we could not reproduced the issue on the form itself. 

    As you can see already, the reported issue only happens on the embedded jotform on the website.

    I did notice a difference in your embed code.. there is a ?nojump extension in the URL 

     

    Injected CSS affecting form layout in the JotForm Builder Image 1 Screenshot 20

     

    I understand that it was added base on my colleagues suggestion from this thread http://www.jotform.com/answers/443054

    But can you please try without it for now.

    Base on the other thread, it seems that the validation stop working after adding the ?nojump parameter.. So, if we can remove it and do further test, we will be able to pinpoint the cause of the current validation issue.

     

    Thanks.

     

     

     

  • xtralease
    Replied on October 15, 2014 at 1:16 PM

    I placed the original iframe code, but it didn't fix the issue.  I left that code on the landing page.

  • jonathan
    Replied on October 15, 2014 at 1:41 PM

    Can you please remove also the Formisimo Analytic Widget on the jotform.

     

    1413394692zzz%202014 10 16%2001 Screenshot 10

     

     

    I can see an unexpected token error when viewing the browser debug console

    1413394838zzz%202014 10 16%2001 Screenshot 21

     

    it could be due to the Formisimo Widget. Try remove it and let us test again.

     

    Thanks.

     

     

     

     

     

  • jonathan
    Replied on October 15, 2014 at 1:43 PM

    If I can get confirmation that it was the caused of issue, then, I can now properly submit a bug ticket that identified caused. This will our developer to fix the mentioned issue faster since the source was identified already.

    Thanks.

  • xtralease
    Replied on October 15, 2014 at 1:45 PM

    Just removed it, but it doesn't look like it fixed anything.

    I also cloned the format to try some different things, but nothing has helped.  I might try rebuilding the form from scratch to see if that makes a difference.

     

  • jonathan
    Replied on October 15, 2014 at 1:56 PM

    I am truly sorry about this. Yes, I also checked and you have done as requested and yet the glitch still happens.

    If OK with you, perhaps we can try embedding a very basic jotform with *Required fields on it.

    Embed it on your website and let us check if the same anomaly happen on an entirely different form.

    Example, create a jotofrm with only Full Name, and E-mail field on it... make them *Required.

    Let us check if validation will work as needed.. or not.

    Thanks.

  • xtralease
    Replied on October 15, 2014 at 2:22 PM

    This exact form worked yesterday.  I think something just got changed with the code somehow when I made changes this morning.

  • xtralease
    Replied on October 15, 2014 at 2:58 PM

    I think you guys did something on your end today that ruined the validation and/or buttons in iframes.

    I made this conclusion because I created a simple form with two questions and a page break, and it is having the same problem when I click to the Preview icon: http://www.jotform.com//?formID=42875562954165

     

    The form we had discussed earlier today was working perfectly yesterday.

     

  • jonathan
    Replied on October 15, 2014 at 5:19 PM

    Hi,

    Sorry for that. But, yes it seems there was an issue on our side on the iframe embed.

    This was reported earlier when we were trying to fix the problem for your jotform.

    So, it actually have nothing to do with any component on your jotform, instead it was on the embed method when using Iframe embed code.

    Our dev team had immediately patch this when reported.

    You can test your jotform on your website again and you can see the validation is now being triggered for the *required fields

    http://contact.xtralease.com/trailer-rental/k.html

    Injected CSS affecting form layout in the JotForm Builder Image 1 Screenshot 20

     

    Please tell us if issue remains.

    Thanks.