<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

        <form method="POST" action="https://gastroprofi.test.oregional.hu/form/insert" enctype="multipart/form-data">
  <h1>My New Form</h1>
<div class="hff hff_textbox form-group" data-form-type="textbox" data-field-id="101">
  <label class="control-label  required" for="name">Lehetőség</label>
  <input type="text" class="form-control" name="name" maxlength="300"  required="required"/>
</div>
<div class="hff hff_textbox form-group" data-form-type="textbox" data-field-id="102">
  <label class="control-label  required" for="contact_name">Kapcsolat neve</label>
  <input type="text" class="form-control" name="contact_name" pattern="[a-zA-Z ]+" title="Letters Only" maxlength="300"  required="required"/>
</div>
<div class="hff hff_textbox form-group" data-form-type="textbox" data-field-id="103">
  <label class="control-label" for="oregional_gastroprofi_number_of_reservation">Foglalás száma</label>
  <input type="text" class="form-control" name="oregional_gastroprofi_number_of_reservation"/>
</div>
<div class="hff hff_textbox form-group" data-form-type="textbox" data-field-id="104">
  <label class="control-label  required" for="email_from">E-mail</label>
  <input type="email" class="form-control" name="email_from" maxlength="300"  required="required"/>
</div>
<div class="hff hff_textbox form-group" data-form-type="textbox" data-field-id="105">
  <label class="control-label  required" for="phone">Telefon</label>
  <input type="number" class="form-control" name="phone" maxlength="300"  required="required"/>
</div>
  <script>
  $( function() {
    $( "#oregional_gastroprofi_table_reservation" ).removeClass("hasDatepicker");
      $("#oregional_gastroprofi_table_reservation").datetimepicker({
        format: "YYYY-MM-DD HH:mm:ss",
        icons : {
          time: 'fa fa-clock-o',
          date: 'fa fa-calendar',
          up: 'fa fa-chevron-up',
          down: 'fa fa-chevron-down'
        },
      });
  } );
  </script>
<div class="hff hff_datetime_picker form-group" data-form-type="datetime_picker" data-field-id="106">
  <label class="control-label" for="oregional_gastroprofi_table_reservation">Foglalás dátuma</label>
  <div class="input-group date" id="oregional_gastroprofi_table_reservation" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#oregional_gastroprofi_table_reservation" name="oregional_gastroprofi_table_reservation" required="required"/>
    <div class="input-group-addon" data-target="#oregional_gastroprofi_table_reservation" data-toggle="datetimepicker"><div class="input-group-text"><i class="fa fa-calendar"/></i></div></div>
  </div>
</div>
<div class="hff hff_textarea form-group" data-form-type="textarea" data-field-id="107">
  <label class="control-label" for="description">Megjegyzések</label>
  <textarea class="form-control" name="description"></textarea>
</div>
<div class="hff hff_checkbox checkbox" data-form-type="checkbox_boolean" data-field-id="108">
  <label class="required"><input type="checkbox" name="active"/>Aktív</label>
</div>
  <input type="hidden" name="form_id" value="25"/>
      <button class="btn btn-primary btn-lg">Submit</button>
</form>