How can I sell products and ask for donations on a single form?

  • Profile Image
    MCAMF
    Asked on June 03, 2017 at 03:11 PM
    have a question about including both a
    product and donation on the form as it says only one payment filed may be
    used per form. Still working on the calculation...
  • Profile Image
    Jim_R
    Answered on June 03, 2017 at 03:55 PM

    We don't have a way to combine 2 different selling methods into a single payment field. Basically, if you're Selling Subscriptions, you can only sell subs, if you're Selling Products, you can only sell products and so on. Same idea applies to accepting Donations.

    However, there's a workaround that you can try to achieve something similar. Here's what you need to do:

    1. Setup your Payment Field to SELL PRODUCTS.

    2. Add all your Products as you see fit.

       2a. You need to place the prices of your Products on the PRODUCT NAME. This is needed because we'll hide all the prices later on via CSS.

    3. Add an extra Product that will serve as your Donation section. This extra Product will have to cost $1 and have a QUANTITY Textbox option.

    Select TEXT BOX on the SHOW QUANTITY ON THE FORM AS section and set the LABEL as Amount.

    So what's the idea behind this setup? This would mean that any number they type in as a Quantity will be multiplied by 1.

    e.g. If they typed in 25 on the Text Box, the Donation Amount would be 25 x 1 = $25.

    Complete guide: How-to-Add-Options-to-Payment-Forms

    4. Once you're done setting up ALL your Products + the extra Product for Donation, let's hide the prices of these Products using CSS.

    Inject the following codes in the Form Builder:

    .form-product-details:nth-child(2) {

        display: none;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    What do these codes do? It hides the following prices:

    And that's why it was mentioned on Step 2a above that it's necessary to add the prices on the PRODUCT NAME section. That way, your users would still visually know how much each product costs, even after hiding the actual prices with CSS.

    Here's the completed form: https://www.jotform.com/71535744282964

    Feel free to clone it to better understand the workaround or start you could start building your form from there.

    Related guide: How-to-clone-an-existing-form-from-a-URL