Custom Donation form with radio list and any amount field

Hi,

How to I create a donation form with radio list of amounts and an any amount field that is integrated with PayPal?

I want the form to look sort of like this:

https://bbis.clintonfoundation.org/Tribute

Thanks

Here is a demo form https://form.jotform.com/61668100511951 you can test.

I used Custom Donation Amount payment option in Paypal tool and Calculation field.

Here is the video when I was creating the form

You can also clone the form to better review on your Form Builder.

User guide: https://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

Let us know if you need further assistance.

This solved my problem - Thank you!!!!

One last question - how can I hide the total payment field?

You meant like this?

This CSS codes injected on your form https://www.jotformpro.com/form/61668420399970 

#cid_66 span.form-sub-label-container {

    visibility : hidden;

}

#label_66 {

    visibility : hidden;

}

Here is the test form also https://www.jotformpro.com/form/61747410275960

Let us know if there is more we can assist you with.

Hi -

I have injected the code and the field is hidden but now when the end user clicks the "Visa Method" the Name, address, credit card number etc. fields are not showing.

see below:

http://inspiredheartfoundation.org/donate/

Help Please.

I apologize for the mistake. I see the problem also.

Let me check further for the correct CSS code needed to hide the specific text and input field.

I'll get back to this once I have update.

Thanks.

Thank you!

Hi -

Is there a solution?

Cheers

Bev

Hello Bev,

Unfortunately my colleague is not available online at the moment. I have sent him a message and he will get back to you as soon as he is back online. 

I did check the form which you have embedded in your webpage and credit card related fields are being displayed when "Visa" is selected. Please check the screenshot below:

Thank you!

Hi -

I removed the code from the CSS injection place.  I want the calculation to be hidden.  When I inject the code to hide that field it also hides the CC fields upon click.  There is a screen shot above.

Thanks

Bev

I apologize for the delays. Apparently you can only remove the USD text on the amount field if you used only the form's full source embed code.

Here is a similar discussion thread about it. The way style of the payment tool was designed, the whole payment tool was using the same style rule for the entire label container from the amount field all the way to the credit card details part.

Example:

The CSS method could only work if there was no credit card option i.e. if just using the standard Paypal payment type (no credit card option)

Here is my example form https://www.jotformpro.com/form/61747410275960

As you can see I was able to hide the amount box, the label text... but not USD. I used only this CSS code

[for="input_66_donation"] {

    display : none;

}

#label_66 {

    display : none;

}

#input_66_donation {

    visibility : hidden;

}

--

I hope this information help. Please let us know how we can be of further assisstance.

Hello lynnkirkham,

I have moved your question to a new thread and you will be answered here:  https://www.jotform.com/answers/874611 

Thank you!