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

    Make E-Signature fields responsive

    Asked by watwebs on April 01, 2015 at 11:09 AM

    Hi. I am using one of the E-Signature widgets in my form. I would like to find out if you can provide some CSS or advice to make these fields responsive. I can make the e-sig fields smaller, but then they are small on all devices and really come close to being too small for a signature in general. There could be something else I'm missing as well, so your advice is appreciated.

    Here's the link to my form: https://secure.jotformpro.com/form/50887851341966

    Also, here is link to the blog page where it is embedded. As I said, have a look at it on mobile. 

    http://abcpeds.blogspot.com/p/allergy-testing.html

     

    Thanks! 

    Will 

    Page URL:
    http://abcpeds.blogspot.com/p/allergy-testing.html

    style size Mobile E-Signature signature widget
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 01, 2015 at 01:02 PM

    Hello Will,

    Here are the steps you should follow:

    #1. Add "Mobile Responsive" widget in your form.

    #2. Inject the following custom css code in your form:

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

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

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

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

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

    }

    The following guide should help you on how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #3. For your form to work in mobile devices, we suggest you to embed your form using its iFrame embed code. Please embed your form using it iFrame embed code. The following guide should help you grab your form's 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 watwebs on April 01, 2015 at 08:59 PM

    Hi, I already had mobile responsive widget in form. I added the CSS, but the layout still breaks on my smartphone when I hold it vertically.  *Interesting note- the layout doesn't break when I turn my phone sideways or horizontal. Is there a minor tweak to the CSS we can make that will apply to the screen size when vertical? I also wanted to add that when I choose to "view form" inside of Jotform and resize the window the form is responsive. However, when I resize the embedded form on my page it does not respond. A screenshot of the view form is attached.

    Thanks! Will 

  • Profile Image
    JotForm Support

    Answered by Charlie on April 02, 2015 at 12:14 AM

    Hi,

    I see that the line in the signature widget breaks the layout. I also noticed that your missing "}" in your custom CSS code. 

    I've cloned the form in your website and I edited it in my end. Here it is: http://form.jotformpro.com/form/50908936629973.

    Regarding the form embedded on website, the form doesn't become responsive because I believe your website chooses the device where it is being displayed. The form will adjust depending on your website's responsiveness. However, when you view the direct link of the form, it's responsiveness is based from the display and not on the device where it is being viewed. So these are the following cases:

    1. Form embedded on website not responsive when viewed on desktop browsers and adjust the window size

    2. Form embedded on website is responsive when website is viewed on a smartphone or smaller devices.

    3. Form viewed directly on its link will be responsive regardless if the device is a smartphone or a desktop as long as the display dimensions changes.

     

    You can clone the edit form that I have by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL. For your reference, here's the edited custom CSS code that I used:

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

        canvas.jSignature {

            width : 90% !important;

        }

        div#sig_pad_71 {

            width : 90% !important;

        }

        div#sig_pad_74 {

            width : 90% !important;

        }

        .signature-pad-wrapper {

            width : 100% !important;

        }

    }

    I hope that helps.

    Kind regards.

  • Profile Image

    Answered by watwebs on April 02, 2015 at 08:58 AM

    Hi, Thanks for the reply and effort. I am using iframe embed with your new, cloned form and it still breaks the layout on the blog page. I am using Blogger. If anyone knows of something else to try to have my form respond on mobile when the device is held vertical let me know. 

    Thanks,

    Will 

  • Profile Image
    JotForm Support

    Answered by Charlie on April 02, 2015 at 11:36 AM

    Hi Will,

    It seems like a problem with the script code included on the iFrame. Could you try re-embedding the iFrame code but at the same time removing the <script> that was included on it?

    Here's a sample of your embed code:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/50913905505958" frameborder="0" style="width: 100%; height: 4146px; border: none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Try embedding using the code wrapped in <iframe> tag only. Then specify the height by adding "!important" on it. Here's an example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/50913905505958" frameborder="0" style="width: 100%; height: 4146px !important; border: none;" scrolling="no"></iframe>

    See if that fits on your mobile devices.

    Kind regards.

  • Profile Image

    Answered by watwebs on April 02, 2015 at 04:56 PM

    Hi Charlie. Thanks for the try, but that didn't work. Any other suggestions welcomed. 

    Thanks-Will 

  • Profile Image
    JotForm Support

    Answered by Kiran on April 02, 2015 at 08:44 PM

    Please allow me some time to check on this and get back to you later. Thank you for your patience.

     

  • Profile Image

    Answered by watwebs on April 03, 2015 at 08:19 AM

    Hello. I'm going to link to the form from our copy instead of embedding at the moment. We can close this thread out. 

    Thanks for everyone's help.

    Will 

  • Profile Image

    Answered by Ben on April 03, 2015 at 09:36 AM

    Thank you for updating us Will.

    I would only like to add to what my colleagues have mentioned.

    The reason why the form is not responsive on your blog is because the jotform is not in a responsive part of the page.

    When I tested your blogspot blog, it seemed that not only was it not resizing the part where the jotform is embedded, but that it was not resizing the entire blog at all - it was is not mobile responsive.

    I would recommend hiring some developer that would help you set it up to be mobile responsive and once it is the form will follow the given shape and size, allowing you to embed it on your website.