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

    Envelope Theme appears Cut Off when viewed via Smart Phone

    Asked by creativeidesigns on October 10, 2013 at 08:07 AM

    Hi there,

     

    I upload the envelope form on the web, but when I view it with my phone it seems to cut off the right hand edge of the envelope. I changed the width to make it bigger (478) but it still doesnt work.

    I hope you can help

    CID

    Page URL:
    www.creativeidesigns.co.uk

    style size font
  • Profile Image

    Answered by pinoytech on October 10, 2013 at 09:53 AM

    Hi,

    Sorry to keep you waiting. Can you please try to inject this custom css into your form?

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    /*background */

    .form-all{

    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png);

    background-repeat:no-repeat;

    background-size: contain;

    -webkit-background-size: contain; /*for webKit*/

    -moz-background-size: contain; /*Mozilla*/

    -o-background-size: contain; /*opera*/

    background-size: contain; /*generic*/

    width: 295px !important;

    padding-left: 25px !important;

    }

    .form-textarea, .form-textbox {

    width: 240px !important;

    }

    .form-line {

    padding-top: 2px !important;

    padding-bottom: 2px !important;

    }

    }

    Thank you!

  • Profile Image

    Answered by creativeidesigns on October 11, 2013 at 12:03 PM

    Hi there,

    Thanks for getting back to me. The code does not have the envelop on it. its just a normal form.

    Hope to hear from you soon,

    CID

    ps: I just tried you code and I can get the envelope template back - please help!!

  • Profile Image

    Answered by EliezerN on October 11, 2013 at 02:48 PM

    I tested the code provided by my colleague and found that it works fine:

    Please test this form: https://www.jotform.com/form/32835132117952

    I have inserted to my form the code provided by my colleague, feel free to clone the form if it's helpful for you. Use this guide to know to clone the form: How to clone an existing form from a URL

    I also cloned the form you have embeded to your website and as you said it is a normal. But I got your another envelop form, cloned it and inserted my colleague's code.

    Please let us know if you need further assitance with this.

    Thanks

     

     

  • Profile Image

    Answered by creativeidesigns on October 15, 2013 at 11:30 AM

    Hi there,

    Thanks for you help. I tried cloning the form and everything came out fine on my smart phone however the form seems to have shifted to the left and there is a hug gap between the bottom of the form and the footer on my smart phone.

    Not sure if you can test it on your smart phone so you can see what I'm talking about.

    www.creativeidesigns.co.uk

     

    Thanks

  • Profile Image

    Answered by EliezerN on October 15, 2013 at 01:33 PM

    @creativeidesigns

    After testing your form in an iPhone emulator I was able to see what you are talking about:

    I updated the code to the next one, please use this code now:

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    /*background */

    .form-all 

    {

    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png);

    background-repeat: no-repeat;

    background-size: contain;

    -webkit-background-size: contain;

     /*for webKit*/

    -moz-background-size: contain;

     /*Mozilla*/

    -o-background-size: contain;

     /*opera*/

    background-size: contain;

     /*generic*/

    width: 295px !important;

    padding-left: 25px !important;

    float:center !important;

    }

    .form-textarea, .form-textbox {

    width: 240px !important;

    }

    .form-line {

    padding-top: 2px !important;

    padding-bottom: 2px !important;

    }

    .form-submit-button {

    position: relative !important;

    bottom: 90px !important;

    };

    }

    I have highlighted the new code I added. Your form will look in this way: 

    This is my new form: https://www.jotform.com/form/32875604211955

    However, I thinks there's still something wrong with the layaout of the message textarea. So I will update  you later once I fix the issue.

    Thanks

     

  • Profile Image

    Answered by creativeidesigns on October 15, 2013 at 07:18 PM

    Thanks,

    I look forward to hearing from you

    CID

  • Profile Image

    Answered by jedcadorna on October 15, 2013 at 07:33 PM

    @creativeidesigns

    I think my colleauge fixed the code. I have tested the form using an Iphone emulator and the textarea field seems to be ok now. Please confirm if you still having this issue?

     

    Thanks,

  • Profile Image

    Answered by creativeidesigns on October 16, 2013 at 08:57 AM

    Hi there,

    I've re cloned the form you sent but it still comes up funny on my iphone (small and to the top left of the screen below the blue banner.

    Thanks

  • Profile Image

    Answered by EliezerN on October 16, 2013 at 11:29 AM

    @creativeidesigns

    I have been doing my bes to fix the form, I embeded the fortm to the THIS PAGE to test at this time, however, this is what I've been able to accomplish by now:

    This is the form: https://www.jotform.com/form/32877096693976

    And you can find the code at this link: http://pastie.org/8406712

    I won't give up yet, I will work on it until I get something better. I really appreciate your patience.

    Let us know if you need to know something else about this.

    Thanks