Why has the text and layout of the form changed when it is accessed on a smartphone?

  • acondon
    Asked on March 24, 2016 at 1:55 PM

    I have imbedded the link/code of the form into my website, where the layout has remained unchanged when I view it from my laptop. However, when I go to view the form on the website from my smartphone, the form has changed - the font is smaller in some sections, but not others, and the white boxes (for the answers) are different sizes (the date of birth for example, has changed from the 3 small boxes next to eachother to 3 long white boxes that fill accross the whole page). Is there a way that this can be avoided or rectified? 

    Many thanks. 

  • Ben
    Replied on March 24, 2016 at 2:15 PM

    Yes, we can help you with the changes. The reason why it did so is to be mobile responsive. What this means is that the fields change their sizes to be of optimum size to fill out on mobile devices, such as phones and tablets.

    However as this is accomplished through the CSS, it is possible to make all of the required changes and make it look as you wish.

    Do let us know the exact fields that you wish to change, and the URL to the page on your website where the form is embedded. This will allow us to see the form and what changes would be needed on the same.

  • acondon
    Replied on March 28, 2016 at 12:50 PM

    Ok, thanks Ben.

    So the first URL is http://www.physiocliniconline.com/#!the-initial-assessment-form/d8gmo

    The second URL is http://www.physiocliniconline.com/#!the-follow-up-assessment-form/eabrx

    The issues for both links/forms are the same:

    1. The Full Name, Last Name and Date of Birth boxes (5 in total) should not be the width of the form - can they be made shorter?

    2. I want the font size for all the questions and answers to be the same, including all the tickbox options and the terms and conditions at the end. However, perhaps there is a size in between the 2 that have been used on the smartphone lay out?

    I look forward to hearing from you. Kind regards,

    Aisling

  • acondon
    Replied on March 28, 2016 at 12:52 PM

    Apologies, in addition to the above, I wonder if it is still possible to leave the form titles and sub-titles the larger font size?

    More specifically, for the first URL, 'Initial Assessment Form' and 'Relevant Medical History', and then for the second URL, 'Follow-up Assessment Form' and 'Your Rehab Programme'.

    Many thanks

    Aisling

  • Kevin Support Team Lead
    Replied on March 28, 2016 at 2:42 PM

    I have cloned your form and applied the changes you requested, I tried to made one code that could be applied to both forms instead of creating two separate codes, now the only change that you will need to do in one of your forms is replace the current text field with the Heading field.

    On this form: http://www.jotformeu.com/form/53403836629359. Replace the current field with the Heading field. 

    Why has the text and layout of the form changed when it is accessed on a smartphone? Image 1 Screenshot 30

    Why has the text and layout of the form changed when it is accessed on a smartphone? Image 2 Screenshot 41

    Now, you only need to inject this CSS code in your forms: 

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        label,.form-submit-button, .form-submit-reset, .form-submit-print {

            font-size: 40px !important;

        }

        .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input{

            font-size: 2em !important;

        }

     

        [data-type="control_fullname"] span {

            width: 49%;

        }

     

        [data-type="control_datetime"] span {

            width: 49%;

        }

     

        .form-header-group .form-header {

            font-size: 40px;

        }

    }

    You may change the highlighted values and adjust them to show the size or width that you need in your forms. 

    This guide will help you to inject the CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You may also see my cloned form with this CSS applied before to apply it on your form, click on this link.

    Do note that you will need to re-embed your form after injecting the code. 

    Do let us know how it goes, and if there is something that needs to be changed. 

     

  • acondon
    Replied on April 1, 2016 at 4:41 AM

    Thank you for your help. I have injected the code, however I am afraid that it still doesn't look right on the smartphone. Can it not just appear like it does on a computer screen? Even if that means the text is small? The Date of Birth boxes are still too big, and the texts are different sizes, and some of the answer tick-boxes are displayed in a mess rather than in an order or in columns. 

  • Ben
    Replied on April 1, 2016 at 9:57 AM

    Please do try to add the following CSS to your form as well:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    label, .form-submit-button, .form-submit-reset, .form-submit-print {
        font-size: 20px !important;
    }
    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
        font-size: 1em !important;
    }
    .form-header-group .form-header {
        font-size: 25px;
    }
    }

    When you do, please do add it after all the other CSS codes in there, making it more important than them - which should in turn make the text and boxes smaller.

    Do of course let us know how it goes and if any additional changes are required.

  • acondon
    Replied on April 1, 2016 at 10:18 AM

    Hi Ben,

    I really appreciate your effort, but this hasn't changed anything. This latest additional CSS code made the writing go smaller again, but still different sizes and still the wrong format on a smartphone. With just the initial CSS code, the writing is larger but still different text sizes, there are boxes that are still too long and there is still a section of messy tick-boxes. Shall I specify which ones?

    Kind regards,

    Aisling 

  • Ben
    Replied on April 1, 2016 at 11:44 AM

    I took a look at the following form Aisling: http://www.jotformeu.com/form/53403836629359 but it seems that it does not have the CSS code that I had mentioned.

    I made a clone of the same and added the CSS above and it seems to be working for me. You can see it here: https://form.jotform.com/60914860522959

    Now the above was intended just to set the size of the text and then allows us to work on the other issues. Now looking at all, I made few modifications to the CSS.

    This is the complete CSS:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    label, .form-submit-button, .form-submit-reset, .form-submit-print {
        font-size: 14px !important;
    }
    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
        font-size: 1em !important;
    }
    .form-header-group .form-header {
        font-size: 25px;
    }
    [data-type="control_datetime"] span {
        width: 23%;
    }

    [data-type="control_datetime"] span.date-separate {
        display: none;
    }
    div.form-multiple-column span {
        display: block;
        float: none;
    }
    }

    It also fixed the checkboxes on the following field:

    11) Have you had, or been referred for, any investigations for this problem?

    - The issue was that it was set to be in 3 columns, so there was room for few of them to be in the same line, however code above makes them all fall in line (one bellow the other) now.

    You can check the same on your phone by checking this link: https://form.jotform.com/60914860522959

    If something is still off, it would be best if you could capture the screenshot of the same and upload it here for us to check it out (please note that you need to upload it over the thread, sending it over email would not work).

    This is the link to this thread: https://www.jotform.com/answers/802066

  • Aisling Condon
    Replied on April 5, 2016 at 5:46 AM

    Thankyou very much Ben, that seems to have corrected pretty much all of the issues, i just changed the way some of the text was written (as text rather than next to a text box) which has helped with the font size issue. 

    Thank you once again for all of your help and advice, I sincerely appreciate it. 

  • Ashwin JotForm Support
    Replied on April 5, 2016 at 7:05 AM

    Hello,

    On behalf of my colleague, you are welcome. I am glad to know that your issues are resolved.

    Do get back to us if you have any questions.

    Thank you!