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 do I properly align forms items in a two-column form layout?

    Asked by barq on June 04, 2012 at 09:21 AM

     

    Hi forum,

    I'm trying to do the following form:

    http://cl.ly/281U1H3T2P10422f3b3I

    Based on and older form I did with Jotform. I have tried following the suggestions in this post (as well as the Field Positioning tutorial), but I still can't seem to control the forms elements properly and have them in the order I want and align as they should.

    Notice the two fields in the screenshot with the name" Dynamic should only appear when a certain selection in the dropdowns have been made. They should appear and go away without the layout changing. This doesn't work for me iether. 

    Maybe the form can do this using CSS, but unfortunately I'm no CSS wizard. Here's a link to the form I've got issues with:

    http://form.jotformeu.com/form/21502860450343

    I've been struggling with this form for weeks. Anyone who knows how to accomplish this?

    All help is greatly appreciated. 

    All the best

    Anders, Denmark

    Page URL:
    http://form.jotformeu.com/form/21502860450343

    columns,positioning layout JotForm POST name
  • Profile Image
    JotForm Support

    Answered by jonathan on June 04, 2012 at 06:04 PM

    Hi,

    The screenshot link you provided does not seem to show the form that you wanted.

    Can you repost? You may also check this guide on how to post screen capture on this forum 

    -How-to-insert-embed-a-screen-shot-a-k-a-screen-dump-into-a-post

    I also checked your from. Is this what you meant to align?

    Will await your response. Thanks.

     

  • Profile Image

    Answered by barq on June 05, 2012 at 03:46 AM

    Hi Jonathan,

    Sorry, I just posted the wrong link. The link is updated now (and it should clarify what I mean).

    All the best

    Anders

  • Profile Image
    JotForm Support

    Answered by abajan on June 05, 2012 at 04:11 AM

    Anders

    The solution to this probably lies in absolutely positioning some of the form's elements. We'll see what we can come up with.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on June 06, 2012 at 12:21 AM

    Would the format of this form be suitable?

  • Profile Image

    Answered by barq on June 06, 2012 at 04:09 AM

    Hello Wayne,

    Thanks a lot for your help! Now the form elements align perfectly! The only thing I was wondering though is if it's possible to fill out the spacing under "Video style" and "Video Length". I'm curious if it could be quickly rearranged so all the static dropdown menus are to the left, in order to eliminate the spacing? Like this:http://cl.ly/3z2e160K3L21052r050P

    That would mean having all the dynamic fields show up to the right, instead of below. It would also involve having the submit button aligned to the left border of the "invisible" dynamic fields.

    Is this possible?

    All the best

    Anders, Denmark

  • Profile Image
    JotForm Support

    Answered by abajan on June 06, 2012 at 05:36 AM

    Anders

    The fields can be rearranged in the manner described but I can't say how quickly. Sometimes unexpected challenges reveal themselves while working on tasks that initially appear to be easy. So, hopefully this isn't too urgent. But I'll work on it today for you.

     

    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on June 06, 2012 at 11:07 PM

    Okay, how's this?

  • Profile Image
    JotForm Support

    Answered by abajan on June 06, 2012 at 11:08 PM

    Unfortunately, I wasn't able to get the submit button alignment to be consistent across browsers.

  • Profile Image

    Answered by barq on June 11, 2012 at 06:02 AM

    Hi Wayne,

    This is abolutely perfect! Thanks a lot - I really appreciate your help! I was very curious as to if this was even possible. I'll implement this is as soon as possible!

    Regarding the button placement, it's seems to appear the same in FireFox, Chrome and Safari.

    Thanks again!

    All the best

    Anders

  • Profile Image

    Answered by barq on July 17, 2012 at 11:42 AM

    Hi again,

    I have finally insert the contact form on my webpage - http://barqvideo.com/contact/. Unfortunately the date picker that shows up under the field "What is your hoped for delivery date" (when selecting "A specific date" in the Deadline dropdown) is outside the contact form div.

    A. How can I reposition the date picker so that it shows up above the field (it doesn't matter if it temporarily covers another field)?

    There is also an alignment problem - I can't change seem to the distance between the two columns in the form, and I would like them to align with the two text columns above.

    B. How can I do that?

    All the best

    Anders

  • Profile Image
    JotForm Support

    Answered by jonathan on July 17, 2012 at 06:36 PM

    Hi Anders,

    I think you found solution to question A already...

    that is by adding </br> on the div tag after the form iframe code..

    <div id="contact-form">

    <iframe allowtransparency="true" src="//form.jotformeu.com/form/21572166867361" frameborder="0" style="width:100%; height:500px; border:none;" scrolling="no">

    </iframe>

    <br /><br /><br />

    </div>

    The column alignment will probably require modification on the CSS code left positioning of the fields involved. Which is kinda a trial/error steps since it may look different on different browser.

    FYI

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on July 17, 2012 at 07:49 PM

    Anders

    When I looked at your page, the calendar pop-up still appeared to be off the screen and the fields were not aligned with the text above the form.

    Please add the following rules to the form's current injected CSS and let us know if it helps:

    .calendar.popup {
    top: 355px !important;
    }

    .form-all {
    margin-left: 7px;
    }

    #id_17, #id_24, #id_26 {
    padding-left: 78px;
    }


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on July 17, 2012 at 07:57 PM

    Actually, now that things have been moved around, the submit button and the "Please complete all required fields." message that pops up when all the required fields have not been filled, could also do with some repositioning. I'll see what I can come up with later.

  • Profile Image

    Answered by barq on July 18, 2012 at 01:37 AM

     

    Hi Wayne and Jonathan,

     

    Thanks, now the calendar has been moved up and the fields align to the text! 

     

    The final things I'm trying to implement are these:

    http://cl.ly/image/3L1p1d0P2J1P

    Mockup

     

    • Phone Number field is a bit off (partially fixed)

    • "Let's go" button should align to the right side of the left-column and be pushed up/left a bit to align horizontally with "what is your hoped delivery date".

    • To change the width of the fields to better fill out the space

    • To remove excessive white space.

    • To get same padding in the form on the right side as I have on the left (by making the right column elements wider.

    • The please complete all required fields message is off.

     

    The screenshot shows what I'm trying to do. I've managed to fix the calendar position, and made the left side align of the phone number align with the other left columns, but the rest of the positioning I'm not sure of. Also I can't seem to change the size of the fields in Jotform.

    UPDATE: Your fixes worked before but now suddenly they dont?

    P.P.S. I had some problems making the form update. Changing the "form" to "www" in the URL fixed it, but I don't know if this is related.

    All the best

     

    Anders

  • Profile Image
    JotForm Support

    Answered by abajan on July 18, 2012 at 06:25 AM

    Anders

    There's a closing brace at the beginning of the injected CSS that is causing all sorts of problems. (Looks like including an extra brace is almost as bad as omitting one: See 15 Surefire Ways to Break Your CSS.) Plus, I forgot that there's a hidden phone field. So, I didn't include any declaration to reposition it.

    I've had a look at your screenshot. Besides the phone field (whose ID is id_21, by the way, and not just 21, as you have in the last rule), let me make some other adjustments to the CSS and get back to you.


    Wayne

  • Profile Image

    Answered by barq on August 06, 2012 at 05:02 AM

    Hi Wayne,

    Any updates on this?

    All the best

    Anders

  • Profile Image
    JotForm Support

    Answered by abajan on August 06, 2012 at 11:19 AM

    Hi Anders,

    My apologies. I should have a solution for you sometime today.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 11, 2012 at 07:07 PM

    Hi again Anders

    Surely, you must have thought that I had forgotten you! (I really need to stop making promises I can't keep.)

    Anyway, the injected CSS below is the best I could come up with. Unfortunately, the results are not quite what you requested in your graphic:

    Make right column elements wider so the form has the same padding on the right as it has on the left.

    Done

     

    Make left column fields longer so that they align with this line.

    Done

     

    Align phone number to the line

    Done

     

    Remove whitespace, so that the field spacing matches the Name/E-mail space.

    Not practical, due to the presence of the Phone number field (or when hidden, the space it would occupy). The What video style do you have in mind? and What is your expected video length? fields are currently aligned and removing the whitespace to which you reffered would upset that alignment. If the said space were to be removed and the What is your expected video length? field were to be moved up to maintain the alignment when the Phone number field is hidden, the alignment would be offset when the Phone number field is revealed. Although inserting an empty spacer div (division) or image below the How should we get in touch with you? field and having it shown and hidden in concert with the Phone number field would solve the alignment issue, it wouldn't look good to have the What video style do you have in mind? and What is your expected video length? fields shift as the Phone number field is shown or hidden.

     

    Align calendar to left column left side.

    Done

     

    Move "Let's Go" button up/left so it aligns

    Did my best to get the alignment to be consistent across browsers with no luck. I was able to align the button with the left edge of the What is your budget? field in all browsers I've tested except Firefox. Also, alignment with the top of the What is your hoped for delivery date? label varies from browser to browser.

     


    Here's what to do:

    1. Replace all of your injected CSS with the following:

    /*
    Name: id_19
    Inquiry: id_17
    E-mail: id_16
    How should we get in touch with you?: id_29
    Phone number: id_21
    What video style do you have in mind?: id_22
    What is your expected video length: id_24
    Link to video example: id_23
    What is your deadline?: id_27
    What is your budget: id_26
    What is your hoped for delivery date?: id_28
    Submit button: input_14
    */

    .form-textbox, .form-textarea {
    border: 1px solid #fff;
    border-top: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
    padding: 8px;
    margin-bottom: 10px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }

    input:focus, .form-textarea:focus {
    border: 1px solid #1B71C2;
    }

    .form-section {
    margin-left: 3px;
    }

    .form-required {
    margin-left: 5px;
    color: #00F;
    }

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

    .form-error-message {
    position: absolute !important;
    top: 300px;
    width: 208px;
    }

    .form-textbox {
    width: 195px !important;
    }

    textarea {
    width: 195px !important;
    height: 89px !important;
    }

    #id_16, #id_21, #id_23,
    #id_26, #id_27, #id_28,
    #input_14 {
    position: absolute;
    }

    #id_16 {
    top: 70px;
    left: 0;
    }

    #id_28 {
    top: 394px;
    left: 0;
    }

    #id_28 .form-textbox {
    width: 37px !important;
    }

    #id_29 {
    width: 260px;
    padding-bottom: 27px;
    }

    .form-radio-item {
    width: 100px !important;
    }

    #id_17, #id_24 {
    margin-left: 20px;
    }

    #id_21 {
    top: 148px;
    left: 300px;
    }

    .form-multiple-column, select {
    width: 260px !important;
    }

    /* Phone selector */
    .form-multiple-column span
    + span + span {
    position: absolute;
    left: 212px;
    }

    #id_23 {
    top: 273px;
    left: 0;
    }

    #id_26 {
    top: 340px;
    left: 300px;
    }

    #id_27 {
    top: 340px;
    left: 0;
    }

    #input_14 {
    top: 122px;
    left: 307px;
    }

    .form-description {
    min-width: 150px;
    left: 290px !important;
    }

    .calendar.popup {
    top: 355px !important;
    left: 60px !important;
    }

    .form-all {
    margin-left: 7px;
    }

    #input_19, #input_17, #input_16,
    #input_21, #input_23 {
    width: 242px !important;
    }

    2. Set the E-mail choice in the How should we get in touch with you? field to be selected by default and add a condition to hide the e-mail field when Phone is selected

    When done, your form should look and function like this clone of it. Regarding the CSS, it would be best to retain its comments, so that whenever the need arises to alter some aspect of an element or elements, you'll know at a glance which rules to edit. (Incidentally, I noticed the absence of question marks and the end of What is your expected video length and What is your budget labels.)

    Be sure to let us know if you need additional assistance with this.


    Wayne

  • Profile Image

    Answered by barq on August 14, 2012 at 02:59 AM

    Hi Wayne,

    Critical problem here :( - I hope you can look at it very quickly. The code completely messed up my form - see Error. Please check it out as soon as you can. I was stupid enough to copy your new code as a backup and overwriting my original code. So I don't have ANY backup. And I can't undo. How do I fix this?

    UPDATE: I have temporarily replaced the form with an old form. The new messed up form is on "barqvideo.com/contact2".

    Anders

  • Profile Image
    JotForm Support

    Answered by abajan on August 14, 2012 at 06:10 AM

    Anders

    While your form and my clone of it contain the same injected CSS, it appears that changes (in addition to the CSS) were made to one or both of our forms after I did the cloning. For one thing, our forms' widths don't match. Mine is 630px and yours is just 545px. I will go into your account and see what I can do. In the meantime, change the source (src) attribute of the form's iFrame in your page from http://form.jotformeu.com/form/21572166867361 to http://www.jotform.co/form/21986876279880 and let us know if it makes a difference.  


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 14, 2012 at 06:23 AM

    Hang on!

    Don't change the iFrame. I was able to (partly) correct the problem but the phone field isn't showing when phone is selected. Give me a few minutes to fix that.

  • Profile Image
    JotForm Support

    Answered by abajan on August 14, 2012 at 07:28 AM

    Anders,

    With the exception of IE6 and IE7, everything should be fine now. The condition wasn't showing the Phone number field because the label of the second radio button of the How should we get in touch with you? field was changed from "Phone" to "Phone (preferably)". I changed it back to just "Phone", changed the default selection in the said field from "E-mail" to "Phone", set the Phone number field to Required and made the requisite adjustments to the conditions.

    The extra text in the "Phone (preferably)" label was affecting the alignment of the Phone number field (and possibly others). So, I substituted a text element which you will notice when the mouse is hovered over the How should we get in touch with you? field. You may change the text to your liking. If you don't like the hover box's position, it can be moved from the right of the field to above or below it. Just let me know and I'll provide the necessary CSS.


    Wayne

    P.S. Getting the form to display correctly in IE6 and IE7 could be tricky but I'll see what I can do to accommodate IE7. (We can safely ignore IE6 because hardly anyone uses that browser nowadays.)

  • Profile Image

    Answered by barq on August 14, 2012 at 07:40 AM

    Hi Wayne,

    I appreciate your prompt answer and your work. Thanks! You truly go out of your way to provide support here. I'm amazed!

    Yes, you're right I actually made some changes to the width to make the form fit into the layout. I didn't realize my changes caused the problem :-/

    Your solution seems to have fixed it! One thing I need to change though is that the e-mail field should always appear (and be required to fill and be the default), even if they select "Phone" in "How should we get in touch with you?". The idea with the "How should we get in touch with you?" field is only to let them tell us if they want us to call them initially or if they prefer e-mail. We always need their e-mail address in case we can't get through to them.

    The hover position is perfect, i'll just change the text a bit.

    Could be great to have the form work with IE7. Nice to see that IE is disappearing :)

    Thanks again!

    B.t.w. I'm having problems using the formatting buttons on this support forum on Safari 6 on Lion, so my text is bold above - may be a bug...

    Anders

  • Profile Image
    JotForm Support

    Answered by abajan on August 14, 2012 at 10:58 AM

    Hi Anders

    Thanks for your kind words. I've made the necessary adjustments to have the E-mail field always visible and have "E-mail" selected by default in the How should we get in touch with you? field. I also just discovered that the "Please complete all required fields." error message was incorrectly positioned because it blocked the label of the Link to video example field. That has been fixed with the addition of the following rule which you'll notice at the end of the injected CSS:

    .form-button-error {
    margin-left: 300px;
    }

    I'll have a go at the IE7 issue later but I can't guarantee anything.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on August 14, 2012 at 11:22 AM

    Oh, thanks for the heads up on the Safari 6 on Lion forum bug. I'll check if others have reported this and submit a ticket if one hasn't been submitted already.

  • Profile Image

    Answered by barq on August 15, 2012 at 05:28 AM

    Hi Wayne,

    Thanks! Didn¨t even notice that problem. I'm glad it's fixed.

    All the best

    Anders

  • Profile Image

    Answered by reverett on June 29, 2015 at 02:15 PM

    I have the same issue in my form. I clicked on the solution which I assume is in the absolute positioning link above. Is that right? The problem is that the link does not work when I click on it. Where can I find information to fix the alignment on field that should be on the far right side.

  • Profile Image
    JotForm Support

    Answered by david on June 29, 2015 at 02:51 PM

    @reverett  Since this thread is rather old and may contain outdated information, if you wouldn't mind, please create a new thread and let us know the details of your specific issue.  Include the form your are working on, a screenshot of what you would like help adjusting as well as any other specifics regarding how you would like your fields lined up and we will be happy to help.