https://www.studiomedicosangiuseppe.it/ajax-load/form-appointment.html

1<section class="">
2  <div class="container" style="max-width: 700px;">
3    <h3 class="bg-theme-colored p-15 mb-0 text-white">Richiedi un appuntamento</h3>
4    <div class="section-content bg-white p-30">
5      <div class="row">
6        <div class="col-md-12">
7          <form id="appointment_form_popup" name="appointment_form_popup" class="" method="post" action="includes/appointment.php">
8            <div class="row">
9              <div class="col-sm-12">
10                <div class="form-group mb-10">
11                  <input name="form_name" class="form-control" type="text" required="" placeholder="Inserisci Nome e Cognome" aria-required="true">
12                </div>
13              </div>
14              <div class="col-sm-12">
15                <div class="form-group mb-10">
16                  <input name="form_email" class="form-control required email" type="email" placeholder="Inserisci la tua e-mail" aria-required="true">
17                </div>
18              </div>
19			  <div class="col-sm-12">
20                <div class="form-group mb-10">
21                   <input name="form_phone" class="form-control required tel" placeholder="Il tuo numero di telefono" aria-required="true" type="tel">
22                </div>
23			  </div>
24              <div class="col-sm-12">
25                <div class="form-group mb-10">
26                  <input name="form_appontment_date" class="form-control required date-picker" type="text" placeholder="Data preferita per appuntamento" aria-required="true">
27                </div>
28              </div>
29            </div>
30            <div class="form-group mb-10">
31              <textarea name="form_message" class="form-control required"  placeholder="Inserisci la tua richiesta" rows="3" aria-required="true"></textarea>
32            </div>
33            <div class="form-group mb-0 mt-20">
34              <input name="form_botcheck" class="form-control" type="hidden" value="">
35              <button type="submit" class="btn btn-dark btn-theme-colored" data-loading-text="Prego attendere...">INVIA</button>
36            </div>
37          </form>
38
39          

39<script type="text/javascript">
40            $("#appointment_form_popup").validate({
41              submitHandler: function(form) {
42                var form_btn = $(form).find('button[type="submit"]');
43                var form_result_div = '#form-result';
44                $(form_result_div).remove();
45                form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
46                var form_btn_old_msg = form_btn.html();
47                form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
48                $(form).ajaxSubmit({
49                  dataType:  'json',
50                  success: function(data) {
51                    if( data.status == 'true' ) {
52                      $(form).find('.form-control').val('');
53                    }
54                    form_btn.prop('disabled', false).html(form_btn_old_msg);
55                    $(form_result_div).html(data.message).fadeIn('slow');
56                    setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
57                  }
58                });
59              }
60            });
61          </script>

61
62        </div>
63        

63<script>
64          //reload date and time picker
65          THEMEMASCOT.initialize.TM_datePicker();
66        </script>

66
67      </div>
68    </div>
69  </div>
70</section>