Geek the Planet


AJAX no image

Published on Agosto 15th, 2008 | by Angelfire

1

Formulario de donación para paypal con CSS y JQuery

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

Tags: , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



One Response to Formulario de donación para paypal con CSS y JQuery

  1. Pete says:

    Thanks for the translation of my article, I highly appreciate that.

    Please: put a link (i.Farang) to my website somewhere into this post as well, thanks.

Back to Top ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa