Customize Payment Widget

  • riversconservatory
    Asked on October 23, 2015 at 11:58 AM

    I have a rather long order form and my patrons are confused by having to check both the "ticket choice" box and having to fill out the quantity box (old people ...)

     

    Is it possible to:

    1) Remove the check box

    2) Replace with just the quantity box, defaulted at zero

     

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

     

    Thanks,

    jessi

  • victor
    Replied on October 23, 2015 at 2:29 PM

    To remove the check boxes, you can inject the following css code

    .form-checkbox {

        display: none !important;

    }

    If you like to change the quantity, enter the wizard of the stripe gateway.  In the wizard, click next until you get to the list of products. Select any product and click on the pencil icon on the left to edit the quantity. In the quantity you can add 0 option, before the 1.

    Customize Payment Widget Image 1 Screenshot 20

    Please let us know if this helps.

  • riversconservatory
    Replied on October 23, 2015 at 2:54 PM

    Thanks that did the trick. However, is there a way to move the quantity box to appear where the checkbox previously was (in-line)? 

    Also, is there a CSS snippet to hide the word "quantity?"

     

    https://form.jotform.com/52954271953968

  • David JotForm Support
    Replied on October 23, 2015 at 4:22 PM

    Adding this CSS should place the quantities on the same line as the product:

    .form-product-item .form-sub-label-container {
        margin : 3px 9px 1px 6px !important;
        position : absolute;
        top : 0px;
    }

    .form-product-item .form-checkbox {
        vertical-align : middle !important;
        margin-top : -3px !important;
        display : none;
    }

    .form-product-item br {
        display : none !important;
    }

    .form-product-item {
        width : 500px !important;
        margin-bottom : 1px !important;
        height : 25px !important;
    }

    And this code will remove the quantity label:

    #cid_34 label.form-sub-label {
        display : none;
    }

    Here is what the form would look like with the changes made:

    https://form.jotform.com/52955907152966