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

    How to centralise fields one on mobile devices in landscape mode?

    Asked by ipbr21054 on March 11, 2016 at 06:14 PM

    Hi,

    Here is the form in question https://form.jotformeu.com/60705884010349

    Ive managed to change a few things to what I require to use but unable to center fields and the text above fields to the page. 

    Im currently viewing the form on iPhone & iPad but Im seeng a slightly different view in portrait or landscape on both devices & would be nice to at least look the same.

     

    Is it possible please for you to advise me the code & where to put it or make the edit for me so......

    Fields are central to screen whether portrait/landscape & iPhone/iPad is used. 

    Text about each field is also central to screen whether portrait/landscape & iPhone/iPad is used. 

     

    Many Thanks.

    ipad different thanks landscape
  • Profile Image
    JotForm Support

    Answered by BDAVID on March 11, 2016 at 06:46 PM

    I checked your form and it does show centered:

    What is not centered according to you? Could you please share a screenshot to illustrate what you mean?: https://www.jotform.com/answers/277033-How-to-add-screenshots-images-to-questions-in-support-forum 

  • Profile Image

    Answered by ipbr21054 on March 11, 2016 at 07:18 PM

    The questions are to the left of screen. 

    The input fields are to left of screen. 

     

    Make EVERYTHING central to screen. 

     

  • Profile Image

    Answered by ipbr21054 on March 11, 2016 at 07:25 PM

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 11, 2016 at 09:27 PM

    You may try injecting this CSS code: 

    #id_19, #id_16, #id_20, #id_21, #id_22{

        margin-left:20%;

    }

    Or also making your form mobile responsive, this guide will help you to achieve it: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

  • Profile Image

    Answered by ipbr21054 on March 12, 2016 at 06:35 AM

    Hi,

    I tried that but not what i was look for.
    However i just need to centralise the text "YOUR NAME / YOUR MESSAGE" etc etc over the respective field.

    I injected css text-align:center; but had no affect at all ?

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 12, 2016 at 07:31 AM

    To center the labels in your form you will have to inject the following CSS code:

    .form-label{

    text-align:center!important;

    }

    To inject the custom CSS code to the form you need to go to Preferences. In the preferences choose Form styles and add the custom CSS code i provided to the Inject custom CSS field.

     

    Hope this helps

  • Profile Image

    Answered by ipbr21054 on March 12, 2016 at 10:39 AM

    Hi,

    Very strange.

    I injected the code like advised and can see it alter no problem.

    I saved the edit and viewed it on my page.

    I have noticed with the text centered my submit button changes from red to grey/silver.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 12, 2016 at 11:25 AM

    Hello ipbr21054,

    I did check your form and it seems to display the labels centre aligned correctly. Please check the screenshot below:

     

    Have you embedded your form in any webpage where you are having this issue with? Please share the web page URL and we will take a look.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by Ian on March 12, 2016 at 11:51 AM

    The text is Center correct. 

    Since injecting the code I noticed the submit button changed from red to silver. 

    I have now fix the fault. 

  • Profile Image

    Answered by ipbr21054 on March 12, 2016 at 11:53 AM

    I applied the same code to my other form but the drop down field will not Center. 

    It can be seen here http://form.jotformeu.com/form/60712393428355?partNumber=Mazda005 

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 12, 2016 at 12:26 PM

    It doesn't work since the CSS that you injected is for text alignment, it doesn't hit drop-down.

    For drop-down field please inject this CSS:

    .form-input-wide.jf-required {

        margin:auto;

    }

    It will look like this after injecting CSS:

    Hope it helps!

    Do get back to is if it doesn't.

  • Profile Image

    Answered by ipbr21054 on March 12, 2016 at 01:22 PM

    Perfect thanks

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 12, 2016 at 01:37 PM

    You're welcome.

    I'm glad it worked for you!

    Best regards.