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

    Smooth Signature widget is not responsive on mobile

    Asked by johnsonvillemedicalcentre on August 02, 2015 at 09:14 PM

    Hi there, 

     

    I'm currently using the SmoothSignature widget but it doesn't seem to be responsive to mobile. I've tried adding only that field to a blank form and it still doesn't seem to scale down. Is there a way to achieve this, maybe via CSS?

     

    Cheers, 

     

    Rob

    Mobile not responsive and scale Via
  • Profile Image
    JotForm Support

    Answered by Charlie on August 03, 2015 at 03:46 AM

    Hi Rob,

    Have you tried following this guide: https://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive. That should make your signature mobile responsive. If that doesn't work, try using the mobile responsive widget.

    We can also try using a custom CSS code but we'll need to clone the form you are working on that we can get the correct CSS selectors. You can also use the E-Signature widget, we have some custom CSS to make it more responsive. 

    Let us know which one will work for you.

  • Profile Image

    Answered by johnsonvillemedicalcentre on August 03, 2015 at 09:05 PM

    Hi Charlie,

    The from was already set as responsive and I didn't have luck with the mobile responsive widget so no go there.

    I also find the E-Signature widget painful to use in practice, so my preference would be to get some CSS going for the SmoothSignature widget if that's possible.

    The form I'm working on is: http://form.jotform.co/form/52136688412861?

    I've added a random signature field at the start of the form for testing purposes.

    Cheers, 

    Rob

     

  • Profile Image
    JotForm Support

    Answered by Charlie on August 04, 2015 at 01:17 AM

    Hi,

    Thank you for the confirmation. It might take some time for me to come up with a working CSS code for the Smooth Signature, I see you have a couple of signatures in your form. Let me try making it today and I'll get back to you as soon as I have a working one.

    Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by Charlie on August 04, 2015 at 09:39 AM

    Hi Rob,

    Unfortunately, it seems like we can't make the correct responsiveness for the Smooth Signature widget, the custom CSS code also won't work as the widget is wrapped in an iFrame, which means external styling like CSS won't affect it.

    But the E-Signature was designed to be easily customizable. Here's a sample cloned form based from your original one, I removed the signature widget in the top page and replaced it with an E-Signature widget: http://form.jotformpro.com/form/52151114298955.

    What I did:

    1. I disabled the mobile responsive options in Preferences and in the Form Designer Tool.

    2. I then used the Mobile Responsive Widget

    3. I then added the E-Signature widget then used this custom CSS code:

    @media screen and (max-width: 480px){

        canvas.jSignature {

            width : 100% !important;

        }

        .signature-pad-wrapper {

            width : 100% !important;

        }

        .signature-line.signature-wrapper {

            width : 100% !important;

        }

        .pad {

            width : 100% !important;

        }

    }

    We can further design the widget if you want because its not wrapped in iFrame.

    Let us know if this works.

  • Profile Image
    JotForm Support

    Answered by Charlie on August 04, 2015 at 09:50 AM

    I have also forwarded this to our widget team so that they can see if they can resolve the problem in the non-responsiveness of the Smooth Signature widget.

    We will update you on this thread when we hear any news.

    Apologies for the inconvenience.

  • Profile Image

    Answered by johnsonvillemedicalcentre on August 04, 2015 at 05:59 PM

    OK such is life. I prefer the way that output for SmoothSignature looks but will put up with it for responsiveness.

    Cheers, 

    Rob

  • Profile Image
    JotForm Support

    Answered by TitusN on August 05, 2015 at 01:31 AM

    Hello Rob,

    The widget was actually designed with mobile responsiveness in mind whenever a dynamic width was declared using CSS

    Please try out this stripped down version of your form: http://form.jotformpro.com/form/52160759923965?

     

    This was achieved by just adding the Mobile Responsive widget on your form. 

    Please let us know if this works for you, and if you see any limitations you need addressed.