PayPal donation form with CSS and jQuery for WordPress
Yesterday I got an email from Jamie asking me how I made my PayPal donation form. Here’s how I did it.
First, we need a PayPal form with the donation stuff inside:
1 2 3 4 5 6 7 8 9 10 11 12 | <form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label><input type="text" name="amount" id="input_amount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> </form> |
More information about the PayPal donation buttons and the form code behind can be found here: https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside
Next, we need to add some more code to the form where we want to show the various messages displayed by jQuery. These messages are set to be hidden (display:none;):
1 2 3 4 | <input type="submit" name="submit" value="Donate" class="submit" /> <span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span> <span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter the amount you wish to donate and try again.</span> <span id="msg_activity" style="display:none;"> <img src="images/loader.gif" align="absmiddle" /> Transferring to PayPal, please wait...</span> |
The jQuery script which actually checks and validates the form looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | jQuery(document).ready(function() { // the minimum required value to be entered. // in this case PayPal takes $0.35 from a $1 // donation, hence we ask for at least $1.35 var minimum_value = 1.35; // attach this script to the form's submit action jQuery('#form_paypal').submit(function() { // check if there is an amount entered if (jQuery('#input_amount').val() > null) { // is the amount equal to or higher than the minimum_value? if (jQuery('#input_amount').val() < minimum_value) { // need more amount // hide messages, show more amount error jQuery('#msg_noamount').hide(); jQuery('#msg_moreamount').fadeIn(); return false; // prevent the form from submitting } else { // amount is more than minimum_value // hide messages, show activity jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').hide(); jQuery('#msg_activity').fadeIn(); return true; // submit the form } } else { // no amount entered at all // hide messages, show no amount error jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').fadeIn(); return false; // prevent the form from submitting } }); }); |
The code is documented so it should be clear what each block does.
The final step is to add some CSS styling:
1 2 3 4 5 | .red {color:#ff0000;} .icon_warning {background:transparent url(../images/exclamation.png) left no-repeat;padding:4px;padding-left:20px;} form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;} form#form_paypal input#input_amount {width:50px;} form#form_paypal .submit {cursor:pointer;border-style:outset;} |
If you want to integrate this form into your WordPress Blog then this is the way to go:
In your WordPress Theme folder (wp-content/themes/yourtheme/) create a new file named ‘donate.php’. To make the file available as a WordPress page template you’ll need to add the following code at the top of the file:
1 2 3 4 5 | <?php /* Template Name: Donate */ ?> |
A donation form template for the default theme would look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php /* Template Name: Donate */ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2>Make A Donation</h2> <p>If you think you have benefited or I have helped you in some way, by using any of my WordPress plugins or themes, please consider making a donation. Donations support the continued development of my websites and help cover the hosting costs. Donations of any size are gratefully accepted. Thank you!</p> <form id="ppDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label> <input type="text" name="amount" id="ppAmount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> <span id="moreAmount" class="warningIcon red" style="display:none;">PayPal takes $0.35 commission for $1 donation. Please enter at least $1.35 , thank you!</span> <span id="noAmount" class="warningIcon red" style="display:none;">Please enter an amount to donate and try again.</span> <span id="ppGo" style="display:none;"> <img src="<?php bloginfo('template_url'); ?>/images/loader.gif" align="absmiddle" />Transferring to PayPal, please wait...</span> </form> <p><small>Info : once you click on 'Donate', you will be transferred to PayPal where you can enter your payment information.</small></p> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Next you need to create a page in WordPress, call it ‘Donate’, ‘Make A Donation’ or whatever you want the page title to be. You can leave the page content empty as we will use our template file. Scroll down to the ‘Page Template’ section and select your page template (‘Donate’ in our case). Save & publish the page.
Available Files
Hopefully this short tutorial will be of some use for you (if so, don’t forget to donate ;) ) and if you still have some questions feel free to leave a comment below.
Received Donations
- Sun 8/17/2008, $5.00 • Saarthak, http://lughole.net/
- Mon 10/13/2008, $50.00 • Armando, http://www.criteriondg.info/
- Tue 2/17/2009, $2.00 • McDowell Crook
Thank You!
Great tutorial I think I’ll be using this to my site in the near future. The regular donation button is so ugly and boring.
@Curtis
Glad you like it, thanks for your comment & the ping!
;)
Indeed, that is purty. I’ll have to try that one out!
@Chad
Thanks!
Nicely done. This will certainly be gracing a non-profit site I’m working on.
I like it I’ll leave a ping, too.
@Timothy & Hayes
Thanks!
For nothing, thanks to you for this great tutorial.
Your donation form is fantastic..I just used it to donate a really tiny amount (economic depression is on). Changing so much coding looks overwhelming right now so I’ll do that after making myself ready for this :p
In terms of bonalnoy erudition – grammotno done!
Is there a way to do this with the secured account id rather than having your email address right out there in the open? For some reason it’s not working for me.
@Rick
Yes, it is possible, but with another approach because you need a PHP script to encrypt your form ‘on the fly’. Basically, these are the steps:
- Create a form like the one in this tutorial
- on submit, do an AJAX call to the PHP script which encrypts the form
- post the response to PayPal
You can find more information and an example for the encryption here:
http://www.stellarwebsolutions.com/en/articles/paypal_button_encryption_php.php
HTH
Wow, excellent tutorial! I definitely adding this to my website. :)
I did notice however that the download links aren’t working. Could you look into that please?
Thanks!
@David
Thanks as well, I’ve fixed the links.
excellent tutorial, just what I needed! thanks a bunch for sharing it!!!
is there a way i can collect user name and the amount that they are donating than send them to paypal
so like have
Name:
<input name=”date” type=”hidden” value=”">
Comment:
Money:
but not having the submit boton, just the fields, and the paypal submit botton is the only one
i need this to save the users that donate, or is there a way that after they have dnihsed donating at paypal they get redireted and their info is saved in my db?
can u make a contact form wit these javascript effect??
I mean showing an error massage at right form
88th: see http://www.flowdrops.com/contact/
Toxane:
OH Man!thanks 4 reply ma comment. I need it so much.
well I try it soon.
I already tried……
but I cant showing da success massage.
here ma webpage
http://nggaksmuanyaituputih.googlepages.com/contact.html
I use emailmeform for da contactform.
can u tell me how to showing da success massage plz…
can u give me php file for contact form plz
hi pete,
amazing post.
please i need help. i cannot seem to make it work properly.
when i click donate, it does not show any jQuery effects?
i am trying to use it in wordpress.
please help.
thnx
@Ace
Any link?
http://siddharthatrust.com/donations/
thats the project i am working on.
@Ace
The element ID’s in ‘paypal_donate.js’ do not match the form’s element ID’s. Fix that and it’ll work.
HTH
worked flawlessly. thnx for the quick update. i feel so stupid now. cheers
@Ace
Glad it works now.
Any way to add an option for setting up a recurring donation?
@Randy
Try the following form vars:
Hi there!
I tried to do the same thing, but failed: how do you keep the progress spinner spinning while the HTTP request is done?
Thanks a lot in advance.
@ An Onymous
In the above jQuery example, the spinner is called on line 30:
jQuery('#msg_activity').fadeIn();I’ve noticed that. I’m doing quite the same, but the spinner stops moving after fadeIn.
An as I’m doing a non-ajax HTTP GET request, it is out of the question for me to use a callback function. So I’m wondering how you made your animated gif remain so lively, because I simply didn’t succeed at doing it.
Kind regards
Any Ideas?
Not sure why it’s not working for you. The above example does just a jQuery validation of the inputs and if it succeeds, a normal submit of the form to PayPal.
Maybe you try to use some other activity image?
Hello, I have tried you form out but it just showed up like a regular form that sent them to the paypal page with no jquery. Could you help me out?
You can see what it looks like here,
http://www.assasain14.com/test.html
It’s the first donate form.
All help is appreciated.
Thank you.
Sincerely:Assasain14
You need to add the jQuery script & CSS rules (code on this page) to your document.
How would I do that?, Because I did put some css and script on the page.
Download the example files to see how the code & css is added.
It will work with dreamweaver cs4 right?
Hello, I don’t know what I’m doing wrong but it’s still not working. I even downloaded your demo and it wont work. Any help?
Hello, I know what I’m doing wrong. How do I attach the paypal.js form to the html form in dreamweaver cs4?
I can’t seem to get the Jquery to work. I have everything else…which you can see at,
http://www.assasain14.com/test.html
Any help with this?
Hello,
The form seems to be working but all your bells and whistles I seem to have trouble with, I know you’re busy, but it would be awesome if you can take a look at my site….
http://75.125.59.6/~fumcfarm/worship-with-us/give/
Hey Stephen,
just replace
jQuery('#form_paypal')withjQuery('#ppDonate')and it should work.This is very nice! I would like know how to add a drop down menu with donation choices or radio buttons. Any help would be greatly appreciated.
Cool form, one of my blogs has a bunch of free scripts for seo that I developed over some years, I’m going to add this form for donations, hopefully some people will buy me a beer or two :)
thank you for the tutorial. can i use it to build wp 3.0 theme also ??
@ Aafrin
Yes, your are free to use this anywhere you see it fit! :)
Hello mate. Thx for sharing this fantastic info. I’m trying to use your paypal button on a website for a non-profit organisation, but I can’t find how to redirect the users to a Duth paypal page. Could you maybe gimme some directions on how to get the users to donate via the Dutch paypal?
Thx in advance for your help.
Kind regards,
Silvio
You can add a hidden field with ID/name ‘lc’ and a value of ‘NL’. This redirects the user to a Dutch Paypal checkout page. Also see Paypal HTML Variables and Paypal Supported Country Codes.
HTH