Form Bukti Transfer - database Code

Buka

wajib pasang ini dibawah head(jika sudah pernah pasang maka tidak perlu pasang lagi)  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

Show Code


<div class="triggers">
<label for="popup-1">Buka</label>
</div>

<input type="checkbox" class="vcms__popup-check" name="popup-1" id="popup-1"/>
<div class="vcms__popup">
  <div class="inner">
    <div class="header">
  Laporan Kerusakan Manga/ Anime  </div>
    <div class="txt">
  <form id="reportFormLaporan_hirutshuji" enctype="multipart/form-data">
   
    <label for="nama_pelapor">Nama:</label>
    <input class="lrp" placeholder="masukan nama kamu" type="text" id="nama_pelapor" name="nama_pelapor" required>
      
    <label for="ID_Telegram">ID Telegram:</label>
    <input class="lrp" placeholder="Masukan ID Telegram (Wajib) " type="text" id="ID_Telegram" name="ID_Telegram" required>
    
    <fieldset class='kerusakan'>
      <legend>Payment:</legend>     
 <div class="form-group">
    <input type="checkbox" id="Bayar_Via" name="bayarVia" value="Trakteer">
<label for="Bayar_Via">Trakteer</label>
    </div>
    </fieldset>
    <label style="display:none" for="link">Link Postingan:</label>
    <input style="display:none" class="lrp" placeholder="Masukan url yg rusak" type="url" id="linkReport" name="linkReport" value="">
<label for="linkTrakteer">Bayar:</label>
<!-- JavaScript Trakteer -->
<script>
  var id_Trakteer = "hiru";
  var text_Trakteer = 'Bayar disini';
  var warna_Trakteer ='#be1e2d';
</script>
<script type='text/javascript' src='https://assets.trakteer.id/js/trbtn-overlay.min.js'></script>
<script type='text/javascript' class='troverlay'>
  (function() {
    var trbtnId = trbtnOverlay.init(text_Trakteer,warna_Trakteer,`https://trakteer.id/${id_Trakteer}/tip/embed/modal`,'https://cdn.trakteer.id/images/embed/trbtn-icon.png?date=18-11-2023','40','inline');
    trbtnOverlay.draw(trbtnId);
  })();
</script>
    <label for="message">Pesan kamu:</label>
    <textarea placeholder="Tulis pesan kepada admin, tidak diisi juga tidak apa-apa" id="pesan_pelapor" name="pesan_pelapor"></textarea>
    
<label class='custom-file-label' for="bukti_kerusakan"> (upload screenshot bukti Transfer):</label>

<input class='custom-file-input' type="file" id="bukti_kerusakan" name="bukti_kerusakan" accept="image/*,video/*">
<div id="imagePreview"></div>
<div id="videoPreview"></div>
  
 <button class='buttonSumbitReport' type="sumbit">Kirim</button>


  </form>  
   </div>
    <div class="footer">
  <a class="btn" href="#">Apa ini?</a>
      <label class="close" for="popup-1">Batal</label>
    </div>
  </div>
</div>


<style>
  :root {
   --bg-report:#222;
    --color-report:#ccc;
   }
#reportFormLaporan_hirutshuji {
    padding: 20px;
    background-color:var(--bg-report);
    color: var(--color-report);
    border: none;
    border-radius: 15px;
    font-size: 14px;
    overflow: hidden;
}
  
#reportFormLaporan_hirutshuji label,
#reportFormLaporan_hirutshuji input,
#reportFormLaporan_hirutshuji textarea,.kerusakan {
  display: block;
  margin-bottom: 20px;
}
.kerusakan {padding:20px}
#reportFormLaporan_hirutshuji input{
  width: 100%;
  padding: 8px;
}
  #reportFormLaporan_hirutshuji textarea {
  border:1px solid var(--color-report);
  border-radius:5px;
  resize: none;
  width: 100%;
  height:auto;
  padding: 8px;
}

#reportFormLaporan_hirutshuji .buttonSumbitReport {
  padding: 10px 20px;
  background-color: #FF9100;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius:5px;
}

#reportFormLaporan_hirutshuji .buttonSumbitReport:hover {
  background-color: #0056b3;
}

input.lrp {
  padding: 0;
  border:1px solid var(--color-report);
  border-radius:5px;
  height: initial;
  width: initial;
  margin-bottom: 5px;
  cursor: pointer;
}
input.lrp,#reportFormLaporan_hirutshuji textarea  {
  background-color: #0000;
  color:var(--color-report);}
  
.lrp::placeholder,#reportFormLaporan_hirutshuji textarea::placeholder {color:var(--color-report)}
.lrp:focus,#reportFormLaporan_hirutshuji textarea:focus {outline: 1px solid #00FFDD;}

.form-group {
  display: block;
  margin-bottom: 20px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none !important;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
}

.form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.custom-file-input {
  display: inline-block;
  visibility: hidden;
  width: 0;
  height: 0;
}

.custom-file-label {
  display: inline-block;
  background-color: #007bff; 
  color: #fff;
  padding: 8px 12px; 
  border-radius: 4px; */
  cursor: pointer;
}

.custom-file-label::before {
  content: 'Upload File';
}

.custom-file-label:hover {
  background-color: #0056b3;
}
div#imagePreview {
    width: 100%;
    height: auto;
    max-height: 300px;
    max-width: 360px;
    overflow: hidden;
    border-radius: 5px;
    margin: 10px 0;
}
div#videoPreview {
    width: 100%;
    height: auto;
    max-height: 300px;
    max-width: 360px;
    overflow: hidden;
    border-radius: 5px;
    margin: 10px 0;
}
div#imagePreview img {
    width: 100%;
    height: auto;
}
div#videoPreview video {
    width: 100%;
    height: auto;
}



/*popup by https://codepen.io/NyBu/pen/BrXpwV*/
  
.triggers {
  display: flex;
  align-items: center;
  margin-top: 60px;
  flex-direction: column;
}

.triggers label {
  cursor: pointer;
  height: 43px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #3a4047;
  border: 2px solid #3a4047;
  border-radius: 21.5px;
  box-sizing: border-box;
  margin-top: 15px;
}

/** START POPUP CSS **/
.vcms__popup-check {
  display: none;
}
.vcms__popup {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s, opacity 0.25s ease-in-out;
  transition-delay: 0.65s, 0.2s;
}

.vcms__popup-check:checked + .vcms__popup {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.vcms__popup .inner {
  width: 540px;
  max-width: 95%;
  border-radius: 20px;
  box-shadow: 0 9px 23px 0 rgba(0, 0, 0, 0.15);
  background-color:var(--bg-report);
  box-sizing: border-box;
  margin-bottom: 100px;
  opacity: 0;
  transition: margin-bottom 0.4s cubic-bezier(0.42, 0.72, 0.37, 1.31),
    opacity 0.25s ease-in-out;
  transition-delay: 0s, 0s;
}

.vcms__popup-check:checked + .vcms__popup .inner {
  transition-delay: 0.15s, 0.15s;
  margin-bottom: 0;
  opacity: 1;
}

.vcms__popup .inner .header {
  padding: 20px 25px 13px;
  font-size: 28px;
  color:var(--color-report);
  background-color: var(--bg-report);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.vcms__popup .inner .txt {
  line-height: 27px;
  padding: 20px 25px;
  max-height: calc(100vh - 260px);
  overflow: auto;
}

.vcms__popup .inner .footer {
  box-sizing: border-box;
  padding: 15px 25px 20px;
  border-top: 1px solid #efefef;
  display: flex;
  justify-content: flex-end;
  background-color: var(--bg-report);
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.vcms__popup .inner .footer .btn {
  height: 43px;
  width: 156px;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color:var(--color-report);
  text-decoration: none;
  font-size: 13px;
  border: 2px solid #3a4047;
  border-radius: 21.5px;
  box-sizing: border-box;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}

.vcms__popup .inner .footer .close {
  height: 43px;
  width: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bcbcbc;
  text-decoration: none;
  font-size: 13px;
  border: 2px solid #dadada;
  border-radius: 21.5px;
  margin-left: 7px;
  box-sizing: border-box;
  font-weight: 600;
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 0;
  transition: all 0.15s ease-in-out;
}

.vcms__popup .inner .footer .btn:hover,
.vcms__popup .inner .footer .close:hover {
  background-color: #3a4047;
  color: #fff;
  border: 2px solid #3a4047;
}
 </style>


  <script>
/*<[CDATA[*/    
   var passwordLaporan = '123';// sandi password
   
   
   var password_aktif = true;//false untuk mematikan password
   
   var nama_webkamu = "Zeistmaid";//nama web kamu
   
  const tokenBot_telegram = 'xxxxxxxxxx:xxxxxxxxxxxxx'; // Ganti dengan token bot kamu
          
  const chat_Idgrup = '-10xxxxxxxxx'; // Ganti dengan chat id grup bot kamu
          
          
 var Credit_Hirutshuji = "Hirutshuji";
 var webhiru_datakodehiru = "datakodehiru.blogspot.com";  
 
 
function runformatPesan_hr(formData){
var formatPesan_hr = `<code>
=== Laporan Situs website ===
+++++++++++++++++++++++++++++
situs: 

${nama_webkamu}
----------------------
Nama:

${formData.get('nama_pelapor')}
----------------------               
ID Telegram: 

${formData.get('ID_Telegram')}
----------------------               
Bayar Via:

${formData.getAll('bayarVia').map(val => `${val}`).join(', ')}
----------------------               
Tanggal Laporan:
 
${new Date().toISOString().split('T')[0]}
----------------------        
Pesan User: 

${formData.get('pesan_pelapor')}
----------------------
Link sumber asal Pesan:

${window.location.href}
----------------------        
</code>`;
return formatPesan_hr;
  }
  /*]]>*/
</script>
<script src="https://cdn.jsdelivr.net/gh/MagicReincarnation/hosting-js-hirutshuji@main/Form%20report%20Telegram%20custom%20req/forrmPesanTelegram_noLink.js"></script>