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

    Address input and submit button too wide

    Asked by ttdvm on August 16, 2015 at 07:51 AM

    I saw other people had asked this, and I tried to fix it without luck. Please help: http://naturalalternativesvet.com/request-an-appointment

     

    Th address, phone and email fields go all the way across the page when viewed on my iPad and iPhone is even worse where you can't see the entire form without scrolling horizontally. 

     

    How can I make this form look good on mobile devices?

     

    Thanks,

    Tabitha

    Page URL:
    http://naturalalternativesvet.com/request-an-appointment

    wide and too wide ipad Mobile thanks email fields
  • Profile Image

    Answered by Shadae on August 16, 2015 at 03:18 PM

    Hi Tabitha,

    I am seeing that your form has not been set to be responsive from within the form designer:

    Checking the make form responsive box, should resolve the issue that you are experiencing.

    You can view our guide here: https://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

    I hope this helps, please inform us if you need further assistance.

  • Profile Image

    Answered by ttdvm on August 16, 2015 at 09:15 PM

    Thanks for the answer. I did follow the guide. I had already tried enabling mobile responsive in preferences before I asked the question, but I did all the steps in the guide just now and it did not fix the problem. Maybe I should recreate the for in one of the mobile responsive themes?

  • Profile Image
    JotForm Support

    (Private)

    Answered by BJoanna on August 17, 2015 at 04:13 AM

    When I tested your form, I only noticed that text of check box field is not responsive.

    You can make text of check box responsive by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

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

    .form-all {

    width:100% !important

    }

    .form-radio-item label {

    white-space:normal;

    }

    .form-checkbox-item label {

    white-space:normal;

    }

    }

    After adding this code your form will look like this.

    Also I would suggest you to add Mobile responsive widget to your form. 

    Here is my cloned form: http://form.jotformpro.com/form/52281999885982?  I added mentioned CSS code and Mobile responsive widget inside of my cloned form. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by ttdvm on August 17, 2015 at 08:22 AM

    Thanks again... I will try the code to help with the checkboxes. However, I had already tried the mobile responsive widget and tried again today. The problem is only apparent on a mobile device and it seems to be only when I publish the form to a full width page on my wordpress site. When you view the form via the Jotform.com link, it looks OK. My main concern is in the section with address, phone, etc. where the white boxes span across most of the page. Also the submit button spans the same width. It's hard for me to believe everyone has this trouble when embedding forms on a wordpress site! I could just use a link to the Jotform site version of the form, but it would be awkward to have a client have to click another on that page to follow it to a different site. 

  • Profile Image

    Answered by Shadae on August 17, 2015 at 09:28 AM

    Hi ttdvm,

    As your form is being shown correctly on JotForm, there may be a conflict on your webpage preventing all aspects of your form from being responsive.

    Please embed your form using the iFrame embed method. This should resolve any conflicts between your webpage and your form.

    Getting-the-Form-iFrame-Code

    Please inform us if you need further assistance.

  • Profile Image

    Answered by ttdvm on August 17, 2015 at 10:13 AM

    I tried using the iFrame embed method already, too! I just tried it again by following the guide and it's still showing super wide fields/submit button. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 17, 2015 at 11:37 AM

    I have tested your website on my Samsung Galaxy S4 and on Android Galaxy tablet and I was not able to replicate mentioned issue.

    I have also tested your website on iPhone and iPad simulator and I was also not able to replicate issue with fields and submit button being to wide.

    Please try to clear your browser cache on iPhone to see if that will resolve your issue. Also can you test your website on some other deice? 

    Hope this will help. Let us know if you need further assistance. 

     

  • Profile Image

    Answered by ttdvm on August 17, 2015 at 01:54 PM

    I already tried clearing the cache on the iPad and the iPhone. Anyway, I decided instead of embedding the form on my Wordpress site, to just link to the form on the JotForm.com site. That pretty much solves the problem and for my needs, will work fine. Thanks for checking for me!

  • Profile Image

    Answered by Shadae on August 17, 2015 at 03:05 PM

    Hi ttdvm,

    We are happy to hear that you have found an alternative solution to the issue that you are experiencing.

    Please feel free to contact us if you need further assistance.

    Thank you