Skip to main content

Advanced Client Enquiry Form Socket

Learn how to integrate a customisable enquiry form on your website here.

Written by Maahi Islam

Note: If your website is built and hosted using GoDaddy's website builder, you may experience issues integrating TutorCruncher Socket. This is because GoDaddy's website builder does not support captcha (read more on what this is below) on embedded plugins. As captcha is required on all TutorCruncher Socket forms, we recommend building your website on an alternative platform.

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.

<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(),
client_phone: $('#client_phone').val(),
service_recipient_name: $('#service_recipient_name').val(),
grecaptcha_response : v,
// Make sure any extra attribute fields are in a separate object.
attributes: {
'tell_us_about_yourself': $('#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!')
})
})
</script>
</body>

Note: Socket requires that client_name and service_recipient_name are submitted. If you don't include this data, the submission will not work.

Using the Socket to embed an enquiry form on your 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.

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>

Using the Socket to embed an enquiry popover on your 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.

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>

Frequently Asked Questions

Can I disable reCAPTCHA?

reCAPTCHA is a security feature that verifies a user is a real person before allowing them to submit a form. You will have seen these before in the form of checkboxes, image puzzles, or similar challenges that are easy for humans but difficult for automated bots to complete.

reCAPTCHA is required on all TutorCruncher Socket forms and cannot be disabled. Here's why:

Spam prevention - Without captcha, there is no barrier against automated bots submitting enquiries in bulk. As AI-powered automation becomes more widespread, this risk is growing significantly.

Security - Forms without captcha are far more vulnerable to exploitation, including phishing attempts, fake enquiries, and other scams that could affect both you and your clients.

Platform integrity - Unrestricted bot traffic places unnecessary load on TutorCruncher's servers, which could degrade performance for all users across the platform.

Data quality - Captcha helps ensure that the enquiries you receive are from real people, keeping your pipeline clean and your response time meaningful.

Did this answer your question?