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

    Aligning form right to left

    Asked by SivanS on September 09, 2010 at 05:05 PM

    I want to use the forms in a hebrew site, and I need all the fields to be align to right, also the name I give to any of the fields. Is it possible and how?

  • Profile Image
    JotForm Founder

    Answered by aytekin on September 10, 2010 at 05:07 AM

    You can make the labels align to the right. To do that click on Label Align button at the top and then select "Right".

    If this is not what you would like another possibility is to get the full source code and change the page as you wish youself.

    On the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form"
    3. Click on "Advanced Options"
    4. Click on "Full Source Code".

    Then copy this code to your web site and open the page on an editor such as DreamWeaver. Then change it to look like exactly as you wish.

  • Profile Image

    Answered by serkan on January 12, 2011 at 03:18 AM

    On toolbar select "Setup & Share" tab. Click on Preferences.

    At the bottom there is an option called "CSS Inject" Copy and paste this code there

    .form-label-left{
         float:right;
         text-align:right;
    }
    .form-input{
         float:right;
    }

     

    This will flip the form as you requested.

  • Profile Image

    Answered by barq on May 11, 2011 at 04:05 AM

    Doesn't work for me. It still aligns to the left? Any ideas?

    http://www.jotform.com/?formID=11281135600

  • Profile Image
    JotForm Support

    Answered by liyam on May 11, 2011 at 04:54 AM

    Hello barq,

    I have checked your form and it is already aligned to the right.  Although I noticed that you have a background that does not fit inside the form background so it seems to look like it does not work.  Click on the image to open a larger view on a new window

    Please explain to us what you wish to accomplish or how the layout would look like, maybe we can give you a working solution that fits your needs.

    Hope this helps.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on May 11, 2011 at 06:54 AM

    Since SivanS states that the forms are to be used on a Hebrew site and that language is written from right to left, I think the desired outcome is similar to the effect shown here when text is entered in the box and "Convert!" is clicked. In other words, I don't think alignment is the issue but rather the text direction.

    I have previously run some tests on a form using the "direction:rtl;" declaration in injected custom CSS but that only caused the insertion point to start on the right instead of the left.

  • Profile Image

    Answered by barq on May 11, 2011 at 07:24 AM

    Thanks for your answer. Yes I can see I misunderstood what the CCS Inject should do (I'm a CSS newbie). It was supposed to look like the following. I can do this by making the label width extremely long which will push the fields to the right. However, when the field are highlighted (if the user doesn't put in anything in the Name or Mail field), the highligt goes all the way to the left side and covers the address.

    Any ideas?

     

    Example

  • Profile Image
    JotForm Support

    Answered by NeilVicente on May 11, 2011 at 08:01 AM

    Hi,

    Is this form what you're trying to accomplish? I cloned your form and removed unnecessary CSS codes. Also, I tweaked your customization a little bit to achieve that mock-up you made.

    Feel free to clone this form for your own use. To learn how to clone a form from another user, click here

    I hope you find this useful. Contact us again if you have other questions. Thank you.


    Neil

  • Profile Image

    Answered by barq on May 11, 2011 at 08:07 AM

    Hi Neil,

    Thanks a lot! This was exactly what I was looking for! Now I only need to align the image button properly like on the screenshot.

    I only just learned about Jotform a few days ago, and I must say the products is really great and the community and support is amazingly helpful! I simply love it!

    I will recommended Jotform to everybody in my network!

    Thanks a lot!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on May 11, 2011 at 08:18 AM

    You're welcome. Glad to be of help.


    Neil

  • Profile Image
    JotForm Support

    Answered by liyam on May 11, 2011 at 08:26 AM

    Hello barq,

    Try adding this to your CSS injection code for the button design:

    .form-buttons-wrapper
    {
    margin-left:80px;
    }
    .form-submit-button
    {
    border-style:none;
    border-color: #330000;
    border-width: 1px;
    }

    Hope this helps.

  • Profile Image

    Answered by barq on May 12, 2011 at 05:15 AM

    Thanks for your answer llyam.

    I decided though to go with a graphic to get the correct typography. Now I have some issues left:Start Page

    I have taken some screenshots from my site to explain.

    1. Above some pixels of the left background (the white box) are cut off. How can I avoid this so the box aligns to the line above?

    When fields are highlighted

    2. When the fields are highlighted like above, the form elements are pushed down so that they can't fit on the background. Maybe the only reason to work around this is to just remove the form field checking feature?

    3. The red highlight goes outside the box as well on the first two lines - any way to avoid this?

    Thank You Image

    4. The thank you image is also cut off just like in 1. Any ideas on how this can be fixed? Probably something is wrong in the CSS, but I can't find what. Changing many of the values doesn't seem to help.

  • Profile Image
    JotForm Support

    Answered by abajan on May 12, 2011 at 06:16 AM

    Hi again barq

    Re: Point No. 2

    It would be nice to have an easy way to remove the "This field is required." speech bubble altogether. While performing a test on a clone of your form, I removed all of the text from the warning (Preferences > Advanced Settings > Edit Form Warnings) in an attempt to remove the speech bubble but that didn't work. (Although it did decrease the height of the bubble somewhat.)

    IMHO, since there's already a notice given when the submit button is clicked, the red border on the text box (or text area as the case may be) is sufficient highlighting of unfilled required fields but the option to have a speech bubble should still be available to those who wish to have it.

    Re: Point No. 3

    It might be a good idea to simply get rid of the pink error highlighting altogether by injecting the following CSS:

    .form-line-error {
    background:none repeat scroll 0 0;
    }

    Also, I notice a gray arrow in your screenshot. Assuming you wanted to have the entire element gray instead of just the arrow, I suggest removing the following rules for the time being:

    }div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }

     

    ~ Wayne

  • Profile Image

    Answered by barq on May 12, 2011 at 10:28 AM

    Hi Wayne,

     

    Appreciate for your help! I removed the CSS you mentioned from the form, and just disabled validation and the required field function. Now it works!

     

    • I still have problem (1) with the bottom of the contact page being cut off somehow. Don't know why that happens?

    • Also how do I remove the top and left margins from the Thank You page?