Contents

<div class="container-fluid mt-5">
  <form id="contactMeForm">
      <!-- Alert on Success/Failure -->
    <div id="notification" class="alert mt-3" role="alert" style="display: none;"></div>
    <div class="form-group">
      <input type="text" class="form-control" id="name" name="user_name" placeholder="Name">
    </div>
    <div class="form-group">
      <input type="email" class="form-control" id="mail" name="user_email" placeholder="Email">
    </div>
    <div class="form-group">
      <textarea class="form-control" id="msg" name="user_message" placeholder="Message"></textarea>
    </div>
    <button type="button" class="btn btn-primary btn-block" id="contact_submit">Send your message</button>
  </form>
</div>

<!--&lt;!&ndash; TODO - this isn't working when using the scripts.html include ... &ndash;&gt;-->
<script src="/assets/js/jquery-3.7.0.min.js"></script>

<script>
  function submitContact(payload) {
    $.ajax({
      url : "{{ site.contact.api.url }}",
      type: "POST",
      dataType: "json",
      data: payload,
      success: function(data){
        console.log(data);
        $('#notification').addClass('alert-success').text('Message Sent!').show();
        clearForm();
      },
      error: function(){
        console.log("Error in the request");
        $('#notification').addClass('alert-danger').text('Something went wrong :(').show();
      }
    });
  }

  function clearForm() {
    $('#name').val('');
    $('#mail').val('');
    $('#msg').val('');
  }


  function buildPayload() {
    var contactMePayload = {
      contact_name : $('#name').val(),
      contact_email : $('#mail').val(),
      contact_message : $('#msg').val()
    };

    return JSON.stringify(contactMePayload);
  }

  $('#contact_submit').click(function() {
    var payload = buildPayload();
    console.log(payload);
    submitContact(payload);
  });
</script>

<!-- TODO - this isn't working with my self hosted jquery?? -->

Version data entries

5 entries across 5 versions & 1 rubygems

Version	Path
jscom_ice-0.0.7	_includes/contact-me-form.html
jscom_ice-0.0.6	_includes/contact-me-form.html
jscom_ice-0.0.5	_includes/contact-me-form.html
jscom_ice-0.0.4	_includes/contact-me-form.html
jscom_ice-0.0.3	_includes/contact-me-form.html