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

    Widgets and matrix non responsive on embedded form

    Asked by David  on March 04, 2016 at 07:13 PM

    Hi, 

     

    Part of my form is not showing properly on mobile devices. Help please!

     

    specifically two fields:  

     

    Multiple Text Fields

     

    and 

     

    Matrix fields...

     

    Thanks

    Page URL:
    http://teach.bemusic.al

    Screenshot
    non responsive responsive form
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 05, 2016 at 12:54 AM

    I checked your form and I can see that the multiple text fields appear without any issue. However I did notice that the Matrix is cut off when viewed.

    Allow me some time to investigate this issue and I will get back to you with a possible workaround.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 05, 2016 at 01:37 AM

    After further investigation, I was able to create a custom css to fix the issue with the matrix field. Simply inject this code to your form:

    @media only screen and (max-width: 40em){

    li#id_36{

    width: 350px!important;

    }

    li#id_35{

    width: 300px!important;

    }

    li#id_37{

    width: 300px!important;

    }th, td {

    padding: 1px!important;

    }

    }

    Here's a guide on how to inject CSS: How to Inject Custom CSS Codes

    This is how it would look on mobile once the css is injected.
    (Note: This is a cloned form, where the conditions were disabled to see all the matrices)

    You can check out the cloned form where I tested the css here: https://form.jotform.com/60640272784962 

    To clone it to your account, simply follow this guide: How to Clone an Existing Form from a URL

    Do let us know if you need further assistance.

  • Profile Image

    Answered by hsfsf on March 06, 2016 at 12:40 PM

    Ok well, this pictures are after pasting your css on my form and still im getting the same behavior with those two field I mentioned, the matrix and Multiple Text Fields widget, but even in the name field and the next button you can see how those are being cut off too.

     

    When testing on mobile can you please check this site: http://teach.bemusic.al with is where I want to have my form embedded.

     

    Thanks!

     

     

     

     

     

     

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 06, 2016 at 01:38 PM

    Hello hsfsf,

    I did check your webpage where you have embedded your form and found that you have used your form's script embed code. Please be noted that for your embedded form to be responsive, we recommend to embed form using its iFrame embed code.

    Please embed your form using its iFrame embed code and see if that solved your problem. The following guide should help you how to grab your forms iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by hsfsf on March 06, 2016 at 04:24 PM

    Well, I choose this method because this is the best method you guys provide to publish a form on google sites is to do it under gadgets, pointing to this xml:

     

    http://hosting.gmodules.com/ig/gadgets/file/102235888454881850738/jotform.xml

     

    But ok I just embedded using google's iframe gadget which doesn't need the code but just requires the url... So I guess thats what you were talking about?

     

    Anyhow, I just updated that following your advice and it does look better, at lest the multiple response field is behaving properly but the matrix is still not displaying properly.

     

     

     

     

     

     

     

     

     

    Thanks,

     

    D

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 06, 2016 at 09:03 PM

    You can try adding the yellow highlighted code into the css that you previously injected. This new code should adjust the width of the name and also make the full matrix appear more visible in mobile.

    @media only screen and (max-width: 40em){

    li#id_36{

    width: 350px!important;

    }

    li#id_35{

    width: 300px!important;

    }

    li#id_37{

    width: 300px!important;

    }

    th, td {

    padding: 1px!important;

    width:10px!important;

    }

    table {

        font-size: 0.9em!important;

    }

    li#id_1 {

        width: 340px!important;

     

    }

    }

    Here's a demo so you can see the new changes in action: https://form.jotform.com/60657535679975 

    Do let us know if you need further assistance.

     

  • Profile Image

    Answered by hsfsf on March 07, 2016 at 02:17 PM

    Thanks, but Still doesn't work!!!!!!

     

    So let me show you the setting I've applied to my form (the "embedded gadget") in google sites:

     

     

     

    Also if you look at the html code of that page this is what google has:

     

    <div>

    <img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D399'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Include+gadget+iframe%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D400'%3D1897'dim'%5C%3D10'%3D10'%3D400'%3D1897'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&amp;sig=19K3zoTiFUfyBjpXw8w7lncAgZM" data-igsrc="//118.gmodules.com/ig/ifr?mid=118&amp;synd=trogedit&amp;url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&amp;up_iframeURL=https%3A%2F%2Fform.jotform.com%2Fhsfsf%2Fbemusical-application&amp;up_scroll=no&amp;h=1900&amp;w=100%25" data-type="ggs-gadget" data-props="screenshot:http#58//sites.google.com/site/gadgetsbysj/gadgets/iframe/iframe-thumbnail.png;url:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;height:1900;width:100%;params:up_iframeURL=https%3A%2F%2Fform.jotform.com%2Fhsfsf%2Fbemusical-application&amp;up_scroll=no;align:left;borderTitle:Include gadget (iframe);igsrc:http#58//60.gmodules.com/ig/ifr?mid=60&amp;synd=trogedit&amp;url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&amp;up_iframeURL=https%3A%2F%2Fform.jotform.com%2Fhsfsf%2Fbemusical-application&amp;up_scroll=no&amp;h=1900&amp;w=690;mid:60;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;up_iframeURL:https#58//form.jotform.com/hsfsf/bemusical-application;up_scroll:no;view:default;title:Include gadget (iframe)" width="400" height="1900" style="display:block;text-align:left;margin-right:auto;" class="igm"><br>

    </div>

     

     You can go ahead and work directly on my form, I've created a duplicate just in case. This way, every time you update it you can actually verify the changes directly where it is embedded: 

     

    http://teach.bemusic.al

     

     

  • Profile Image
    JotForm Support

    Answered by Mike on March 07, 2016 at 04:43 PM

    I have removed injected CSS code and it appears that the form is now responsive on your web page.

    If there are still any issues, please let us know.

  • Profile Image

    Answered by hsfsf on March 07, 2016 at 09:38 PM

    Definitely a major improvement since I started this! But Still, the matrix fields are not displaying correctly!

     

    Check it out:

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 07, 2016 at 11:04 PM

    I see that my colleague has removed the previously injected css. We can try making the matrix field responsive, however that would require injecting css again. If you do not want to inject css, perhaps you can try an alternate widget to use instead of the matrix.

    The DateTime Single widget is a possible alternative to your form. DateTime Single addresses the need to preserve both vertical and horizontal space. The widget reveals a time and date selector when the input field is clicked, allowing the user to visually select the date and time with ease. To add a widget to a form, simply follow this guide: How to Add a Widget to your Form

    http://widgets.jotform.com/widget/datetime_single

    Here's a demo that you can see in action: http://form.jotformpro.com/form/41953625294966? 

    Do let us know if this is a possible alternative for your form.

     

  • Profile Image

    Answered by hsfsf on March 09, 2016 at 06:33 PM

    Well I need to be able to collect data no in terms of dates and months but in terms of days and times of the week. So the field you recommend wouldn't help. There is another widget that does this but unfortunately it blocks the times and days that previous users select. is there any way to use that widget and change that rule?

    the Multiselect grid is the widget I'd like to use instead of the matrix...

     

    Can you help either with that or with css to fix the matrix responsiveness.

     

    Thanks!

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 09, 2016 at 08:35 PM

    Unfortunately, there is no way to prevent the Multiselect Grid from blocking the previously selected dates. We can use the css below to try and make it fit in mobile screens.

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

    li#id_36{

    width: 350px!important;

    }

    li#id_35{

    width: 300px!important;

    }

    li#id_37{

    width: 300px!important;

    }

    th, td {

    padding: 1px!important;

    width:10px!important;

    }

    table {

        font-size: 0.9em!important;

    }

    li#id_1 {

        width: 340px!important;

     }

    }

    Or we could use another widget called Configurable List to replace the Matrix.

    http://widgets.jotform.com/widget/configurable_list

    Here's a demo so you can see it in action: https://form.jotform.com/60687817483974 

    You can also clone it to your account: How to Clone an Existing Form from a URL

    Do let us know how it goes.
    Regards.