My Form is not Responsive, Please help

  • u2utech
    Asked on November 13, 2014 at 7: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

    Jotform Thread 458658 Screenshot
  • jonathan
    Replied on November 13, 2014 at 8:38 AM

    Hi,

     

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

    My Form is not Responsive, Please help Image 1 Screenshot 20

     

    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

     

     

     

     

  • u2utech
    Replied 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

  • Elton Support Team Lead
    Replied on November 13, 2014 at 1:22 PM

    Hi Tanweer,

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

    Stay tuned!

  • Elton Support Team Lead
    Replied on November 13, 2014 at 1: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!