Как сделать форму заказа на оплату в WhatsApp

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

HTML

<div class="container">
  <div class="col-lg-6 col-lg-offset-3">
    <h4>Cara Membuat Formulir Pemesanan Checkout Ke WhatsApp</h4>
      <div class="panel panel-success">
        <div class="panel-heading">Checkout Ke WhatsApp</div>
          <div class="panel-body">
            <div class="form-group">
              <label>Nama</label>
<input type="text" name="name" class="form-control" placeholder="Nama" id="name"></div>
               <div class="form-group">
               <label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" id="email"></div>
               <div class="form-group">
               <label>Nomor Kontak / WhatsApp</label>
<input type="text" name="phone" class="form-control" placeholder="Nomor Kontak / WhatsApp" id="phone"></div>
               <div class="form-group">
               <label>Pilih Produk</label>
               <select name="product" class="form-control" id="product">
                 <option value="">-- Pilih Produk --</option>
                 <option value="produk_1">Produk 1</option>
                 <option value="produk_2">Produk 2</option>
                 <option value="produk_3">Produk 3</option>
               </select>
               </div>
               <div class="form-group">
               <label>Catatan</label>
<textarea name="description" class="form-control" rows="3" id="description"></textarea></div>
               <div class="form-group">
               <button class="btn btn-success send">Pesan via WhatsApp</button>
          </div>
                  <div id="text-info"></div>
      </div>
    </div>
  </div>
</div>

2. Добавьте CDN

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

3. Добавьте CSS

.panel-heading-whatsaap {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.form-control-whatsaap {
    display: block;
    width: 100%;
    height: auto;
    margin:10px 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.pesan-valid {
  color: #ff0000;
  font-family: sans-serif;
  font-style: italic;
  font-size: 13px;
}
.whatsaap-success {
   cursor: pointer;
   outline: 0;
   color: #fff;
   background-color: #5cb85c;
   border-color: #4cae4c;
   display: inline-block;
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
   border: 1px solid transparent;
   padding: 6px 12px;
   font-size: 16px;
   border-radius: .25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.whatsaap-success:hover {
   color: #fff;
   background-color: #4cae4c;
   border-color: #4cae4c;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert {
    padding: 15px;
    margin: 10px 0 0;
    border: 1px solid transparent;
    border-radius: 4px;
}

3. Добавьте JavaScript

Полный код JavaScript доступен по этой ссылке.

Вот как сделать форму заказа для WhatsApp. Я надеюсь, что эту статью легко применить на вашем WordPress или Blogger.

Удачи.

Как сделать форму заказа на оплату в WhatsApp

Похожие вопросы