https://legacy.forums.gravityhelp.com/topic/pricing-field-setup-and-css Gravity Support Forums Topic: Pricing Field Setup and CSS en-US Sun, 19 Apr 2026 23:29:27 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/pricing-field-setup-and-css#post-37577 Tue, 11 Oct 2011 14:14:34 +0000 Kevin Flahaut 37577@https://legacy.forums.gravityhelp.com/ <p>There aren't any reusable class names in my example. You would target each element by it's unique ID ( # ) and define a new rule for it.</p> <p>Now, if you have a ton of these, it's going to take a while to customize everything that way. You can tinker around with creating a re-usable class name and then applying it via the form editor, but you might have to take a different approach somewhat. That's probably not going to work so well using the method I outlined. </p> https://legacy.forums.gravityhelp.com/topic/pricing-field-setup-and-css#post-37574 Tue, 11 Oct 2011 13:59:19 +0000 Shonari 37574@https://legacy.forums.gravityhelp.com/ <p>Thank you so much!</p> <p>So for each item I will have to either:</p> <p>Duplicate the css and change the css class name in both the css and advanced field options </p> <p>OR</p> <p>Keep the same css class name and just add it across all the fields.</p> <p>PS Based on your examples, what would be the name of the 'css class name'? field_106_3.gfield or just 106_3 </p> https://legacy.forums.gravityhelp.com/topic/pricing-field-setup-and-css#post-37571 Tue, 11 Oct 2011 13:33:33 +0000 Kevin Flahaut 37571@https://legacy.forums.gravityhelp.com/ <p>You can do something similar, but it's going to require some CSS customization. I'm not sure how comfortable you are with that or not, but here's a gist of it.</p> <p>I created a test form with a few fields.. using a section header field to create the "box" and then absolutely positioning the product/quantity fields and product image ( added via a HTML block ) to create the overall look you referenced.</p> <p>screenshot: <a href="http://bit.ly/pyxKhm" rel="nofollow">http://bit.ly/pyxKhm</a></p> <p>For my sample form ( form ID #106 ) here's the CSS I used to make it happen. You would of course update this to the correct form and field ID's in your form.</p> <pre><code>[css] /* example assumes this is form ID #106 - update your form ID and field ID&#39;s in the rules below and tweak as needed to suit your preference */ body #gform_wrapper_106.gform_wrapper { position: relative } /* size the section header and apply a border to it for a box or container effect */ body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_1.gfield.gsection { height: 240px; border: 1px solid #ccc; border-bottom: 1px solid #ccc; padding:20px 20px 20px 180px } /* absolutely position the product and quantity fields in the &#39;box&#39; above */ body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_2.gfield { position: absolute; top: 165px; left:180px } body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_4.gfield { position: absolute; top: 215px; left:180px } body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_3.gfield { position: absolute; top: 265px; left:180px } /* absolutely position the product image added in the HTML field */ body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_8.gfield { position: absolute; top: 60px; left:6px }</code></pre> <p>and just to make it easier to see how it went together, you can <a href="http://dl.dropbox.com/u/688846/gravityhelp/order_baskets/gravityforms-export-2011-10-11.xml" rel="nofollow">download my sample form ( XML ) here</a> and import it into your Gravity Forms admin via the import tool to deconstruct.</p> <p>I hope that helps point you in the right direction. </p> https://legacy.forums.gravityhelp.com/topic/pricing-field-setup-and-css#post-37551 Tue, 11 Oct 2011 11:47:50 +0000 Shonari 37551@https://legacy.forums.gravityhelp.com/ <p>I have been using Contact Form 7 to create my order forms but the problem I found was that it doesn't handle blank fields very well. Here is where Gravity Forms come in.</p> <p>The problem is I dont quite understand how to set up the fields as i did with contact form 7, add images to each section and assign prices and quanity to each size. I have read up on it and got some of it working but its a bit confusing.</p> <p>Here is what I would like to achieve.</p> <p><a href="http://img687.imageshack.us/img687/5754/platter.jpg" rel="nofollow">http://img687.imageshack.us/img687/5754/platter.jpg</a></p> <p>Where the blank fields are the quantity.</p> <p>Which form field achieves this and where do i add the relevant css to make it all come together? </p>