https://www.lexium.ru/2018/10/kak-dobavit-v-post-formu-dlya-sbora-deneg/

Как добавить в пост форму для сбора денег?

Давным давно, в одной очень далёкой галактике, я захотел выпить чаю с печеньками. Люблю это дело)

Но в тот раз ничего не вышло, поскольку

  • заварка кончилась,
  • печеньки съедены еще на прошлой неделе, а новых не завезли,
  • денег нет, но вы держитесь там.

Не долго думая — соорудил форму для приема доната.

Всегда есть добрые люди, готовые угостить админа сайта за полезный совет (или готовую инструкцию). Так почему бы не упростить процесс снабжения меня печеньками?

Соорудить соорудил, а с коллегами-блоггерами не поделился. Если честно, даже в голову не пришло, что кому-нибудь тоже может понадобиться.

Вот! Делюсь! Пользуйтесь)

Формируем задачу

  1. У нас есть сайт на WordPress.
  2. Есть желание легко и быстро добавлять форму сбора доната в любое удобное место поста.
  3. Форма должна вписываться в дизайн и иметь адаптивную вёрстку.

Достаточно? Тогда приступим!


Способ 1: Простой, но… неудобный

1. Заходим на сайт Яндекс.Денег и идем в раздел «Формы и кнопки для вашего сайта» https://money.yandex.ru/quickpay/

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

2. Выбираем «Кастом» для разработчиков. Листаем чуть ниже и видим код (картинки кликабельны).

3. Копируем этот код, вставляем в пост (в режиме «Текст»), меняем в нём всё что надо поменять (номер кошелька и т.д.).

4. ?????????

5. PROFIT!

Как видите, всё предельно просто и понятно: зашел, скопировал, вставил, поправил, готово. Но во-первых, выглядеть такая форма будет как после бомбёжки, а во-вторых, заниматься подобным копипастом каждый раз не удобно и не профессионально. Поэтому переходим к следующему способу.


Способ 2: Очень сложный, но безумно удобный

Как видно из кода предыдущего примера, мы имеем банальнейшую html-форму с кучей скрытых полей, где посетитель сайта может выбрать только способ оплаты и нажать кнопку. Всё.

Хорошая новость в том, что раз это обычный HTML, то мы вольны переделать всё так, как душа пожелает (сохранив при этом имена, но не значения полей).

Приступим!

Всё что вы решитесь делать по инструкции указанной ниже, вы делаете на свой страх и риск. Если сайт сломается, сервер сгорит, мышка нагадит на стол, насяльникэ надерет вам уши, а солнце взойдёт на западе, и т.д., я тут совершенно не при чём. Это вы сами виноваты.

Если есть сомнения в своих силах — обратитесь к специалисту. Имеются противопоказания.

1. Для начала создадим шоткод, например tea. Его мы будем вписывать в пост в квадратных скобках, вместо всей той кучи кода, которая нам предлалась в способе 1.

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

У себя я добавил шоткод через собственный плагин, но вам, для простоты, рекомендую вставить его в конец файла function.php темы оформления вашего сайта на WordPress.

Привожу готовый код для вставки в function.php

function code_tea($atts, $content=""){
 return '<div class="tea2">
  <div class="teaconteiner">
   <div class="row">
    <div class="text col-lg-4 col-md-4 col-sm-4 col-xs-12"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Помогло? Зашли Админу на чай.</div>
     <form method="POST" action="https://money.yandex.ru/quickpay/confirm.xml">
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
          <input type="hidden" name="receiver" value="41001478987584">
          <input type="hidden" name="formcomment" value="Доктору Лексиуму на чай">
          <input type="hidden" name="short-dest" value="Доктору Лексиуму на чай с печеньками">
          <input type="hidden" name="label" value="1">
          <input type="hidden" name="quickpay-form" value="donate">
          <input type="hidden" name="targets" value="Админу на чай на чай с печеньками">
          <input class="sum" type="text" name="sum" value="100" data-type="number">
          <input type="hidden" name="comment" value=""> <i class="fa fa-rub" aria-hidden="true"></i> &nbsp;
          <input type="hidden" name="need-fio" value="false">
          <input type="hidden" name="need-email" value="false">
          <input type="hidden" name="need-phone" value="false">
          <input type="hidden" name="need-address" value="false">
          <label><input type="radio" name="paymentType" value="PC">Яндекс.Деньгами</label>
          <label><input type="radio" name="paymentType" value="AC">С карты</label>
          <label><input type="radio" name="paymentType" value="MC">С мобильного</label>
     </div>
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
          <input class="submit" type="submit" value="Заслать">
     </div>
    </form>
   </div>
  </div>
 </div>
';
}
add_shortcode("tea", "code_tea");

Что там нужно поменять?

Во-первых, поле receiver. Сюда (в значение value) нужно вписать номер СВОЕГО яндекс-кошелька. Иначе деньги уйдут знатокам (т.е. мне).

Во-вторых, меняем value в полях formcomment, short-dest, targets по аналогии. Они нужны, чтобы понимать, откуда вообще пришли деньги.

В-третьих, поле sum. Здесь в value указываем желательную сумму доната. Поскольку это поле я сделал видимым, пользователь может вписать сумму сам. Хоть рубль, хоть миллион. Однако, Яндекс не примет платёж более 15000 руб.

Шоткод создан!

2. Настраиваем стили. Если не знаете как управляться с CSS — просто добавьте это в конец файла style.css в теме вашего сайта.

.tea2{
display:block;
margin:20px 0;
padding:0 20px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
vertical-align:middle;
font-size:14px;
background-color:#222;
color:#fff;
}

.tea2 input{color:#111;}

.tea2 .teaconteiner{}

.tea2 .teaconteiner .row div{padding-top:10px;padding-bottom:10px;}

.tea2 input.submit{
background-color:#ff7;
border:none;
font-size:18px;
padding:0 34px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.tea2 label{margin:0 5px;}
.tea2 label input{margin:0 3px 0 0;}

.tea2 input.sum{width:50px;text-align:center;margin:0 5px 0 0;}

.tea2 .text{font-size:18px;line-height:28px;}

.tea2 .text i{margin:0 10px 0 0;font-size:24px;}

3. Если к теме сайта не подключен bootstrap, то его нужно подключить. Делается это либо в файле темы header.php хардкодом, либо в том же function.php

Поскольку тема подключения css и js файлов к теме сайта на WordPress выходит за рамки данной инструции, я, пожалуй вернусь к данному вопросу в следующем посте.

Впрочем, можно и без бутстрапа. Просто будет больше возни со стилями.

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

Готово.


Вот что получилось у меня.

Данную форму можно использовать для даната, но она не годится для продаж, поскольку не выдаёт покупателю кассовый чек.

Напишите комментарий