Neculai Fantanaru

Everything Depends On The Leader

How Can I Make In CSS si HTML A Donation Form Using Paypal Buttons?

On May 05, 2021
, in
Python Scripts Examples by Neculai Fantanaru

donate css paypay form

You can view the entire code here: https://jsfiddle.net/L27vz06u/

--- STEP 1 --- Login to PayPal and go to https://www.paypal.com/buttons/ as to obtain the link code for the desired button. In this case, select DONATE button code. The link code for DONATE Button should look like this:

https://www.paypal.com/donate?hosted_button_id=27KSZ3KQSC

and also PayPal provide you the button code, which should look something like this:

<form action="https://www.paypal.com/donate" method="post" target="_top"> 
  <input type="hidden" name="hosted_button_id" value="77FLYC2Z7JBUL" /> 
  <input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> 
 <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /> 
</form> 

--- STEP 2 --- Copy the following line before your </head> tag and replace it with the name of your website:

<link rel="stylesheet" type="text/css"  href="https://YOUR-WEBSITE.com/paypalform.css"/> 

This is the code for the css file named paypalform.css :

.paypal-form {
border: 2px solid #FFC734;
}
.paypal-form hr {
margin:0;
}
.paypal-form h4{
font-size:16px;
}
paypal-form .paypal-header {
display: flex;
align-items: center;
padding: 10px 20px;
    }
paypal-form .paypal-header .header-text {
margin-right: 15px;
color: #DF662F;
margin-top: 0;
margin-bottom: 0;
font-size:15px;
        }
paypal-form .paypal-header img{
width:100px;
height:30px;
    }

paypal-form .paypal-body {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
border-top: 1px solid #efe9e9;
    }
paypal-form .paypal-body .col {
padding: 15px 15px;
padding-bottom:20px;
        }
paypal-form .paypal-body .col:first-child {
border-right: 1px solid #efe9e9;
            }

paypal-form .paypal-body h4 {
margin: 0;
background-color: #333333;
color: white;
display: inline-block;
padding: 3px 10px;
text-transform:uppercase;
font-size:14px;
        }
paypal-form .paypal-body p{
font-size:15px;
line-height:1.5;
margin-top:4px;
    }
paypal-form .paypal-content{
display:flex;
flex-direction:column;
        
    }
paypal-form .paypal-content form {
display: flex;
flex-direction: column;
    }
paypal-form .paypal-content select {
height: 35px;
margin-bottom: 10px;
padding-left: 5px;
border: 1px solid #bdb5b5;
        }
paypal-form .paypal-content .paypal-img {
align-self: flex-start;
border:none !important;
        }

media(max-width:768px){
paypal-form .paypal-body {
grid-template-columns: 1fr;                
            }
paypal-form .paypal-body .col:first-child {
border-bottom: 1px solid #efe9e9;
                }
        }

.paypal-contact {
padding: 15px 20px;
padding-bottom:25px;
border: 2px solid #FFC734;
margin-top: 25px;
margin-bottom: 20px;
}
.paypal-contact * {
margin:0;
font-size:15px;
}
    
paypal-contact h4 {
color: #DF662F;
margin-bottom:15px;
        }
paypal-contact p {
margin-bottom: 8px;
font-weight:bold;
        }
paypal-contact p span {
color: dimgrey;
text-transform:uppercase;
font-weight:normal;
margin-bottom: 15px;*/
        }
paypal-contact .text-muted {
font-size:11px;
color:dimgrey;
margin-bottom: 15px;*/
        }

.paypal-form-button{
display:flex;
flex-direction:column;
}

--- STEP 3 --- Copy this html code where you want it to appear on your html page (and replace the hosted_button_id and <form action= ... </form> from code below, with your code from PayPal )

<!-- Donation Form START -->

<div class="paypal-form" >
<div class="paypal-header">
<h4 class="header-text">Donate via Paypal</h4>
<img src="https://neculaifantanaru.com/paypal.png" alt="Alternate Text" />
</div>
<!-- Identify your business so that you can collect the payments. -->
<div class="paypal-body">
<div class="col">
<div class="body-text">
<h4>RECURRENT DONATION</h4>
<p>Donate monthly to support <br>the NeculaiFantanaru.com project</p>
</div>
<div class="paypal-content">

<!-- PayPal DONATION COMBO BOX. Replace with your hosted_button_id-->

<form action="https://www.paypal.com/donate?hosted_button_id=27KSZ3KQSC" method="post" class="den_webinar">

<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="YOUR EMAIL ADDRESS">

<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">

<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<select name="amount"><option value="3.00">3.00</option><option value="5.00">5.00</option><option value="10.00">10.00</option><option value="25.00">25.00</option><option value="50.00">50.00</option></select>
<input type="hidden" name="currency_code" value="EUR">

<!-- Display the payment button. -->
<input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
</form>


</div>
</div>
<div class="col">
<div class="body-text">
<h4>SINGLE DONATION</h4>
<p>Donate the desired amount to support <br>the NeculaiFantanaru.com project</p>
</div>
<div class="paypal-content">

<!-- YOUR PAYPAL FORM BUTTON -->

<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="77FLYC2Z7JBUL" />
<input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>

<!-- YOUR PAYPAL FORM BUTTON -->

</div>
</div>

</div>

</div>
<div class="paypal-contact">
<h4>Donate by Bank Transfer</h4>
<p>
<span>Account Ron: </span>
RO34INGB0000999900448439</p>
<div class="text-muted">
Open account at ING Bank
</div>
</div>

<!-- Donation Form Finnish --> 

That's all folks.

If you like my code, then make me a favor: translate your website into Romanian, "ro".

Also, see this VERSION 2 or VERSION 3 or VERSION 4 or VERSION 5 or VERSION 6 or VERSION 7

Alatura-te Comunitatii Neculai Fantanaru
The 63 Greatest Qualities of a Leader
Cele 63 de calităţi ale liderului

Why read this book? Because it is critical to optimizing your performance. Because it reveals the main coordinates after that are build the character and skills of the leaders, highlighting what it is important for them to increase their influence.

Leadership - Magic of Mastery
Atingerea maestrului

The essential characteristic of this book in comparison with others on the market in the same domain is that it describes through examples the ideal competences of a leader. I never claimed that it's easy to become a good leader, but if people will...

The Master Touch
Leadership - Magia măiestriei

For some leaders, "leading" resembles more to a chess game, a game of cleverness and perspicacity; for others it means a game of chance, a game they think they can win every time risking and betting everything on a single card.

Leadership Puzzle
Leadership Puzzle

I wrote this book that conjoins in a simple way personal development with leadership, just like a puzzle, where you have to match all the given pieces in order to recompose the general image.

Performance in Leading
Leadership - Pe înţelesul tuturor

The aim of this book is to offer you information through concrete examples and to show you how to obtain the capacity to make others see things from the same angle as you.

Leadership for Dummies
Leadership - Pe înţelesul tuturor

Without considering it a concord, the book is representing the try of an ordinary man - the author - who through simple words, facts and usual examples instills to the ordinary man courage and optimism in his own quest to be his own master and who knows... maybe even a leader.