Socket for Client Enquiry Forms

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.2.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.

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.

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.

How do I enable other fields in my enquiry form?

You can add or edit Custom Fields, making sure both the 'Enquiry Form' and 'Client Accessible' options are both checked.

Please note: Editing the fields shown inside TutorCruncher socket can take up to 24 hours to update.

You can add a link to your terms and conditions on your enquiry form and require that your users consent to these before they submit an enquiry with you.

To do so, proceed to your System > Settings > TutorCruncher API > API Integrations and select your 'Socket Integration'. On the following page, click 'Edit' and refer to the section at the bottom called 'Link to terms and conditions'. If this section contains a link to a page on your website where you have added your terms and conditions, then your website's enquiry forms will include a link to this along with new checkbox that asks your users to read them before they submit their enquiry.