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
Thank You!
