Custom Enquiry Form Example

An example of a custom form used instead of Socket Frontend to submit to Socket Server
<body>

 ...

  <div id="enquiry-form">
    <form action="#" method="POST">
      <input type="text" id="client_name" name="client_name" placeholder="Name (Required)" required="required" maxlength="255">
      <input type="text" id="service_recipient_name" required="required" name="service_recipient_name" placeholder="Student name" maxlength="255">
      <input type="email" id="client_email" name="client_email" placeholder="Email" maxlength="255">
      <input type="text" id="client_phone" name="client_phone" placeholder="Phone number" maxlength="255">
      <textarea id="tell-us-about-yourself" attrtype="true" name="tell-us-about-yourself" placeholder="Tell us about your needs" maxlength="2047" rows="5"></textarea>
      <div class="text-center">
        <div class="g-recaptcha" data-sitekey="6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt"></div>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>

  ...

  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $('form').submit(function(e) {
      e.preventDefault()
      const v = grecaptcha.getResponse()
      if (v.length === 0) {
        $('#captcha').html("You can't leave Captcha Code empty")
        return false
      }
      const data = {
        client_name: $('#client_name').val(),
        client_email: $('#client_email').val() || null,
        client_phone: $('#client_phone').val() || null,
        service_recipient_name: $('#service_recipient_name').val() || null,
        grecaptcha_response : v,
        // Make sure any extra attribute fields are in a separate object.
        attributes: {
          'tell_us_about_yourself': $('#tell-us-about-yourself').val() || null,
        }
      }
      $.ajax({
        type: 'POST',
        url: 'https://socket.tutorcruncher.com/9c79f14df986a1ec693c/enquiry',
        data: JSON.stringify(data),
        dataType: 'json'
      }).done(function() {
        $('form').html('Form successfully submitted!')
      })
    })
  </script>
</body>