My Form is not Responsive, Please help

  • Profile Image
    u2utech
    Asked on November 13, 2014 at 07:16 AM

    Hello Team,

     

    I have made a long Jotform and put it on my responsive site, everything looks great except 2 things:

     

    1.  It is not responsive so looks odd on mobile screens.

    2. It is not showing image of my logo on site page. However it shows the image on url and jotform dashboard.

     

    Here is link to my jotform: https://secure.jotformpro.com/form/43134573190956

     

    I put following embed code:

     <script type="text/javascript" src="//form.jotformpro.com/jsform/43134573190956"></script>

     

    Here is the page where I put the code:  http://hrtcentersofamerica.myshopify.com/pages/get-started

     

    Please help me in this regard as soon as possible.

     

    Warm Regards,

    Tanweer

  • Profile Image
    jonathan
    Answered on November 13, 2014 at 08:38 AM

    Hi,

     

    Please try adding the Mobile Responsive Widget into your jotform http://www.jotformpro.com/form/43134573190956

     

    The widget should make the form mobile responsive then.

    Hope this help. Inform us if you need further assistance.

    Thanks.

    --

    We will answer your other question here http://www.jotform.com/answers/458699

     

     

     

     

  • Profile Image
    u2utech
    Answered on November 13, 2014 at 12:28 PM

    Hello Team,

    Thanks, It worked very well, but 2 fields still look odd on mobile screen 320px:

    1. Signature box

    2. Capcha code entry field

     

    Please let me know how to fix that.

     

    Regards,

    Tanweer

  • Profile Image
    EltonCris
    Answered on November 13, 2014 at 01:22 PM

    Hi Tanweer,

    We'll check it and get back to you with a solution.

    Stay tuned!

  • Profile Image
    EltonCris
    Answered on November 13, 2014 at 01:37 PM

    Here's a fix.

    Simply inject this CSS codes to your form. This should make reCaptcha and E-signature Widget mobile responsive.

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

    canvas.jSignature {width: 100% !important;}

    div#sig_pad_133 {width: 100% !important;}

    .signature-pad-wrapper{width:100% !important;}

    .recaptchatable #recaptcha_image {width: 150px !important;}

    .recaptchatable #recaptcha_image #recaptcha_challenge_image {width: 100%;}

    .recaptchatable #recaptcha_response_field {width: 150px !important;}

    span#recaptcha_privacy {display: none;}

    #recaptcha_table td {width: 150px !important;}

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    If you need anything else, let us know.

    Have a good one!