Skip to content

Commit 0814d15

Browse files
tomhamiltonstubbertomhamiltonstubber
authored
Merge pull request #15 from tutorcruncher/custom-form-example
Example for a custom socket enquiry
2 parents 17daaff + 7a47858 commit 0814d15

File tree

3 files changed

+149
-7
lines changed

3 files changed

+149
-7
lines changed

‎Gemfile.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ GEM
44
addressable (2.5.2)
55
public_suffix (>= 2.0.2, < 4.0)
66
colorator (1.1.0)
7-
ffi (1.9.21)
7+
ffi (1.9.23)
88
forwardable-extended (2.6.0)
99
jekyll (3.3.1)
1010
addressable (~> 2.4)
@@ -35,16 +35,16 @@ GEM
3535
multi_json (1.13.1)
3636
pathutil (0.16.1)
3737
forwardable-extended (~> 2.6)
38-
public_suffix (3.0.1)
38+
public_suffix (3.0.2)
3939
pygments.rb (1.2.1)
4040
multi_json (>= 1.0.0)
41-
rb-fsevent (0.10.2)
41+
rb-fsevent (0.10.3)
4242
rb-inotify (0.9.10)
4343
ffi (>= 0.5.0, < 2)
4444
rouge (1.11.1)
4545
ruby_dep (1.5.0)
4646
safe_yaml (1.0.4)
47-
sass (3.5.5)
47+
sass (3.5.6)
4848
sass-listen (~> 4.0.0)
4949
sass-listen (4.0.0)
5050
rb-fsevent (~> 0.9, >= 0.9.4)
@@ -60,7 +60,7 @@ DEPENDENCIES
6060
pygments.rb (~> 1.2, >= 1.2.1)
6161

6262
RUBY VERSION
63-
ruby 2.3.3p222
63+
ruby 2.5.1p57
6464

6565
BUNDLED WITH
66-
1.16.0
66+
1.16.1

‎_examples/custom_enquiry_form.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
layout: socket_example
3+
title: Custom Enquiry Form Example
4+
permalink: /examples/custom-enquiry-form
5+
description: An example of a custom form used instead of Socket Frontend to submit to Socket Server
6+
---
7+
{% highlight html %}
8+
<body>
9+
10+
...
11+
12+
<div id="enquiry-form">
13+
<form action="#" method="POST">
14+
<input type="text" id="client_name" name="client_name" placeholder="Name (Required)" required="required" maxlength="255">
15+
<input type="text" id="service_recipient_name" name="service_recipient_name" placeholder="Student name" maxlength="255">
16+
<input type="email" id="client_email" name="client_email" placeholder="Email" maxlength="255">
17+
<input type="text" id="client_phone" name="client_phone" placeholder="Phone number" maxlength="255">
18+
<textarea id="attributes-tell-us-about-yourself" attrtype="true" name="attributes-tell-us-about-yourself" placeholder="Tell us about your needs" maxlength="2047" rows="5"></textarea>
19+
<div class="text-center">
20+
<div class="g-recaptcha" data-sitekey="6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt"></div>
21+
</div>
22+
<button type="submit">Submit</button>
23+
</form>
24+
</div>
25+
26+
...
27+
28+
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
30+
<script>
31+
$('form').submit(function(e) {
32+
e.preventDefault()
33+
const v = grecaptcha.getResponse()
34+
if (v.length === 0) {
35+
$('#captcha').html("You can't leave Captcha Code empty")
36+
return false
37+
}
38+
const data = {
39+
client_name: $('#client_name').val(),
40+
client_email: $('#client_email').val(),
41+
client_phone: $('#client_phone').val(),
42+
service_recipient_name: $('#service_recipient_name').val(),
43+
grecaptcha_response : v,
44+
// Make sure any extra attribute fields are in a separate object.
45+
attributes: {
46+
'attributes-tell-us-about-yourself': $('#attributes-tell-us-about-yourself').val()
47+
}
48+
}
49+
$.ajax({
50+
type: 'POST',
51+
url: 'https://socket.tutorcruncher.com/{{ site.socket_key }}/enquiry',
52+
data: JSON.stringify(data),
53+
dataType: 'json'
54+
}).done(function() {
55+
$('form').html('Form successfully submitted!')
56+
})
57+
})
58+
</script>
59+
</body>
60+
{% endhighlight %}
61+
62+
<style>
63+
input[type=text], input[type=email], textarea {
64+
width: 100%;
65+
padding: 12px 20px;
66+
margin: 8px 0;
67+
display: inline-block;
68+
border: 1px solid #ccc;
69+
border-radius: 4px;
70+
box-sizing: border-box;
71+
}
72+
73+
button {
74+
width: 100%;
75+
background-color: #4CAF50;
76+
color: white;
77+
padding: 14px 20px;
78+
margin: 8px 0;
79+
border: none;
80+
border-radius: 4px;
81+
cursor: pointer;
82+
}
83+
84+
button:hover {
85+
background-color: #45a049;
86+
}
87+
88+
div#enquiry-form {
89+
border-radius: 5px;
90+
background-color: #f2f2f2;
91+
border: 1px solid #ccc;
92+
padding: 20px;
93+
width: 50%;
94+
margin: 0 auto;
95+
}
96+
97+
.g-recaptcha {
98+
display: inline-block;
99+
}
100+
</style>
101+
<div id="enquiry-form">
102+
<form action="#" method="POST">
103+
<input type="text" id="client_name" name="client_name" placeholder="Name (Required)" required="required" maxlength="255">
104+
<input type="text" id="service_recipient_name" name="service_recipient_name" placeholder="Student name" maxlength="255">
105+
<input type="email" id="client_email" name="client_email" placeholder="Email" maxlength="255">
106+
<input type="text" id="client_phone" name="client_phone" placeholder="Phone number" maxlength="255">
107+
<textarea id="attributes-tell-us-about-yourself" attrtype="true" name="attributes-tell-us-about-yourself" placeholder="Tell us about your needs" maxlength="2047" rows="5"></textarea>
108+
<div class="text-center">
109+
<div class="g-recaptcha" data-sitekey="6LdyXRgUAAAAADUNhMVKJDXiRr6DUN8TGOgllqbt"></div>
110+
</div>
111+
<button type="submit">Submit</button>
112+
</form>
113+
</div>
114+
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
115+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
116+
<script>
117+
$('form').submit(function(e) {
118+
e.preventDefault()
119+
const v = grecaptcha.getResponse()
120+
if (v.length === 0) {
121+
$('#captcha').html("You can't leave Captcha Code empty")
122+
return false
123+
}
124+
const data = {
125+
client_name: $('#client_name').val(),
126+
client_email: $('#client_email').val(),
127+
client_phone: $('#client_phone').val(),
128+
service_recipient_name: $('#service_recipient_name').val(),
129+
grecaptcha_response : v,
130+
// Make sure any extra attribute fields are in a separate object.
131+
attributes: {
132+
'attributes-tell-us-about-yourself': $('#attributes-tell-us-about-yourself').val()
133+
}
134+
}
135+
$.post(
136+
'https://socket.tutorcruncher.com/{{ site.socket_key }}/enquiry',
137+
JSON.stringify(data),
138+
() => $('form').html('Form successfully submitted!'),
139+
'json'
140+
)
141+
})
142+
</script>

‎_includes/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h3>About Dino Tutors</h3>
4444
<i class="fa fa-chevron-up"></i>
4545
</a>
4646
</div>
47-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
47+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4848
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
4949
<script>
5050
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

0 commit comments

Comments
 (0)