Mobile version of jotform...joomla

  • Profile Image
    gcoasthair
    Asked on February 07, 2014 at 10:45 PM

    I always have troubles with the width of jotform forms in joomla 3. I tried iframe and the joomla embed code with no success. when i use the google maps iframe code i have no issues.

    Can you please let me know what css i have to inject to make this form the right width for the portrait iphone screen....

  • Profile Image
    liyam
    Answered on February 08, 2014 at 02:41 AM

    Hello gcoasthair,

    You can try injecting this CSS code for flexibility of your web form's field width:

    ----

    .form-textarea,.form-textbox{
       width: 100% !important;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    }

    .form-label-left, .form-label-right{
       width: auto !important;
    }

    .form-input {
      width: 100% !important;
    }

    .form-all{
       width: 95% !important;
    }

    .form-sub-label-container {
       width: 100% !important;
    }

    ----

    And on your webpage, can you add this?
    ----
    iframe, object, embed {
            max-width: 100%;
    }
    ----
    Please let us know if you have further questions.
    Thanks.
  • Profile Image
    gcoasthair
    Answered on February 08, 2014 at 07:00 PM
    I made the changes you recommended, injecting custom css to the jotform
    and then placing the other css in the @media smartphone css of my site.
    It did not fix the problem. I tried both iframe and the joomla specific
    code and neither worked.
    Also, now the form fields are full width on desktop screen which isn't
    ideal.
    ...
  • Profile Image
    Cesar
    Answered on February 08, 2014 at 11:19 PM

    Appending this code:

    @media only screen and (max-device-width: 550px){
    .form-textarea,.form-textbox{
    width: 100% !important;

    To the top of the code provided by Lyam does yield a proper responsive behavior of the form on my mobile devices.

    This is my example form: https://secure.jotformpro.com/form/40388502576964

    Do let us know which device you are utilizing specifically, so that we may assist you further. Thank you.

     

    Related Article:
    How-to-Clone-an-Existing-Form-from-a-URL