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