PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Pricing Field Setup and CSS

  1. 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.

    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.

    Here is what I would like to achieve.

    Where the blank fields are the quantity.

    Which form field achieves this and where do i add the relevant css to make it all come together?

    Posted 12 years ago on Tuesday October 11, 2011 | Permalink
  2. 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.

    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.


    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.

    /* example assumes this is form ID #106 - update your form ID and
    field ID'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 'box' above */
    body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_2.gfield {
    	position: absolute;
    	top: 165px;
    body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_4.gfield {
    	position: absolute;
    	top: 215px;
    body #gform_wrapper_106.gform_wrapper .gform_body ul.gform_fields li#field_106_3.gfield {
    	position: absolute;
    	top: 265px;
    /* 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;

    and just to make it easier to see how it went together, you can download my sample form ( XML ) here and import it into your Gravity Forms admin via the import tool to deconstruct.

    I hope that helps point you in the right direction.

    Posted 12 years ago on Tuesday October 11, 2011 | Permalink
  3. Thank you so much!

    So for each item I will have to either:

    Duplicate the css and change the css class name in both the css and advanced field options


    Keep the same css class name and just add it across all the fields.

    PS Based on your examples, what would be the name of the 'css class name'? field_106_3.gfield or just 106_3

    Posted 12 years ago on Tuesday October 11, 2011 | Permalink
  4. 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.

    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.

    Posted 12 years ago on Tuesday October 11, 2011 | Permalink