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

    Form Designer Page Alignment Issue

    Asked by asdf789 on June 04, 2015 at 07:53 AM
    BTW, I can't use your form designer because it breaks the alignment on my page (which is a real shame, because it's a great tool). Any fixes or work-arounds for that?
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 04, 2015 at 09:58 AM

    Hi,

    Yes, there is always a workaround but first, we need to know the exact problem before we can proceed with finding solutions. Maybe it can also be resolved in the form designer itself. Would you mind explaining the problem further about which alignment breaks on your page? Or can you provide the exact page URL so we can inspect?

    Thanks!

  • Profile Image

    Answered by asdf789 on June 04, 2015 at 11:08 AM

    I've created for you an example:

    This is the before page: http://www.jotform.com/?formID=51544294444962

    This is after I changed the background color using the form designer (that's the only change I've made): http://www.jotform.com//?formID=51544040332947

     

    As you can see, all of the labels of the fields are now aligned to the left, instead of right.

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Charlie on June 04, 2015 at 01:04 PM

    If that's the case, you can directly fix those that are not aligned to the right direction using the Form Designer Tool itself. You can change the styling of the element by clicking on them directly. Please check the screenshot below.

    First, click the "CSS Tab" area, this is where you can add your own custom CSS codes. To change styling of the elements, you can directly click on them and they'll be automatically be selected and the CSS selector will show in the CSS area. 

     

    In the sample form that you have, the ones that does not show in the right direction are the labels of the input box. This is the custom CSS that I used:

    .form-label.form-label-top {

        direction : rtl !important;

        text-align : right !important;   

    }

    I also added this code:

    .jotform-form, .form-all {

      direction: rtl !important;

    }

    This is how it looks like: http://form.jotformpro.com/form/51544852622960. Do let us know if those works.

    Thank you.

     

  • Profile Image

    Answered by asdf789 on June 04, 2015 at 03:09 PM

    From what I can see, it fixes the alignment. Should I encounter any other issues with the designer tool, I'll post here again.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by KadeJM on June 04, 2015 at 04:30 PM

    On behalf of my colleagues you are welcome. 

    If your issue is continued due to the alignment again then please by all means go ahead and follow it up here again if needed. 

    However, if it ends up being anything else that is different from the alignment then we would prefer it if you'd open that up in a new thread since it would be a different issue.

    Additinally, if you would like to learn how to use the Form Designer better then we would highly recommend referring to this guide here http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms which you may find very helpful for learning how to use it better.