Field Labels Aligned Incorrectly

  • glandoreghyc
    Asked on January 17, 2016 at 3:37 AM

    Please take a look at the very very small form on the following page:-

    http://glandoreyc.com/classic/

    Please note that the field labels are set to align to the left and they are always on top i have changed form width and played around with Input field widths and i cannot get this fixed.

     

    Help Please?

     

    Thanks

     

    John

  • glandoreghyc
    Replied on January 17, 2016 at 4:59 AM

    Hello,

     

    Further to my original post, see screen shot below of what it looks like when i Preview from the Designer window.

    Field Labels Aligned Incorrectly Image 1 Screenshot 20

     

    Thanks

     

    John

  • jonathan
    Replied on January 17, 2016 at 3:21 PM

    Hi John,

    It seems the width of the label name of your jotform http://www.jotformpro.com/form/60161535575960 was causing the misalignment.

    It is too narrow to be at 40px only.

    Field Labels Aligned Incorrectly Image 1 Screenshot 40

     

    Try increasing it. I test 75px and it was enough.

    Field Labels Aligned Incorrectly Image 2 Screenshot 51

     

    Here is my test form https://form.jotform.com/60165499448972

    Field Labels Aligned Incorrectly Image 3 Screenshot 62

    When you update your form, make sure to re-embed it again on your website to be sure the updated version of the form is on the website.

    Hope this help. Let us know if still not resolve.

    Thanks.

  • glandoreghyc
    Replied on January 17, 2016 at 3:39 PM

    Hello,

     

    Thanks for looking at this, but your solution does not seem to fix this in the live web page.

    This is the Design Page view Screen shot

    Field Labels Aligned Incorrectly Image 1 Screenshot 40

     

    This is the Preview view within the Design Page

    Field Labels Aligned Incorrectly Image 2 Screenshot 51

    And this is the live web site view

    Field Labels Aligned Incorrectly Image 3 Screenshot 62

    But interestingly when the form is first loaded it appears OK then it changes to what you see above.

     

    The HTML item that is the parent of the jotform code is nearly 600px wide and it is set to be flexible and can take all 100% of the width if needed.

     

    Thx for your help

     

    John

     

     

     

  • glandoreghyc
    Replied on January 17, 2016 at 3:44 PM

    Hello,

     

    Something else i have noticed, why is the Submit button so wide? within the Design Form view the field is set to be 80px wide?

     

    Thx

     

    John

  • jonathan
    Replied on January 17, 2016 at 5:16 PM

    Hi John,

    Have you already tried re-embedding the updated form using its iframe embed code?

    If not yet, please try that option first.

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

    If if still not align, when you add the iframe embed code, manually set the width of the iframe to 650px... 

    Field Labels Aligned Incorrectly Image 1 Screenshot 20

    Check if this process fixes the issue. Let us know if still not.

     

     

  • glandoreghyc
    Replied on January 17, 2016 at 7:42 PM

    Sorry, not sure i accept this solution, there is something wrong with the way your form is being displayed.

     

    I can do what you say but that then overrides the responsive nature of the page and will cause issues at smaller screen sizes.

    The form is set up to be 564 px wide which is the width of the HTML wrapper holding the jotform code, and also that wrapper is set to use all available space, which your form is not doing...why not???

     

    And why is the Submit button taking up the full width of teh form, when it is clearly set to 80px wide

    There must be another solution to this issue.

    THX

     

    John

  • glandoreghyc
    Replied on January 18, 2016 at 5:16 AM

    Hello,

     

    Further to my last response, i have done some further experimenting and found the following:-

    If i change the Setting in the Form Preferences to select "this form is Responsive" as below 

    Field Labels Aligned Incorrectly Image 1 Screenshot 30

     

    and also remove the Responsive Widget. 

     

    Then the form is displayed correctly as below:-

    Field Labels Aligned Incorrectly Image 2 Screenshot 41

     

    Perhaps some one at Jotform can explain why this is happening?

     

    THX

     

    John

  • Ben
    Replied on January 18, 2016 at 9:48 AM

    Hi John,

    Actually yes, the responsive options will try to make your form as easy to use on mobile devices as it can.

    This is accomplished by checking the width of the form so that it can detect if the width seems to be of a mobile device or not and as such to change the fields accordingly.

    You will quickly notice that it is doing this by checking the submit button - on mobile layout it will take as much width as it can - to allow easier submission. This is also what you were experiencing.

    Now you can turn on the responsive option and have your form look great as well while embedded. To do that you need to apply a specific CSS code that will counter the mobile responsive widget and/or form setting.

    Now since the responsive option is not turned on, I can only guess, but I believe that the following CSS would be what you are looking for (after turning on the responsive mode again):

    @media screen and (max-width: 564px) and (min-width: 564px) {
      .form-label { max-width: 50px; }
      .form-line > div.form-input { max-width: 400px ! important; }
      button.form-submit-button { max-width: 80px; }
      .supernova div.form-all, div.form-all { box-shadow: none; }
    }

    You should add it to your form by following these steps: Inject Custom CSS Codes

    Do let us know how it goes John.

  • glandoreghyc
    Replied on January 18, 2016 at 10:20 AM

    Ben,

     

    Just to confirm, the Responsive Mode is now ON, so do i need the CSS you suggest please?

     

    John

  • Ben
    Replied on January 18, 2016 at 11:38 AM

    I am looking at your website John, but it seems that the form is still as before, but yes, when you turn on responsive option that you had set before:

    How to make forms Mobile Responsive

    or by adding Mobile responsive widget (or both)

    Once done, you can add the CSS above to your form and check how it looks. If something needs to be re-adjusted, that is OK. Do leave it as it is (at that point) and we will take a look at it and help you sort it all out :)

  • glandoreghyc
    Replied on January 18, 2016 at 11:58 AM

    Ben 

    sorry to. be a nuisance but this issue started  because I had the Responsive Widget set up and struggled to make any sense of what was happening ... Take a look at the previous posts I made on this  thread.

    it was only when I removed the responsive Widget and used the preferences setting to set Responsive did this very small form begin to work as expected.

     

    thx 

     

    John

  • glandoreghyc
    Replied on January 18, 2016 at 1:12 PM

    Ben,

     

    I have tried a few more of the combinations of the solutions.

    If i use your CSS and the Responsive Widget i get this, which is not what i am looking for:

    Field Labels Aligned Incorrectly Image 1 Screenshot 30

     

    If i use your CSS and the Responsive option in the Form Preferences i get this, and this is the solution i have been trying to get from the start ?

    Field Labels Aligned Incorrectly Image 2 Screenshot 41

     

    There is one more Responsive option to use in the Designer page but i haven't tried that yet..... why is this happening.

     

    By the way thanks for the CSS to get rid of the Supernova shadows???

     

    Thanks Ben but there are a number of unanswered questions i believe?

     

    John

  • Ben
    Replied on January 18, 2016 at 1:26 PM

    Hi John,

    Lets try to answer each of them then :)

    First, I am glad to see that the CSS and responsive option within the form builder are what you were after.

    In regards to your questions, I will try to answer each with a question mark, but do let us know if I miss any or if you have any new ones.

    If i use your CSS and the Responsive option in the Form Preferences i get this, and this is the solution i have been trying to get from the start ?

    Great. This is the one that I would suggest using then - Form Preferences responsive option together with the CSS I gave above.

    There is one more Responsive option to use in the Designer page but i haven't tried that yet..... why is this happening.

    Quite right. This is why I have given the link to the guide above.

    There are actually 3 options to make forms responsive:

    1. Using Mobile Responsive widget

    2. Using Form Preferences Responsive form option

    3. Using Responsive Form option in Form Designer

    If you think that is a bit complicated, there is more :)

    Each of the 3 on its own gives your form a certain mobile responsiveness, but a combination of 2 or more will result in a different layout.

    This way you can find the best mobile responsive option for your form - by simply checking them out all or some until you find the one that works best for you.

    Based on what you have mentioned, I would keep it as it is, but you should be able to test things our as well.

    By the way thanks for the CSS to get rid of the Supernova shadows???

    You are welcome. The following part from the CSS above did that:

    .supernova div.form-all, div.form-all { box-shadow: none; }

    I thought that it would not look nice if it was shown.

    Thanks Ben but there are a number of unanswered questions i believe?

    You are welcome John and I do think that I got them all, but please do let us know if there are any others :)

  • glandoreghyc
    Replied on January 18, 2016 at 2:28 PM

    Ben,

     

    Thank You,

     

    You have helped me out in the past and i appreciate your commitment.

     

    I am however, still concerned that Jotform designers do not have a real "grip" (understanding) of Responsive Design in it's various implementations.

     

    Before you became involved there were responses that were inconsistent and i am aware that those people that tried to help were doing their best, and in the past those contributors helped solve some serious issues i had with jotform.

    Fundamentally to have three separate options and it is up to the user to choose which is the best seems like  Jotform are not taking responsibility.

     

    I think it would be advisable to at least warn the users that there are three options and they could/will/probably act differently so that users should take note. Surely Jotform should take the lead and offer some advice before we get to the Support forum stage.

     

    Thanks Again.

     

    John

     

     

  • Ben
    Replied on January 18, 2016 at 4:23 PM

    I understand what you mean John, as do my colleagues working in support. I can assure you that all of us are doing our best to help everyone needing the same.

    As such I do want to mention one other guide:

    How To Make Mobile Friendly Forms on JotForm

    - Next to the one I shared above: How to make forms Mobile Responsive

    As mentioned, we understand what you mean, especially since there re also themes that could make your form responsive (next to the 3 above), but let me explain what has happened.

    The option in Form Preferences came to life first (when looking at form builder and form designer). Many people started using it and liked it how it was. As such we could not update the same to work as it was needed in order to work on all devices properly.

    Those that had issues and the first option turned on, they simply added a bit of CSS and all was good and they did not want to need to make them again all over.

    Now because of that additional option was introduced, making sure that all new devices are covered - the option within the Form Designer.

    The Mobile Responsive widget was actually made years back by my colleague from support (Elton) at which time not as many mobile devices were used and when the two options were not existing. This was and still is a great widget and an idea.

    Now, this brought us to a position where there are many people (and many with over 100 forms) using specific setup and if we were to remove one option, it was bound to impact a great umber of people - seeing how we have over 2 million of users (1.6 mill at that point), that is a very large group.

    Instead of that it was decided that our developers had to design a way to save different setup values and respect all options that were made by form owners like yourself.

    As Theme Store came into play and many people missing that there is the mobile responsive option mobile responsive themes were made and sold, and as such indirectly, enabled additional way of making the form responsive.

    I hope that this sheds a bit more light on the mobile responsive option.

    I will also update both guides above to interlink them since both seem popular and to include the information that different setup could lead to different experiences as per your comment above John.
    Do of course let us know if there is anything else that we can do for you :)

  • Ben
    Replied on January 18, 2016 at 4:42 PM

    Just wanted to let you know John that I have updated the guide here: How To Make Mobile Friendly Forms on JotForm so feel free to check it out and let us know if you think that we should add anything else next to it.

    If it raises any questions that is OK with us, just let us know of the same :)

  • glandoreghyc
    Replied on January 18, 2016 at 5:44 PM

    Ben,

    Ok, Thanks for a very comprehensive response.

     

    I must admit that when i started creating Forms with Jotform and the issue of Responsive Design emerged, the only option was the Widget.... which i used, the Preference setting could have been there but to be hones once the Widget was identified, then it seemed redundant to go looking for any other way to create a Responsive Form.

     

    When the Designer view became an option and then there was the Option to set Responsive Forms within the Designer then to me " this was yet another method of setting Responsive" and the results would be the same as setting Responsive view the Widget or the Form Reference....

    The subtle differences between the three options was never in my mind... Responsive is Responsive is Responsive.... isn't it?????  Apparently not.

     

    What confused me about this problem is that my issue was linked to how the form was viewed on a DeskTop... and the subtle issue here was that the HTML wrapper holding the JotForm code was a flexible HTML field with a max px width of 564 px, which some may consider in the realms of a Smart device   ... ie Responsive......

     

    My experiments to try to establish why i had the issue were speculative and i tried the Responsive setting in Preferences as a Gamble not knowing why or what would happen... a Form displaying incorrectly on a Desktop, because the Form was not correctly set to be Responsive, is still a little confusing to me......  

     

    However i have learnt another important lesson.. you offer "hint fields" in your Form design may i suggest the JotForm look into methods of offering "hints" to From designers when the choose such interesting features like Responsive Form options.

     

    Thank You again for the Comprehensive effort on this , it was a learning curve for me, again...

     

    thx.

    John