Donation and membership form combined

  • Profile Image
    JudyLevine
    Asked on September 26, 2019 at 07:36 PM

    I am setting up a form for to accept payment for membership to my nonprofit. I integrate payments to Square. I have the various levels of membership included as product options. Is there a way to add an option to add a donation where the person can specify the donation amount and where they what program they would like the donation to support?

  • Profile Image
    EltonCris
    Answered on September 26, 2019 at 09:01 PM

    There's a workaround to achieve that. Just add another product with $1 as its price then add textbox quantity and donation type product options. It looks like this,

    Example:

    Text Box quantity labeled as Amount

    Product Option for Donation Type

    Then you can inject custom CSS codes to your form to hide the product price on the donation product.

    Demo: https://form.jotform.com/92686653117970

    You can clone this form if you want to inspect its settings.

    If you need assistance with your form, let us know.

  • Profile Image
    JudyLevine
    Answered on September 29, 2019 at 03:05 PM

    Thanks so much. Very helpful workaround. I set up the donation in my form CCA Signup. I need some help with the the last piece to inject custom CSS code to hide the price on the donation product. Not sure how to make that happen.  

  • Profile Image
    John_Benson
    Answered on September 29, 2019 at 04:08 PM

    I believe this is the form you're referring to [https://www.jotform.us/form/92565568502161].

    Here's how to hide the product price on the donation product:

    1. In the Form Builder, click the Form Designer icon.

    1569787570css1.png

    2. In the Form Designer window, go to the CSS tab. Insert the custom CSS and then click the Save button.

    1569787597css2.png

    Here's the CSS code that you need to insert:

    span#product-name-input_36_1006 + .form-product-details {
    display: none;
    }

    input#input_36_quantity_1006_0 {
    width: 80px;
    }


    Here's the result:

    1569787709membership.png

    Hope that helps. Let us know if you need further assistance.

  • Profile Image
    JudyLevine
    Answered on September 29, 2019 at 07:56 PM

    Perfect. Thank you so much for your help!