What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Please help integrate this feature

    Asked by titaneer 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 

    Page URL:
    http://form.jotform.us/form/20644723555151

  • Profile Image

    Answered by fxr 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.