CSS Format and Layout Help!

Hi Guys,

Just trying to get the form to have a proper layout for my employees to use.  I've attached a graphic for reference, and the fields are conditional - so to match the graphic I selected "closing end of week" and "club manager" in the first two drop downs.

http://form.jotformpro.com/form/50968165278973

Thank you guys for helping me get this right, your the best!

Roger

Hello Roger,

Looking at the picture you have shared, I am not sure if I have understood your requirement correctly.

Do you want to center align align your form fields and remove the top margin of form?

Upon checking form, I found that the form fields appears to be aligned in center of form. Where you have two matrix fields, they appear to take a little more space. Please check the screenshot below:

Do you want to align them with the other fields as well? You will have to move the matrix fields in separate rows or reduce the width. Do let us know your preference and we will try to help you.

To reduce the top margin or form, please inject the following custom css code in form:

.form-all {

  margin-top: -50px;

}

The following guide should help you on how to inject custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

We will wait for your response.

Thank you!

There are a total of 6 format changes I need to make to the form,

and maybe we can increase the width of the form instead of making the table smaller to bring it to the center?

thank you!

Hello Roger,

There are a total of 6 format changes I need to make to the form,

What are the format changes you want to make in your form? Please explain your requirement a bit more in detail and we will surely help you. 

We will wait for your response.

Thank you!

I did a side by side screen shot, and put a red box around the 6 changes needed.  The screen shot on the right is what I am trying to get the form to look like.

The screen shot on the left is what is currently showing.

1.  The first 4 fields at the top, I would like to put in the format of 2 rows, and 2 columns

2.  The label above each box/matrix grid, I would like to line up at the top left as shown

3.  I would like to widen the width of the form, to make sure all content fits properly and is centered

4.  In the middle of the form, I have two drop downs, which I would like to format in two columns and one row (side by side), with the label on the inside of the field.

5.  I would like to format the "Down Payment" and "Contract Amount" (that are below each of the membership sold, and PT contract sold boxes) to be the same size and font as the boxes above them

6. I would like the "MEMBER SALES" and "PT SALES" text heading to be in two columns side by side, with two fields centered below each (Down Payments, Total Contracts)

7.  Oh, and the last one (there are 7 total) is reducing the width of the first 5 drop down boxes at the bottom of the form by half.

Thank you for your help, I hope these details help!

@ RogerYelvington01

Right, I can see all of them in your screenshot from your first post. :)

We'll check it and apply it on a cloned version of your form so you can clone it back afterwards. Stay tuned!

Here's the form http://form.jotformpro.com/form/50985382349972?.

Feel free to clone this form back if you like. 

I did not touch the existing styles on your form. I only added this CSS codes and made some minor merging and moving of fields to creating 2 columns.

Thanks!

Elton Chris, 

This looks great!  I created a clone of your's here - and after doing testing with the form have a few more edits to make this form complete.  I hope you can help, thank you!

Here is the clone I made, and then made some additional updates:
http://form.jotformpro.com/form/50986145344965

Hi,

Our colleague EltonCris is offline at the moment. But he will also get the notification of your latest message so he will get back to you as soon as he is available.

Since EltonCris already have done the bulk of the resolution, it will be best if he will also be the one to proceed and complete it.

I will also contact him and let him know of your update.

We will update you here as soon as possible.

Thanks.

Hey Guys, any update?

Here's the form. http://form.jotformpro.com/form/50996146530964?

About the dollar sign, unfortunately I could not find a workaround for it. I think currency validation is the right solution. You can also try input mask but I don't think that's ideal.

I also can't seem to find the 4 column matrix in your cloned form so I decided not to touch that part. But here's my recommendation on that part. This is so much easy rather than separating these two rows unless you want to achieve something.

Thanks!

Hi!

I have the fields below, so that way I can do the auto calcuations that feed into the fields at the bottom for the total down payments and total contract amounts

Thank you!

Alright, got it. :)

Mind finalizing the form including the 4 column matrices? Provide the form URL afterwards so I can clone it and provide to you the final layout.

Thank you!

Updated for review on this form:
http://form.jotformpro.com/form/50985541435965

Thank you!

Just checking in on this?

Sorry for the delays. I will check with EltonCris on this.

We will let you know once we have updates here.

Thanks.

@RogerYelvington01 

Apologies for the delay. Here's the form:

http://form.jotformpro.com/form/51003095496958?

Let me know if I have missed anything. Thank you!

This looks great, I continued working on the form today and am striving to make it as user friendly as possible.  As well as printer friendly.  Looks like only a few small edits will get us there!

I've attached a visual of the final round of edits, and they are the following:

1.  Move Location Drop box from the bottom of the form to the top
(And also arrange the 3 drop boxes at the top in a single row as shown)

2. Reduce margins in 5 different areas throughout the form to reduce wasted space

3.  Move "MEMBER SALES" and "PT SALES" Header Text just above left edge of boxes below

4.  Error in "facilities check" and "Member Sales - opening" boxes not showing label header

Thank you!

Roger

Also, almost forgot!  This is the most current version of the form:

http://form.jotformpro.com/form/51015965154958

Thank you!

Roger

Hi Roger,

I will get back to you on this later today.

Thanks!

Here's the form mate. Sorry for a bit delay. http://form.jotformpro.com/form/51027430352948?

Should you want further changes, let us know. Thanks!