Is there a code or way to get payment donation option as button?

  • CBBMP
    Asked on March 29, 2019 at 3:06 AM

    Is there a code or way to get payment donation tiers (i.e. $5, $20) as buttons.

  • martin_cnd
    Replied on March 29, 2019 at 4:19 AM

    Just started playing around with JotForms so not sure if the classes will be the same (check using the inspector in your browser) but as a base for your styling you could use something like this. Read my comments in the css to see what does what:

    Quick Screenshot of what it looks like:

    answers Screenshot 10

    /*First we need to hide the default radiobutton*/
    .form-product-item-detail input[type="radio"] {
    display: none;
    }

    /*This will show (in my case) both buttons next to each other, you will likely have to adpat this or it might look off depending on your form*/
    li[data-type="control_paypal"] div div div {
    display: flex;
    flex-direction: row;
    }

    /*Make the name a little bigger and be on its own line with the description below*/
    .form-product-name {
    font-size: 18px;
    display: block;
    }

    /*remove default backgroun on hover*/
    .hover-product-item:hover {
    background: transparent;
    }

    /*These are the actual "Button" styles that style the label to look like a button*/
    .form-product-item-detail label {
    width: 100%;
    background: #fff;
    box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.17);
    border-radius: 40px;
    padding: 12px 16px;
    color: #343434;
    text-align: center;
    margin: 0 15px;
    transition: 0.25s ease-in-out;
    }

    /*Button styles on hover*/
    .form-product-item-detail label:hover {
    background: #f9c956;
    box-shadow: 5px 5px 9px 0 rgba(0, 0, 0, 0.17);
    transform: scale(1.02);
    }

    /*Button styles when its been checked / selected*/
    .form-product-item-detail input[type="radio"]:checked + label {
    background: #f9c956;
    }

     

  • roneet
    Replied on March 29, 2019 at 6:43 AM

    As suggested by my colleague you can inject custom CSS in your Form Designer to change the options to a button.

    To inject custom CSS please follow this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have further questions.

    Also, you may let us know your requirement so that we could guide you further.

    Here is the URL of the Demo Form of my colleague's Form:

    https://www.jotform.com/build/90871748617469

    Feel free to test and clone it.

    Thanks.