Please help integrate this feature

  • Profile Image
    titaneer
    Asked on March 05, 2012 at 01:52 PM

    Hello,

    From this forum topic: http://www.jotform.com/answers/46613-Multiple-Payment-Fields

     

    Please help me implement this solution:

     

    Answered by abajan on September 30, 2011 

    Hi again JotFormHelper

    It turns out that there's no need to embed the form anywhere to achieve categorization of products. If you already have a payment field and want to add labels to categorize its products, the trick is to add the categories as extra products in the field and give them each a price of $0.00 (or whatever the currency happens to be). You would then use injected CSS to hide every element of those categories but their labels. The reason for setting the price of each category to $0.00 is that in case a user should click a category instead of one of the products, nothing gets added to the total.

    Here is an example of such a form and below is its injected CSS:

     

    /* Drops list of products below "Products" label */
    .form-input {
    padding-top:30px;
    }

    /* moves products closer to each other */
    .form-product-item {
    padding-top:0;
    padding-bottom:0;
    }

    /* positions the product selector */
    .form-product-item .form-sub-label-container {
    top:-4px;
    left:200px;
    position:absolute;
    }

    /* hides the word "Quantity" */
    select.form-dropdown + label {
    display:none;
    }

    /* styles categories */
    label[for="input_3_1008"],
    label[for="input_3_1007"] {
    margin-left:-30px;
    color:#777;
    font-weight:bold;
    }

    /* hides all elements of the categories except label */
    #input_3_1008,
    #input_3_1007,
    label[for="input_3_1008"] span,
    label[for="input_3_1007"] span,
    select#input_3_quantity_1008_0,
    select#input_3_quantity_1007_0 {
    display:none;
    }

    Firebug was used to determine which selectors needed to be targeted. If you need help integrating this solution into one or more of your forms, please let us know. Our team will be happy to assist you.

    Cheers

     

    ~ Wayne

     

     

     

    Thank you 

  • Profile Image
    fxr
    Answered on March 05, 2012 at 04:59 PM

    @titaneer,

    Please create your form as much possible, provide us with its URL/ID and explain exactly how you want us to try to customise it & we will try our best to help you out.