Customize Payment Widget

  • Profile Image
    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

  • Profile Image
    victor
    Answered on October 23, 2015 at 02: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.

    Please let us know if this helps.

  • Profile Image
    riversconservatory
    Answered on October 23, 2015 at 02: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

  • Profile Image
    david
    Answered on October 23, 2015 at 04: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