Donation level buttons – conditional rules troubleshooting

  • Profile Image
    Asked on November 27, 2017 at 05:07 PM


    I am creating a donation form for a non-profit website using the Stripe integration. I need to include buttons with suggested amounts, but that function is not included in the Stripe integration "Donation" option. I found a great workaround by adding a button widget and creating rules for coping the button values into the Stripe payment information block. HOWEVER, it now won't allow me to type a custom value into the "Other Amount" block.

    Any suggestions for what I could do to fix this? Here is the link to my form: A screenshot of the rules I created for the buttons is attached.

    undefinedundefinedThank you!!

  • Profile Image
    Answered on November 27, 2017 at 08:13 PM

    Thank you for contacting us.

    We may need to set up the amount calculation in a different way in this case.

    Here is a test form:

    It is possible to clone the form to check the backend:

    How to Clone an Existing Form from a URL

    If you need any further assistance, please let us know.

  • Profile Image
    Answered on November 27, 2017 at 10:35 PM

    Amazing! Thank you so much. One more question—is there any way to either reduce the thickness of or remove the thick line between the USD amount and "Payment Information"?

    If the thickness can be reduced, I'd like it to match the thickness of the line before "Billing Information."

    1511840093Screen Shot 2017-11-27 at 10.3

  • Profile Image
    Answered on November 28, 2017 at 03:12 AM

    Inject this CSS codes to your form, this should style the horizontal line similar to the billing.

    hr {

        border: 0;

        border-top: 1px solid #e6e6e6 !important;

        width: 100%;




  • Profile Image
    Answered on November 28, 2017 at 11:24 AM

    It worked like a charm! One more question: Is there any way to reposition the sublabels for Billing so they appear above the text boxes like they do under Payment Information?

    1511886232Screen Shot 2017-11-28 at 11.2

  • Profile Image
    Answered on November 28, 2017 at 12:47 PM

    Thank you for confirming solution provided by my colleague worked. To achieve moving of sub-labels to the top.

    Kindly inject the code below.

    .form-sub-label {
        font-family: garamond;
        font-style: normal;
        font-weight: 500;
        padding-bottom: 30px;
        margin-top: -35px;

    Below is how you can inject your css code to your form.

  • Profile Image
    Answered on November 28, 2017 at 12:54 PM

    Thanks for your response. I injected the code, but it moved both the Payment Options sublabels and the Billing Information sublabels. Any way to just isolate the Billing Information sublabels and move them?

  • Profile Image
    Answered on November 28, 2017 at 03:18 PM

    It seems to be already solved with the ID selectors on your form.

    If there is anything else, please let us know.