Html Form On Product Description page

[fxpro]

Hello,

I'm trying to figure out how to add a customized html form to a certain product I am selling. The product usually is ordered in multiple quanitys with differnt sizes and numbers that need to be defined by the customer for each item. So I am trying to find a way to make it easyier and faster for the customer so that they can imput their data and add the selected quanity to the shopping cart while still getting all the data sent to us. Hope this makes sense.

[gjh42]

And you have determined that it can't be done with attributes?

There are mods that may also help for some situations, depending on exactly how you need this to work.
It is possible to add custom fields to products, too.

[fxpro]

I have around 20 attributes that need to be added to this product and I can't ever get it too look the way I want it layed out. I am hoping it will be easyier to add a form to the listing so that I can make it easyier for our customers to fill out.

[gjh42]

A link to your site will let us suggest ways to adjust the attribute display/layout. This will probably be easier than coding all-new options input from a new form, even if some tweaking needs to be done to enable manipulation of the attribute elements. (There are already some class tags that can isolate specific individual elements.)

[fxpro]

Hello,

Here is a link to one of our products with quite a few attributes http://store.trans-techllc.com/index...&products_id=9

is there anyway to make the attributes look cleaner?

[gjh42]

"Cleaner" is a subjective term. Can you post a picture of the kind of layout you would like?

You have currently encased the attributes section in a bunch of table elements and tags that are not relevant to attributes, and the actual attribute input displays are concealed. Is the set of <td> boxes the way you want the inputs to look?

It would be difficult for us to test attribute reconfiguration on the output your page is currently giving. A plain vanilla attribute section would be a better starting point.

[fxpro]

Hello,

I was messing around a little trying to clean it up a bit I have installed the original attributes file so you can see the standard layout. I would like it to be centered and I'm trying to find a way to make the attributes look easyier to read and see. As of now it just seems like all the wording is running into each other.

[gjh42]

Add these to the bottom of your stylesheet to see a start to organization.

#productAttributes {background-color: #ddffdd; border: 1px dotted #ff9999;}
h4.optionName {display: block; float: none;} 
.wrapperAttribsOptions {width: 24%; height: 6.5em; float: left; background-color: #aabbff; margin: 2px; text-align:center;}
.wrapperAttribsOptions .back {float: none;} 
.wrapperAttribsOptions+br {display: none;}
label.attribsInput {line-height: 1.2em;}
h3.attributesComments {display: none;width: 23%; border-bottom: 1px solid red; background-color: #ffaaaa;}
/* ^ had to hide these because they mess up the layout - add wrapper to enclose this and wrapperAttribsOptions*/
#productTellFriendLink {clear: left;}

There are a few things that you will need to change in the PHP.
The attribute comments are "loose" before the .wrapperAttribsOptions they belong to, and both need to be bound in a wrapper so they stick together. The styling above hides the comments for now so the layout can be seen.
You need to remove the <br class="clearBoth" /> after each .wrapperAttribsOptions (the CSS above disables it for now), and probably add a new one at the end of the #productAttributes div. (The #productTellFriendLink {clear: left;} helps for now, but the br is necessary to give a boundary to the whole productAttributes section.)

Plenty more can be done; this is a taste of the possibilities.

[fxpro]

Add these to the bottom of your stylesheet to see a start to organization.

#productAttributes {background-color: #ddffdd; border: 1px dotted #ff9999;}
h4.optionName {display: block; float: none;} 
.wrapperAttribsOptions {width: 24%; height: 6.5em; float: left; background-color: #aabbff; margin: 2px; text-align:center;}
.wrapperAttribsOptions .back {float: none;} 
.wrapperAttribsOptions+br {display: none;}
label.attribsInput {line-height: 1.2em;}
h3.attributesComments {display: none;width: 23%; border-bottom: 1px solid red; background-color: #ffaaaa;}
/* ^ had to hide these because they mess up the layout - add wrapper to enclose this and wrapperAttribsOptions*/
#productTellFriendLink {clear: left;}

There are a few things that you will need to change in the PHP.
The attribute comments are "loose" before the .wrapperAttribsOptions they belong to, and both need to be bound in a wrapper so they stick together. The styling above hides the comments for now so the layout can be seen.
You need to remove the <br class="clearBoth" /> after each .wrapperAttribsOptions (the CSS above disables it for now), and probably add a new one at the end of the #productAttributes div. (The #productTellFriendLink {clear: left;} helps for now, but the br is necessary to give a boundary to the whole productAttributes section.)

Plenty more can be done; this is a taste of the possibilities.

Thanks, This makes it look 10x better. I do have one more question I have a product which can be found here http://store.trans-techllc.com/index...&products_id=7

That needs a little more work is there a way i can make the attributes into a layout similar to the image or some type of form I can use. The reason being is every little box shown in the image on the link needs to have a number in it or text and it seems near impossible to use attributes and show a definition as to what line I am referring to for the customer to fill out.

[gjh42]

With another wrapper div added to the attributes file, comments can be accommodated in the layout to identify the inputs better. It may even be possible to have an individual layout for a particular set of attributes, with some more custom coding.