Name: Как я могу создать форму пожертвования в CSS и HTML с помощью кнопок Paypal?
Brand: Neculai Fantanaru
SKU: NFL
Availability: OnlineOnly
Rating: 5 (55 reviews)

Как создать на CSS и HTML форму пожертвования с помощью кнопок Paypal?

On May 05, 2021

, in

Python Scripts Examples by Neculai Fantanaru

пожертвовать форму css paypay

Вы можете просмотреть весь код здесь: https://jsfiddle.net /L27vz06u/

--- ШАГ 1 --- Войдите в PayPal и перейдите по адресу https://www. .paypal.com/buttons/, чтобы получить код ссылки для нужной кнопки. В этом случае выберите код кнопки ПОЖЕРТВОВАТЬ. Код ссылки для кнопки DONATE должен выглядеть следующим образом:

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

а также PayPal предоставит вам код кнопки, который должен выглядеть примерно так:

<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>

--- ШАГ 2 --- Скопируйте следующую строку перед тегом </head> тег и замените его названием вашего сайта:

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

Это код CSS-файла с именем 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;
}

--- ШАГ 3 --- Скопируйте этот HTML-код в то место, где вы хотите, чтобы он отображался на вашей HTML-странице (и замените hosted_button_id и <form action= ... </form> из кода ниже, используя ваш код от 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".

Также ознакомьтесь с этой ВЕРСИЕЙ 2 или ВЕРСИЯ 3 или ВЕРСИЯ 4 или ВЕРСИЯ 5 или ВЕРСИЯ 6 или ВЕРСИЯ 7

Alatura-te Comunitatii Neculai Fantanaru

63 величайших качества лидера

Зачем читать эту книгу? Потому что это имеет решающее значение для оптимизации вашей производительности. Потому что раскрывает основные координаты, после чего строят характер и навыки лидеров, подчеркивая, что им важно для повышения своего влияния.

Лидерство – магия мастерства

Существенной характеристикой этой книги по сравнению с другими книгами, представленными на рынке в той же области, является то, что она описывает на примерах идеальные компетенции лидера. Я никогда не утверждал, что стать хорошим лидером легко, но если люди будут...

Мастерское прикосновение

Для некоторых лидеров «руководство» больше напоминает шахматную игру, игру ума и проницательности; для других это означает азартную игру, игру, которую, как они думают, они могут выиграть каждый раз, рискуя и ставя все на одну карту.

Загадка лидерства

Я написал эту книгу, которая простым способом соединяет личностное развитие с лидерством, как пазл, где нужно соединять все данные кусочки, чтобы составить общий образ.

Руководство

Цель этой книги — предоставить вам информацию на конкретных примерах и показать, как обрести способность заставить других смотреть на вещи под той же точкой зрения, что и вы.

Лидерство для чайников

Не считая это согласием, книга представляет собой попытку обычного человека - автора - который простыми словами, фактами и обычными примерами вселяет в обычного человека смелость и оптимизм в его собственном стремлении быть хозяином самому себе и кто знает. ..может даже лидер.