Making an enquiry

You have to use a POST request to submit the form, so we've created an example for you to browse. If you have any questions, let us know.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <form action="#" method="POST">
      <input type="text" id="client_name" name="client_name" placeholder="Name (Required)" required="required" maxlength="255">
      <br><br>
      <input type="email" id="client_email" name="client_email" placeholder="Email" maxlength="255">
      <br><br>
      <input type="text" id="client_phone" name="client_phone" placeholder="Phone number" maxlength="255">
      <br><br>
      <textarea id="attributes-tell-us-about-yourself" attrtype="true" name="attributes-tell-us-about-yourself" placeholder="Tell us about yourself" maxlength="2047" rows="5"></textarea>
      <div class="g-recaptcha" data-sitekey="6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt"></div>
      <button type="submit">Submit</button>
    </form>
  </body>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $('form').submit(function(e) {
      e.preventDefault()
      var v = grecaptcha.getResponse()
      if (v.length === 0) {
        $('#captcha').html("You can't leave Captcha Code empty")
        return false
      }
      var data = {
        client_name: $('#client_name').val(),
        client_email: $('#client_email').val(),
        client_phone: $('#client_phone').val(),
        grecaptcha_response : v,
        // Make sure any custom Field fields are in a separate object.
        attributes: {
          'attributes-tell-us-about-yourself': $('#attributes-tell-us-about-yourself').val()
        }
      }
      $.ajax({
        type: 'POST',
        url: 'https://socket.tutorcruncher.com/9c79f14df986a1ec693c/enquiry',
        data: JSON.stringify(data),
        dataType: 'json'
      }).done(function() {
        $('form').html('form successfully submitted. Sticky badge for you!')
      })
    })
  </script>
</html>

Use Socket to embed an enquiry form on my website

Wherever you wish the form to display on your webpage, enter the following line:

<div id="socket-enquiry"></div>

Then, below where you have ** imported Socket ** put in the following:

<script>
  socket('YOUR_API_KEY', {
    mode: 'enquiry',
    element: '#socket-enquiry'
  })
</script>

You need to replace 'YOUR_API_KEY' with your public API key. How do I find that?

Example of embedding an enquiry form

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Get in touch by filling in the contact form below</p>  <div id="socket-enquiry"></div>  <p>We just love using TutorCruncher for our business.</p>
  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry',
      element: '#socket-enquiry'
    })
  </script>
</body>

See here for an example of it in action.

Use Socket to embed an enquiry popover on my website

This will embed a button on your webpage that loads the enquiry form.

Wherever you wish the button to display on your webpage, enter the following line:

<div id="socket-enquiry-modal"></div>

Then, below where you have ** imported Socket **, insert in the following:

<script>
  socket('YOUR_API_KEY', {
    mode: 'enquiry-modal',
    element: '#socket-enquiry-modal'
  })
</script>

You need to replace 'YOUR_API_KEY' with your public API key. How do I find that?

Example of embedding an enquiry popover/modal

<body>
  <h1>This is a webpage for my tuition agency</h1>
  <p>Click the button to contact us</p>  <div id="socket-enquiry-modal"></div>  <p>We just love using TutorCruncher for our business.</p>
  <script src="https://cdn.tutorcruncher.com/socket/latest/socket.js"></script>
  <script>
    socket('YOUR_API_KEY', {
      mode: 'enquiry-modal',
      element: '#socket-enquiry-modal'
    })
  </script>
</body>

See here for an example of it in action.

Did this answer your question?