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 align three column fields nicely?

    Asked by glenpoolps on June 23, 2015 at 09:16 AM

    Hello,

    I am needing assistance with the last page of my form. It is entitled "Employment - Certified Staff Application". I've attempted to include the correct URL below.

    1) I have three columns of dropdown menus and I would very much like these to align nicely. I am at a loss as to how to accomplish this.

    2) I am having trouble with the very bottom of my form as well...I just need "Back" "Next" and "Submit" in the blue line at the bottom. For some reason there are three lines and it looks quite messy. Please advise.

    Thank you!

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

    align fields three columns
  • Profile Image
    JotForm Support

    Answered by Welvin on June 23, 2015 at 10:53 AM

    I've cloned your form and made the changes in terms of the columns. Kindly check it here:

    http://www.jotformpro.com/form/51734774140959 

    You can clone it back by following the steps on this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Now, I have added the following custom CSS codes in the form to align the fields perfectly:

    .form-line.form-line-column {

      width: 185px;

    }

    Then made the adjustments in terms of their positions through Field Positioning: http://www.jotform.com/help/90-Form-Field-Positioning.

    I hope that works for you.

    As for the button alignments, will check it and let you know in this thread: http://www.jotform.com/answers/594730.

    Thanks

  • Profile Image

    Answered by glenpoolps on June 23, 2015 at 11:33 AM

    Hi!

    When I click the link below the phrase "Kindly check it here" I receive a pop-up message that says "Invalid Form URL". Please advise.

  • Profile Image
    JotForm Support

    Answered by Welvin on June 23, 2015 at 11:56 AM

    My apologies. The correct URL should be: http://www.jotformpro.com/form/51734774140959.

    Thanks

  • Profile Image

    Answered by glenpoolps on June 23, 2015 at 01:28 PM

    Well, it won't let me view the last page without first filling in all of the required fields which unfortunately I do not have the time to do. Can you link me to just the last page directly?

  • Profile Image
    JotForm Support

    Answered by Welvin on June 23, 2015 at 01:43 PM

    Screenshot:

    I have also removed the required field validation. You should now be able to click "Next" without filling up the fields.

    Thanks

  • Profile Image

    Answered by glenpoolps on June 23, 2015 at 06:57 PM

    Ok. The last page looks PERFECT!! However, now nearly all of my other pages look awful and nothing at all like I set them up to be! Particularly pages 1, 2, and 3. I worked very hard to set the field boxes to the appropriate lengths on those pages and now they are all wacky (some even hanging off the page) and not at all how I set them up!!

    This is my biggest frustration with Jotforms thus far: if you change one page (or one element) it seems to change ALL of the pages or all of the elements!! Not ok!!! I want my fields on the other pages to be left alone! Furthermore, things like the address element are now squished to one side whereas before I had them placed in the middle. Is it not possible to adjust the LAST PAGE ONLY?

  • Profile Image
    JotForm Support

    Answered by Charlie on June 23, 2015 at 10:11 PM

    You can set back your form to an earlier state of it, you can follow this guide: http://www.jotform.com/help/294-How-to-View-Form-Revision-History. Revert back to when the change in the last page wasn't implemented. After that, use this code instead:

    #id_374, #id_384, #id_395, #id_406, #id_417, #id_373, #id_385, #id_396, #id_407, #id_418, #id_427, #id_438, #id_449, #id_460, #id_428, #id_439, #id_450 {

        width : 185px;

    }

     

    To select specific elements in the form, you just need to double click the element. The specific field ID of it will then be added in the CSS tab. Here's my cloned form, see if this works as you expected. You can check it here: http://form.jotformpro.com/form/51737860187969?. I'm not sure what the changes you made in your form and how the first pages should look like, but reverting back to the earlier version and using the code above should work.

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 11:12 AM

    First, how do I know if I need to set my form back to an earlier state? When one of the support people on your end gives me a link to an alteration that has been made to my form for me to see, is that alteration automatically made/saved to the form under my list of forms or not? I am totally confused about that. (We are new to this product...just checking it out at this point before deciding whether to purchase the paid version so I am still learning how it functions.)

    Second, regarding that code you sent, I don't understand where to stick that code. I mean I know I have to open up that CSS tab but from there I am lost. I sure wish there was a more simple way. Please advise.

     

  • Profile Image
    JotForm Support

    Answered by Kiran on June 24, 2015 at 12:40 PM

    The link provided with the changes is a cloned version of your JotForm. Since these changes are made in their respective accounts, they will not be reflected on your JotForm. If you are satisfied with the demo form provided, you may add the provided CSS code to your JotForm so that the changes shall be made on your JotForm. Please refer to the guide below to add the custom CSS code to your JotForm :

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Or you may also clone the provided modified again to your account by following the guide below :

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Once the changes are made to your JotForm and if you wanted to revert it to previous version, it is possible Revision history. Please refer to the guide below that explains how the revision history works.

    http://www.jotform.com/help/294-How-to-View-Form-Revision-History

    You may now either add the provided CSS code to your JotForm or clone the provided form to your account.

    Hope this information helps. Please do not hesitate to get back to us if you have any other questions. We will be happy to help.

    Thank you!!

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 12:56 PM

    Ok. So where exactly do I need to put the code that Charlie sent me above. I am unclear on that. Once I open the CSS tab it is all foreign to me.

    If I follow the steps in your first link above and click on Preferences, Form Styles, the code I insert will affect the WHOLE form, will it not? How can I adjust only 1 page or 1 element with this CSS code stuff? This is so difficult to me!

     

  • Profile Image
    JotForm Support

    Answered by Charlie on June 24, 2015 at 02:29 PM

    Apologies for the confusion, and thank you for your patience in following our guides.

    Here's a quick guide.

    1. Open your Form Designer icon.

    2. You can paste the custom CSS code at the end of the CSS line.

     

    The one in the Preferences is also an option, although, visually the Form Designer is much more easier to navigate and use.

     

    For the Form Designer Tool, you can check this guide to learn more about it: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-. Regarding CSS, it is a way to style an HTML visually, the form is compose of HTML so if you are an advance user or just want to learn more about it, you can start from here: CSS Tutorials.

    I hope that somehow helps.

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 03:23 PM

    Ok miracle of miracles!! I got the code to work thanks to your specific example of where to put it! Thank you! My only concern is that when I cut and pasted the code it ended up on line 949 in my form; whereas I see that it is on line 924 in your example. What does this mean? Is that a problem?

    Additionally, I am trying to get the very very bottom of my form (under those 3 columns) to cooperate using a code that Welvin sent me under a different thread. (I need a Back and a Submit button in one blue line at the very bottom.) No matter where I put that code from him though, nothing changes and I am totally stumped as to how to get it work.

    I mean without a pictorial guide as you have supplied above, I simply have NO CLUE where to paste these crazy codes! I have a brain that very much wants to understand why and how things work and I'd like to get to the point where I know exactly where to put those codes, I just don't know how to learn that. I guess I will try your link above entitled CSS Tutorials.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 24, 2015 at 03:56 PM

    Great!! Glad to see that you are now able to insert the provided CSS code to your JotForm to make changes. The line numbers may vary because of the empty lines between and they need not to be the same as in the screenshot.  

    You can add the other code provided in the other thread continuing the earlier CSS code. That is in your JotForm it might come after the line 949.

    Hope this information helps.