Make E-Signature fields responsive

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 

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!

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 

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.

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 

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" onDISABLEDload="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" onDISABLEDload="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.

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

Thanks-Will 

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

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 

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.