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 center align a form in css that is hosted on JotForm?

    Asked by smichaels68 on April 13, 2015 at 11:05 PM

    Hello all you JotForm Rockstars!

    I'm trying to center align this form in the css:

    http://jotform.us/form/51025449751151

    Thanks in advance!

    Page URL:
    http://jotform.us/form/51025449751151

    JotForm in style size font
  • Profile Image

    Answered by Syed on April 14, 2015 at 06:17 AM

    Hi there;

           Please inject the following CSS Code Block at the end, read our guide here on How to Inject Custom CSS Codes. Review the following screenshot, the form is successfully aligned in the center.

    .supernova .form-all, .form-all {margin: auto;}

    Please will let us know, if you have further questions/queries, we would be happy to assist you in any way.

     

    Thankyou,

  • Profile Image

    Answered by smichaels68 on April 14, 2015 at 08:58 AM

    Fantastic! Thank you! :)

  • Profile Image

    Answered by Syed on April 14, 2015 at 08:59 AM

    You're welcome :)

     

    Thankyou,

  • Profile Image

    Answered by smichaels68 on April 14, 2015 at 09:01 AM

    Hmm, ok, now the text is not aligned correctly with the left and right sides :(

  • Profile Image

    Answered by Syed on April 14, 2015 at 09:21 AM

    Hi there;

            Please inject the following CSS Code Block at the end, to aligned the text as well.

    #id_13 {position:relative; left:-27px;}

    http://form.jotformpro.com/form/51034016916952

    Thanks,

  • Profile Image

    Answered by smichaels68 on April 14, 2015 at 09:28 AM

    Thanks Syed,

     

    Here's what I have so far. I'm no css wizard so I feel some of this might be irrelevant?

    .supernova .form-all, .form-all {

        margin : auto;

        text-align : center;

        padding-right : 10px;

        padding-left : 10px;

    }

    .form-section.page-section {

        text-align : center;

        padding-right : 10px;

        padding-left : 10px;

    }

     

    #id_13 {

        position : relative;

        left : 10px;

    }

  • Profile Image

    Answered by smichaels68 on April 14, 2015 at 09:39 AM

    Ok, I just re-aligned the form fields and I think it's good now :)

     

  • Profile Image

    Answered by Syed on April 14, 2015 at 09:40 AM

    Sure, Thankyou, will let me know if you need more clarification regarding CSS Code :)

     

    Great day!

     

  • Profile Image

    Answered by smichaels68 on April 14, 2015 at 09:41 AM

    Thanks again Syed! :)

  • Profile Image

    Answered by Syed on April 14, 2015 at 09:41 AM

    You're welcome :)