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

    Remove checkbox and currency mark from product list

    Asked by cateringonline on October 27, 2015 at 06:49 AM

    Hi

    Pls refer to attached screenshot. I would like to do the following:

    1. Hide the check box so users don't have to click on check box then key in qty

    2. Hide the currency SGD

     

    Thanks

    Page URL:
    https://www.jotform.com//?formID=52980395635466

    Screenshot
    purchase form formatting currency check
  • Profile Image

    Answered by Carina on October 27, 2015 at 11:30 AM

    Unfortunately it is not advisable to hide the checkbox, because like that the products will not be selected even if a quantity is  added.

    The solution is to add a text-box field and add the product description to that text-box field.

    Now you can add a calculation field (this field can be hidden) and add a formula (80*Uniform staff field):

    https://www.jotform.com/help/259-How-to-perform-calculation-in-the-form 

    Repeat this process to all the products.

    Now you can add another calculation field that will sum all the other product calculation fields.

    Finally edit the Payment tool so that it receives the amount from the total field. In order to achieve that please select collect donations > Get amount from > total field:

    You can test and clone the demo form:  

    https://form.jotform.com/52994603264966 

    Let us know if we can assist you further.   

  • Profile Image

    Answered by cateringonline on October 27, 2015 at 11:32 AM

    Thanks. Is there any way to hide the SGD currency?

     

    yang

  • Profile Image

    Answered by Carina on October 27, 2015 at 12:55 PM

    It is possible, but will need a complex workaround because there is no separate css for just the currency. The css class is for the price.

    First we need to hide the price, by adding this css ;

    .form-product-details

    {visibility:hidden !important;}

    Now we need to add specific css to each one of the products:

    #input_89_1015_price, #input_89_1001_price, #input_89_1008_price, #input_89_1003_price, #input_89_1004_price, #input_89_1005_price, #input_89_1006_price, #input_89_1007_price, #input_89_1009_price, #input_89_1010_price, #input_89_1017_price

     

    {visibility: visible !important;}

     

    You can test and clone the demo form:  

    https://form.jotform.com/52994689640978? 

    Let us know if we can assist you further.   

     

  • Profile Image

    Answered by cateringonline on October 27, 2015 at 01:01 PM

    Thanks!

  • Profile Image

    Answered by Ben on October 27, 2015 at 03:43 PM

    I would just like to add up to the answer of my colleague above.

    You could hide the checkbox, but then no one would know if they made the selection by clicking on the label or not. It will also make it practically impossible for those that use keyboard only to fill out the form to see that the keyboard stopped on the label for a specific reason, but nonetheless it is possible. My only suggestion is to then leave an indication that they had selected the item:

    /* remove checkbox */
    input.form-checkbox {
        display: none;
    }
    /* add text behind the label showing "( selected )" when the product is clicked */
    input.form-checkbox:checked + label:after {
        content: "( selected )";
        float: right;
        margin-left: 10px;
    }

    Next to this, since you might need to add or remove some items in your products list, the following code will remove the currency no matter the currency, number of products, or anything else:

    /* Hide currency */
    .form-product-details b {
        visibility: hidden;
    }
    .form-product-details span {
        visibility: visible;
    }
    .form-product-details span:before {
        content: "$";
        margin-left: -1em;
    }
    .form-product-details span:after {
        content: "";
        margin-right: -2em;
    }

    The complete code that you can add to your form would be:

    /* remove checkbox */
    input.form-checkbox {
        display: none;
    }
    /* add text behind the label showing "( selected )" when the product is clicked */
    input.form-checkbox:checked + label:after {
        content: "( selected )";
        float: right;
        margin-left: 10px;
    }
    /* Hide currency */
    .form-product-details b {
        visibility: hidden;
    }
    .form-product-details span {
        visibility: visible;
    }
    .form-product-details span:before {
        content: "$";
        margin-left: -1em;
    }
    .form-product-details span:after {
        content: "";
        margin-right: -2em;
    }

    and can be applied to any form (it is not form specific).

    All that is needed is to always add the code at the bottom of the custom CSS field (unless otherwise mentioned), as shown here: Inject Custom CSS Codes