gEEK tHE pLANET

Llevaba algunos días buscando un formulario de donación con estilo, dejar atrás el típico botoncito amarillo y poner algo realmente llamativo, asi que buscando muchisimo me encontré con este excelente y liviano formulario de donación hecho con CSS y JQuery, es muy fácil de implementar, porque hasta yo pude hacerlo.

Lo primero es el formulario de donación, donde deberemos completar algunos campos, como lo son business, item_name, currency_code, si deseas más información acerca de estos campos puede visitar donate techview outside.

<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" type="hidden" value="_donations" />
<input name="business" type="hidden" value="paypal@email.com" />
<input name="item_name" type="hidden" value="My Donations Subject" />
<input name="no_shipping" type="hidden" value="0" />
<input name="no_note" type="hidden" value="1" />
<input name="currency_code" type="hidden" value="USD" />
<input name="tax" type="hidden" value="0" />
<input name="bn" type="hidden" value="PP-DonationsBF" /> <label>Amount (US$) : </label>
<input id="input_amount" class="text" name="amount" type="text" />
<input class="submit" name="submit" type="submit" value="Donate" />
</form>

Lo siguiente es el código para algunos mensajes emergentes mientras carga por completo el AJAX o por si aparecen errores en el campo de donación.

<input class="submit" name="submit" type="submit" value="Donate" />
<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" alt="" align="absmiddle" /> Transferring to PayPal, please wait...</span>

Este es el código JQuery, que permite hacer el envio y validar los campos del formulario:

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
}
});
});

Y por último el código CSS para darle un poco de estilo.

.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;}

Más o menos así deberia lucir el formulario:

El autor ha creado un template para los usuarios de wordpress, es simplemente una implementación de este formulario dentro de nuestro blog.

Descargar: Ejemplo formulario de donación para paypal
Wordpress Page Template