How to add Donation under Sell Products option in payment tools

  • lhumc
    Asked on October 23, 2014 at 5:02 PM

    We are a non-profit and sell multiple products. However, we would also like to accepts tips/donations at the time a product is purchased because a customer is less inclined to go back to our website and make a purchase and donation separately. We currently have a donation setup as a "product" the customer can choose. However, we'd like the customer to be able to enter how much they'd like to tip/donate.

    If this can't currently be done, I'd like to submit this as an enhancement request. Thanks in advance!

  • Charlie
    Replied on October 23, 2014 at 7:44 PM

    Hi,

    I believe we can make a workaround for that. We can make a custom field letting your customers to donate with a specific amount, this will still be part of your products in the payment options you have. You can follow the steps below.

    1. Go to your payment options, and if you already have you can skip this part.

    How to add Donation under Sell Products option in payment tools Image 1 Screenshot 70

    2. Add a product for donation. The price will be $1, we will customize this so that the customer can choose or fill in the amount he/she wants.

    How to add Donation under Sell Products option in payment tools Image 2 Screenshot 81

    3. Click Add New Option and choose Add Quantity Property. This field will act as the main textbox to where the user will fill in the amount that he/she wants to donate.

    Example: Price is $1 x Quantity 24 = $24

    How to add Donation under Sell Products option in payment tools Image 3 Screenshot 92

    4. We will then have a product, same with the others having a checkbox and label price. *Note: I'm viewing this on my Form Designer, we will use a custom CSS code to inject it in our form so that we can style product Donation.

    How to add Donation under Sell Products option in payment tools Image 4 Screenshot 103

    5. I used a custom CSS code:

    #input_9_1005.form-checkbox {

        display : none;

    }

     

    label[for=input_9_1005] b {

        display : none;

    }

    You can inject this using this tutorial http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Or you can go to your Form Editor->Under Form Style tab->Choose Beta Form Designer, on the right side you will see a CSS panel, you can then inject your CSS code there.

    How to add Donation under Sell Products option in payment tools Image 5 Screenshot 114

     

    Please do take note that the html field names and IDs that I used in my CSS code may not apply to you. You can find yours by viewing your form on a page, right clicking on the page and "View page source" or "Inspect Element" find the appropriate fields that you want to apply the changes.

    6. This is now how my form should look like with the Donation product.

    How to add Donation under Sell Products option in payment tools Image 6 Screenshot 125

    You can view the live form and clone it from here:

    http://form.jotformpro.com/form/42947164718969 

     

    I hope this helps. If you need further assistance on the CSS code, feel free to contact us any time, we'll be glad to help you.

    Thanks.

  • lhumc
    Replied on October 29, 2014 at 10:52 PM

    Worked great. Thank you!

  • Ashwin JotForm Support
    Replied on October 30, 2014 at 4:40 AM

    Hello lhumc,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • cherylkemptner
    Replied on January 29, 2015 at 12:58 AM

    I have the same issue:  trying to sell reunion tickets for set price and provide a field for donations to a special project.  The donation can be entered in any amount.

    I'm not a computer geek, just a great grandmother trying to help plan a 50th high school reunion.  So, I cannot figure out how to add the CSS code to my form. 

    I tried originally to use your form by cloning it, however, I couldn't figure out how to get my PayPal info. in.  The only way I could find was to delete the entire field and then I was back to where I started.

    Also, I'd like to remove the little check boxes if that's possible as I only have 2 items to list, Tickets and Donation.

    Can you help me?  I think I have provided the right link to my form:

    http://form.jotform.us/form/50244198170149

    Thank you in advance for any help you may provide.

    Cheryl

  • Ashwin JotForm Support
    Replied on January 29, 2015 at 6:36 AM

    Hello Cheryl,

    I have moved your question a to anew thread and you will be answered here:  http://www.jotform.com/answers/505746 

    Thank you!