How to align three column fields nicely?

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.

Thank you!

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

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.

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

Thanks

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?

Screenshot:

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

Thanks

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?

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.

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.

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!!

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!

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.

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.

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.