Skip to content

Commit 95685ee

Browse files
mblaymanmblayman
committed
Prepare the form for submission for Netlify.
1 parent 82e3f5e commit 95685ee

2 files changed

Lines changed: 61 additions & 84 deletions

File tree

‎_includes/contact.html‎

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
11
<section id="contact">
2-
<div class="container">
3-
<div class="row">
4-
<div class="col-lg-12 text-center">
5-
<h2 class="section-heading">Contact Us</h2>
6-
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
7-
</div>
2+
<div class="container">
3+
<div class="row">
4+
<div class="col-lg-12 text-center">
5+
<h2 class="section-heading">Contact Us</h2>
6+
<h3 class="section-subheading text-muted">We&rsquo;d love to hear from you!</h3>
7+
</div>
8+
</div>
9+
<div class="row">
10+
<div class="col-lg-12">
11+
<form name="contactUs" id="contactForm" novalidate action="thank-you" data-netlify="true">
12+
<div class="row">
13+
<div class="col-md-6">
14+
<div class="control-group form-group">
15+
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
16+
<p class="help-block text-danger"></p>
17+
</div>
18+
<div class="control-group form-group">
19+
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
20+
<p class="help-block text-danger"></p>
21+
</div>
822
</div>
9-
<div class="row">
10-
<div class="col-lg-12">
11-
<form name="contactUs" id="contactForm" novalidate action="thank-you" data-netlify="true">
12-
<div class="row">
13-
<div class="col-md-6">
14-
<div class="control-group form-group">
15-
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
16-
<p class="help-block text-danger"></p>
17-
</div>
18-
<div class="control-group form-group">
19-
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
20-
<p class="help-block text-danger"></p>
21-
</div>
22-
<div class="control-group form-group">
23-
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
24-
<p class="help-block text-danger"></p>
25-
</div>
26-
</div>
27-
<div class="col-md-6">
28-
<div class="control-group form-group">
29-
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
30-
<p class="help-block text-danger"></p>
31-
</div>
32-
</div>
33-
<div class="clearfix"></div>
34-
<div class="col-lg-12 text-center">
35-
<div id="success"></div>
36-
<button type="submit" class="btn btn-xl">Send Message</button>
37-
</div>
38-
</div>
39-
</form>
40-
</div>
23+
<div class="col-md-6">
24+
<div class="control-group form-group">
25+
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
26+
<p class="help-block text-danger"></p>
27+
</div>
4128
</div>
42-
</div>
43-
</section>
29+
<div class="clearfix"></div>
30+
<div class="col-lg-12 text-center">
31+
<div id="success"></div>
32+
<button type="submit" class="btn btn-xl">Send Message</button>
33+
</div>
34+
</div>
35+
</form>
36+
</div>
37+
</div>
38+
</div>
39+
</section>

‎js/contact_me.js‎

Lines changed: 25 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,35 @@ $(function() {
33
$("input,textarea").jqBootstrapValidation({
44
preventSubmit: true,
55
submitError: function($form, event, errors) {
6-
// additional error messages or events
6+
// additional error messages or events
77
},
88
submitSuccess: function($form, event) {
9-
event.preventDefault(); // prevent default submit behaviour
10-
// get values from FORM
11-
var name = $("input#name").val();
12-
var email = $("input#email").val();
13-
var phone = $("input#phone").val();
14-
var message = $("textarea#message").val();
15-
var firstName = name; // For Success/Failure Message
16-
// Check for white space in name for Success/Fail message
17-
if (firstName.indexOf(' ') >= 0) {
18-
firstName = name.split(' ').slice(0, -1).join(' ');
19-
}
20-
$.ajax({
21-
url: "././mail/contact_me.php",
22-
type: "POST",
23-
data: {
24-
name: name,
25-
phone: phone,
26-
email: email,
27-
message: message
28-
},
29-
cache: false,
30-
success: function() {
31-
// Success message
32-
$('#success').html("<div class='alert alert-success'>");
33-
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
34-
.append("</button>");
35-
$('#success > .alert-success')
36-
.append("<strong>Your message has been sent. </strong>");
37-
$('#success > .alert-success')
38-
.append('</div>');
9+
event.preventDefault(); // prevent default submit behaviour
10+
$.post($form.attr("action"), $form.serialize())
11+
.then(function() {
12+
// Success message
13+
$('#success').html("<div class='alert alert-success'>");
14+
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
15+
.append("</button>");
16+
$('#success > .alert-success')
17+
.append("<strong>Your message has been sent. </strong>");
18+
$('#success > .alert-success')
19+
.append('</div>');
3920

40-
//clear all fields
41-
$('#contactForm').trigger("reset");
42-
},
43-
error: function() {
44-
// Fail message
45-
$('#success').html("<div class='alert alert-danger'>");
46-
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
47-
.append("</button>");
48-
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
49-
$('#success > .alert-danger').append('</div>');
50-
//clear all fields
51-
$('#contactForm').trigger("reset");
52-
},
21+
//clear all fields
22+
$('#contactForm').trigger("reset");
5323
})
24+
.catch(function() {
25+
// Fail message
26+
$('#success').html("<div class='alert alert-danger'>");
27+
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
28+
.append("</button>");
29+
$('#success > .alert-danger').append("<strong>Sorry, something went wrong. Please try again later!");
30+
$('#success > .alert-danger').append('</div>');
31+
//clear all fields
32+
$('#contactForm').trigger("reset");
33+
})
34+
})
5435
},
5536
filter: function() {
5637
return $(this).is(":visible");

0 commit comments

Comments
 (0)