What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Designer ate part of the CSS code resulting in CSS errors

    Asked by glandoreghyc on November 23, 2014 at 05:06 PM

    Hello,

     

    Anyone following my series of thread on the issues i am having using JotForms in Responsive mode must be getting [pretty bored with it by now, but this morning i thought that finally the last of the issues was fixed, this is the thread.

    http://www.jotform.com/answers/463090-More-issues-with-extra-space-at-the-end-of-a-Responsive-Form#7

       But No as it now appears to have broken the fix for the following thread

    http://www.jotform.com/answers/455456-Responsive-Form-and-Hover-Text#33

     

    And also i noted that when i look at the CSS via the Form designer view it indicated that the CSS has 4 errors and  i have not touched anything???. i reinserted the CSS and it looked OK, but the next time i viewed the form via Design view sure enough the CSS showed 4 errors again.

    I have come to the position that using JotForm in Responsive mode is a bit of a lottery... and definitely do not try and use the Hoover Text or Conditional Fields Options as this will totally confuse the Responsive feature...

     

    I am very disappointed in Jot Form at this point the forms seem to be OK as long as you do not touch the Responsive option and then the basic Form design becomes very fragile and difficult to work with.

     

    The basic From is at this location

    http://www.reenoserve.com/ghyc/forms/index.html

     

    And the  basic form design has not been changed in over a year ........ till tonight when i removed the Hoover text and Conditional Fields options, which has in my opinion reduced the effectiveness of the Form.

     

    Thx

     

    John

     

    forms not working form designer next css designer
  • Profile Image
    JotForm Support

    Answered by jonathan on November 24, 2014 at 07:23 AM

    Hi John,

    And also i noted that when i look at the CSS via the Form designer view it indicated that the CSS has 4 errors and  i have not touched anything???.

    Can you please guide us where to check this on your jotform http://www.jotformeu.com/form/42944203808354?

    I understand you must be referring to the CSS Designer, but I could not find it yet using the clone version of your form

     

    Once we understand the problem, we will check further.

    Thanks.

     

  • Profile Image

    Answered by glandoreghyc on November 24, 2014 at 07:32 AM

    To be honest i was getting more than a little fed up with the fragility of the form layout with the added CSS and in Responsive mode. so i removed the CSS.

     

    John

  • Profile Image
    JotForm Support

    Answered by jonathan on November 24, 2014 at 08:38 AM

    Hi John,

    We apologize also for any inconvenience caused by this. Be assure though that our developers are at their best in providing the best form builder/designer around. So any input/feedback our users provide are being put into consideration.

    As to your current issue, can you put back again the CSS codes you used? It will be beneficial for the development if we can see the problem and provide fix for it.

    Thanks.

     

     

  • Profile Image

    Answered by glandoreghyc on November 24, 2014 at 11:52 AM

    OK, I put back the CSS code that originated seemed to work ok, and as you can see from the screen shot below there are no errors shown in fact as soon as i copied the CSS into the space i had a green "bar" come up at the bottom indicated that the CSS styles had been updated OK, this message is only temporary.

     

    After that i saved the form and returned to the normal "DesignView screen ". then returned straight back to the Beta Form Designer screen and the Errors were present again as you can see from the Screen Shot below

  • Profile Image
    JotForm Support

    Answered by Welvin on November 24, 2014 at 01:20 PM

    All you need to do is to remove the unnecessary custom CSS codes to the CSS area. If you hover to the "X" button that represents the error, you will see the message that explains what's the error all about.

    I think you are trying to remove some of the custom CSS codes, but forgot to include the left/right parenthesis. But anyway, I've fixed it for you. ;)

    Let us know if there are remaining issues to the form. 

    Thank you!

  • Profile Image

    Answered by glandoreghyc on November 24, 2014 at 02:44 PM

    Firstly, I do appreciate the efforts of the support on the Forum, but i do get somewhat frustrated at the issues that keep on reoccurring. A Couple of points to make

    The CSS code that was inserted into the sheet was exactly what i was given by a previous JotForm support contributor and it seemed to work Fine

    I never tried to alter it in any way, my level of knowledge in CSS is Zero.

    Why when i saved it originally was the code accepted?????.

    The original code is as follows:-

    /* Desktops and laptops ----------- */

    .form-all {

    margin-top : -75px !important;

    }

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen and (max-device-width : 480px){

    #id_19 .form-description {

    right: -10px !important;

    top: 30px !important;

    }

    }

    /* iPads (portrait and landscape) ----------- */

    @media only screen and (max-device-width : 1024px){

    #id_19 .form-description {

    right: -20px !important;

    top: 10px !important;

    }

    }

    input[type='text']:focus,

    input[type='number']:focus,

    textarea:focus

    {

    font-size : 16px;

    }

    @media screen and (-webkit-min-device-pixel-ratio:0){

    select:focus,

    textarea:focus,

    input:focus {

    font-size : 16px;}

    }

    /*Fix for Full name and submit button being clipped*/

    @media screen and (max-width:768px) {

    form.jotform-form{

    padding:40px;

    }

    }

    @media screen and (max-width:640px){

    form.jotform-form {

    padding-bottom:10px;

    }

    }

    #stage.form-all, #stage > ul.form-all{

    margin-top: 25px !important;

    }

     

    The code that is there now is totally different.........

    it is 

     

    /* Desktops and laptops ----------- */

    .form-all {

        margin-top : -75px !important;

    }

     

    input[type='text']:focus,

    input[type='number']:focus,

    textarea:focus {

        font-size : 16px;

    }

     

    @media screen and (-webkit-min-device-pixel-ratio:0){

        select:focus,

    textarea:focus,

    input:focus {

            font-size : 16px;

        }

     

    }

     

    /*Fix for Full name and submit button being clipped*/

    #stage.form-all, #stage > ul.form-all {

        margin-top : 25px !important;

    }

    I have now reverted the Form to the state it was at when the original code worked ( ie displayed all of the Family Name frame in a smart phone/tablet when the Hoover text was displayed) and also removed the extra unecessary spaces above the first field however it  failed to display the lower part of the Form if the Conditional Code  field of the Family info  was displayed.

     

    Also the added code in the iFrame code has not been added as this removed the lower unnecessary spaces from the Form.

     

    So i am sorry to say that the changes to the CSS Code have failed to resolve the issues i thought were already fixed..... so what is going on behind the scenes there at JotForm please?

     

    John

     

  • Profile Image

    Answered by Ben on November 24, 2014 at 03:46 PM

    Hi John,

    I am sorry to hear that you are experiencing these issues.

    From the screenshots above and now your message it seems that the Form Designer 'ate' part of the code for some reason.

    I tried it myself as well and it seems that it did just the same, so I will raise this to the developers to check.

    They will take a look at this and fix the issue causing this. Once this is done they will update you through this thread.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 24, 2014 at 06:51 PM

    Ben,

    Thanks, 

    I hope a solution is found soon.

     

    John

  • Profile Image

    Answered by glandoreghyc on November 25, 2014 at 12:54 PM

    Any news please

     

    thx 

     

    John

  • Profile Image

    Answered by Ben on November 25, 2014 at 02:01 PM

    Hi John,

    Our developers are looking into the issue, but one colleague has suggested to try and remove the comments from the CSS and save it like that, so I would suggest adding this code:

    .form-all {
    margin-top : -75px !important;
    }
    @media only screen and (max-device-width : 480px) {
     #id_19 .form-description {
      right: -10px !important;
      top: 30px !important;
     }
    }
    @media only screen and (max-device-width : 1024px) {
     #id_19 .form-description {
      right: -20px !important;
      top: 10px !important;
     }
    }
    input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
     font-size : 16px;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0){
     select:focus, textarea:focus, input:focus {
      font-size : 16px;
     }
    }
    @media screen and (max-width:768px) {
     form.jotform-form {
      padding:40px;
     }
    }
    @media screen and (max-width:640px) {
     form.jotform-form {
      padding-bottom:10px;
     }
    }
    #stage.form-all, #stage > ul.form-all {
     margin-top: 25px !important;
    }

    It is basically the same code just without the comments:

    /* Desktops and laptops ----------- */
    /* Smartphones (portrait and landscape) ----------- */
    /* iPads (portrait and landscape) ----------- */
    /*Fix for Full name and submit button being clipped*/

    Our developers are still checking the underling problem, but will update you as soon as there is any new development.

    Best Regards,
    Ben

  • Profile Image

    Answered by glandoreghyc on November 25, 2014 at 07:00 PM

    Ben,

    Thanks for getting back involved in this.

    I did post a reply to your response over an hour ago and it has not been posted..... not sure what is going on.

     

    Ok, I updated the CSS based on the Code you provided and all seems a whole lot better now, i have not tested every Smart phone/Tablet configuration, But it is a lot more reliable on the ones i have to hand which was not the case before.

     

    There must be a way to isolate the beta development work of the new From Designer, so that existing pages can still be maintained as fully operational. I suppose the only way that users do not go anywhere  the new  Form Designer Page.

     

    Thx

     

    John

  • Profile Image
    JotForm Support

    Answered by jonathan on November 25, 2014 at 08:12 PM

    Hi John,

    Actually we have submitted a ticket regarding the bug in the CSS Editor of the Form Designer. 

    The ticket is now currently assigned to one of our developer. 

    I suggest we wait for the updated response from our dev then.

    Thanks.