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 fields

    Asked by thealbumcreator on April 10, 2012 at 06:14 AM

    Hi, I have just added a subject field into my form but it doesn't align with my message field underneath.  Although its central, the subject field sits in slightly to the left and right.  Also, can I make this field the same depth as the name/email fields?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Goldo on April 10, 2012 at 06:33 AM

    Yes, what you are trying to do is very much possible.

    I tried to create a form to look like yours, see: http://form.jotform.me/form/21003086916447 for a demo.

    If you wish to use that instead, you can clone it.

    To clone go to My Forms > New Form > Import Form > From a Web Page and then insert the form Url.

    Let us know if that's what you wanted.

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 06:44 AM

    Hi, the form I am referring to is called my 'contact' form which includes the subject field.  The subject field is the field that doesn't align.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 10, 2012 at 06:57 AM

    Your problem is more of a cross-browser issue than an issue with field alignment. Under Firefox, the subject field aligns to the left perfectly.

    You will just need to adjust its size so it aligns to the right.

    However, we're not sure whether this will turn out right under Chrome.

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 07:09 AM

    I have just aligned the field in chrome, its almost aligned to the left and right but not quite - I understand this is probably as good as it going to get in chrome.  However when I view my page in safari and IE, the fields aren't aligned at all - the problem is even worse!! Please see link below

     

    http://www.thealbumcreator.com/#/contact/4561298950

  • Profile Image

    Answered by pinoytech on April 10, 2012 at 08:02 AM

    Hi,

    Have you tried already embeding your form code using iFrame method? If not, please give a try. Let us know if this method isn't solve the problem so we can further assists you.

    Thank you!

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 08:09 AM

    Hi, yes I have been using the iFrame method - this still doesn't solve the problem though

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by idarktech on April 10, 2012 at 11:56 AM

    @thealbumcreator,

    Try to add this on your existing form's css codes and see if this helps.

    #input_12{

    width:430px !important;

    max-width:430px !important;

    min-width:430px !important;

    }

    I can't assure you if this gives best result so kindly test it and let us know if you're still not satisfied with this. Thanks a lot!

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 02:52 PM

    hi thanks for this code... I have various css codes already embedded so what ones do I overwrite/delete? thanks

  • Profile Image

    Answered by pinoytech on April 10, 2012 at 03:08 PM

    Hi,

    Remove this code:

    #input_12{

    width:430px;

    max-width:430px;

    min-width:430px;

    }

    and replace with the code posted by idarktech.

    Let us know if the said issue still persist so we can furhter assist you.

    Thank you!

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 03:12 PM

    just worked that out thanks! one final question....can I make the height of the subject field the same as the name and contact fields? the subject field isn't as tall as they are. Thanks

  • Profile Image

    Answered by pinoytech on April 10, 2012 at 03:40 PM

    Yes, all you need to do is set the label alignment of subject field to TOP instead of Auto.

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 03:50 PM

    I mean the height of the box you type the text into.  The subject box height isnt the same as the height of the name/contact box.  Is there a way you can make these the same height?  Thanks

  • Profile Image

    Answered by pinoytech on April 10, 2012 at 04:07 PM

    Add this code in you custom css code:

     .form-textbox {font-size: 14px;} 

  • Profile Image

    Answered by thealbumcreator on April 10, 2012 at 04:30 PM

    this still doesn't make them the same height, it just scales them both up

  • Profile Image
    JotForm Support

    Answered by abajan on April 10, 2012 at 04:52 PM

    @thealbumcreator

    I'm not following you. In my browsers the First Name, Last Name, E-mail and Subject fields are all the same height. Perhaps if you provide an annotated screenshot, what you want to achieve might be clearer.

  • Profile Image
    JotForm Support

    Answered by abajan on April 28, 2012 at 05:54 PM

    @thealbumcreator

    Upon revisiting this thread, I see what you were referring to but I can assure you it's just an optical illusion. All of the text boxes are the same height: 21 pixels (I measured them with a graphics application on my PC). The "Subject" box appears to be slightly shorter than the others because it is significantly wider than the others.