Adding an other or custom amount to a payment form

  • TorahAcademyBoston
    Asked on August 29, 2017 at 11:27 AM

    Hi

    Under the Sponsor section of this form https://www.jotform.com/TorahAcademyBoston/day-of-learning

    How would I add a fourth option for a "General Donation" - where the customer can alternatively just make a donation for any amount they choose.

     

    Thank you!

  • Elton Support Team Lead
    Replied on August 29, 2017 at 12:20 PM

    There's a trick to achieve that. That's to add another option with $1 amount then add a text box quantity where the user enters the custom amount.

    Here's how:

    1. Add another product option like the following:

    Adding an other or custom amount to a payment form Image 1 Screenshot 30

    Make sure to add a quantity text box.

    Adding an other or custom amount to a payment form Image 2 Screenshot 41

    2. Remove the unnecessary labels and customize the custom quantity box with custom CSS.

    This is the CSS code I used on the following demo form.

    span#product-name-input_15_1003 + span,

    label[for="input_15_quantity_1003_0"] {

        display: none !important;

    }

    .form-product-custom_quantity {

        width: 200px;

    }

    If this CSS code does not work in your form, just let us know so we can update the ID on this code.

    Here's a cloned version of the form: https://form.jotformpro.com/72404490358962

    Feel free to clone this form back if you like. Guide: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

  • TorahAcademyBoston
    Replied on August 29, 2017 at 2:04 PM

    the code does not seem to be working

  • Elton Support Team Lead
    Replied on August 29, 2017 at 2:09 PM

    It worked in your form upon checking. The only thing that did not work is the text box width.

    Please change 100% in the code with 200px, that should correct it.

    Example:

    .form-product-custom_quantity {

        width: 200px;

    }

  • TorahAcademyBoston
    Replied on August 29, 2017 at 2:15 PM

    Thank you 

    The issue now is that the quantity does not add up in the total - how can we change that?

  • Elton Support Team Lead
    Replied on August 29, 2017 at 2:32 PM

    There was probably a misconfiguration. I checked your setup and resave it. It seems working normally now.

    Could you please check?

    Adding an other or custom amount to a payment form Image 1 Screenshot 20

  • TorahAcademyBoston
    Replied on August 29, 2017 at 2:34 PM

    Yes it's working now

    Thanks so much for your help!