Change form layout for purchase order into 3 columns

would like to go into columns with a few other changes

Hi churchsaver,

 

To change the format as you specified, you may inject the following CSS code to your form.

.form-product-item {

border: 1px solid #EFEFEF;

margin: 1px;

float: center;

width: 200px;

text-align: center;

}

.form-product-item img {

width: 150px;

height: 150px;

float: none !important;

margin: auto !important;

}

.form-product-item + br {

display:none;

}

br + b {

float: left;

padding-top: 20px;

}

.form-payment-total {

line-height: 50px;

margin: 1px;

border: 0px solid #EFEFEF;

border-radius: 4px;

padding: 15px;

padding-right: 193px;

padding-left: 6px;

}

.form-product-item .form-sub-label-container {

width: 200px !important;

}

span.form-sub-label-container input {

float: none !important;

}

 

To inject the CSS code to your form, please follow the guide below.

 

Note: You have to inject the code at the end of your previously injected CSS codes.

 

Do let us know if you need further assistance.

 

Regards

For some reason it just put everything in 1 column for me.  Am I doing something wrong?

And is there a way to take the check marks off?  Thanks in advance!!! :)

I have revised the form CSS by Chriistian and made it to take three columns

You can get a copy of it from this URL , you can also use the design section to edit the css if you want real time changes and to tweak the values.

http://form.jotformpro.com/form/51484145154958

 

It is not advisable to hide the check boxes as this will make the users unable to select the type of package they want.

 

I have hidden it just for illustrative purposes, it the last line in the custom CSS

 

 

I'm sorry... I'm a little lost....  Where do I find the code to inject?  Any way you can put it here for me to copy and paste?  I'm a little green when it comes to this.

 

Thanks In Advance!

In this case I do recommend you to simply clone my colleague's form(http://form.jotformpro.com/form/51484145154958) example in your account and use the cloned version.

Check this guide in order to clone that form in your account: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

 

Is there any way I can just be provided some css code to inject?  That would really be helpful, as I already have some things linked to that specific form and if I created a whole new one it would mess up what is going on with what I already have in place.

Thanks in advance!

I'm still only getting two columns. Any way to get that to 3 columns?

1920x1080

That worked.  Any way to make where it says "# of Boxes" center?

That worked.  Is there a way to also get the box that you put the amount in to be centered?